Scalable Dashboards for B2B Startup
Intuitive dashboard redesign for c-suite executives and warehouse workers.
Overview
After college, I worked at a startup software company, SalesWarp, as a marketing specialist and pivoted into a UX designer role. SalesWarp was one of my first projects as a UX designer.
I worked closely alongside the CEO to optimize dashboards for their cloud product that could display key metrics depending on their user type at login.
SalesWarp's order management software allows users to track orders, inventory, and customers in one place so I had the challenge of designing a dashboard that could scale for different roles and screen types.
I developed several wireframes and created documentation for developers to implement.
Roles:
- User experience (UX) designer
- User interface (UI) designer
- Visual designer
Deliverables:
- High-fidelity wireframes
- Technical documentation
Project Details:
Duration: 6 months
Tools: Adobe XD
Challenges
- Existing dashboards are complex and can display metrics that aren't significant.
- Limited screen space to display all metrics.
- Dashboard design isn't consistent across user types.
- Current interface isn't user-friendly.
Opportunities
- Simplify dashboards using a module layout.
- Identify key metrics and add to the default view of the dashboard while providing the ability to customize their view.
- Establish a consistent UI across tools and user types.
- Create common UI elements, simple language, appropriately labeled cards to ease accessibility and navigation.
Research & Personas
I interviewed several potential users that were existing clients that ranged in job roles from CEO to executives about their current dashboard experience.
I knew quite a few retail and warehouse workers that I reached out to and gained additional perspectives. I mapped out pain points and user needs ranking them as high or low priority which factored into persona development.
Research focus areas:
What are the most important metrics brand executives care about in a dashboard?
What do they find difficult in accessing these metrics?How user-friendly is the dashboard?
Do they need to reach out to support for guidance?
And how can we make this experience easier?
Personas:
Two primary personas were developed based on usage and commonality of pain points and needs.
The users that would use the dashboard the most were c-suite executives, retail and warehouse workers.
Primary personas included:
- Laila - a c-suite professional that designs and implements day-to-day operations for the company. She needs accurate metrics and reports to send to the CEO Steve.
- Emmett - a retail manager that fulfills orders with SalesWarp's BOPIS which makes his store become a mini warehouse. He needs an easier way to view a dashboard to track inventory and tasks.
A secondary persona include the CEO, Steve, who typically won't have a lot of usage of the dashboard but for smaller companies they may have the same usage as Laila.
- Steve - the CEO of the company whom Laila reports to. He doesn't use the dashboard often in his day-to-day but likes to view a high-level summary weekly.
Design Process
Site map:
I wanted to map out which content would display in the dashboards and determine which content should be in the navigation in a separate screen.
For an example, products and warehouses had multiple levels of pages and processes so it was best to separate them instead of nesting them within the dashboard.
Sketches:
The next step was re imagining the dashboards through sketches where I explored the modules and layout, finding ways to address simplicity and consistency throughout.
Low-fidelity wireframes:
Adding another layer of content and form, I experimented with the button functionality within each module card, listings, data visualization, and toggles for additional views without taking the user to another screen.
High-fidelity wireframes:
After several iterations, I created several high fidelity wireframes for key screens including the login, dashboards, order tracking, and product descriptor editor.
Scalable Design
I wanted to create an interface that could have the ability to easily add additional features down the line with housing features within component cards but these same component designs could be carried throughout dashboards and other products
of SalesWarp.
When designing for the retail/warehouse worker personas, I had to design for a smaller screen that would be commonly used in retail (up to 1440px), so having a card layout would allow more flexibility in the future for additional modules.
Simple interface
Solving the major pain point of the difficulty in navigation, I created a simplistic UI that limited the amount of metrics and written content within the dashboard.
Using the card layout helped organize each screen easier to scan. This approach makes the information displayed easy to access, understand, and take action.
Helpful text and progression visuals
For screens that require multiple steps like the product location manager, some clients mentioned having difficulty in the lack of context and guidance within the text.
Designing a progress bar and adding context/instructive content could help employees of all experience levels.
Outcomes
The dashboard earned rave reviews from clients and positive feedback from their teams.
Since then, the dashboard has had additional features added which work well for its scalability.
Project Reflection
- Simplicity is key. Too much information on a dashboard can overwhelm users and draw attention away where it's needed most. Tabs, filters and customization functionality for modules can reduce information overload.
- Tell a story with your data. Dashboards need storytelling to add context to the data presented. For this dashboard I emphasized the three main categories first followed by more specific metrics below.
- Use color sparingly. I used color mainly for interactive elements like buttons or status indicators like the progress tracker and other indicators. Using color should convey a concept, if its overboard there could be confusion.
UI & UX