Dashboard:

For Small

Business

Owners

I led the end-to-end design of the dashboard, from defining problems to executing on visual design refinement, to working with engineers to polish the final MVP. Webveloper is a startup helping un-silo the working of multiple tools for SMB.

Team

1 PM

1 designer

5 engineers

Group 17.png

Role

Lead Product Designer

Problems

Local small business owners struggle with admin works and deadlines while juggling between different tools to manage their business

Scope & Timeline

Four months

Solutions

Provide small businesses the birds-eye view of their business: a dashboard where SMB can access all tools and digest notifications on a real-time basis.

Chrome_ToDolist.png
Chrome_Dashhome 1.png

CONTEXT & STARTING POINT

The current wireframe doesn't meet the needs of stakeholders

I picked up the design from the wireframes left by the previous designer. The engineers and PM in the team were not satisfied with the current flow. The first thing I did was to scope down the spec doc and talk with teammates in order to better understand the goals for the dashboard.

 

Goals:

1. Drive user engagements throughout all the tools (e.g. business website editor)

2. Dashboard is an all-in-one place where users can manage every aspect of their business and read the latest notifications in one place

3. Dashboard experience will be modular, expandable, customizable, and scalable 

4. Dashboard will include notification feed instead of metrics for beginner-friendly purposes

 

Old Dashboard Wireframing

Exploration-1.png
Exploration-B0.png

PROBLEMS

Analyzing the current designs and defining priorities

While analyzing the current design, I discovered some usability problems. In addition to that, the style consistency across other products of the company was not defined yet. 

 
Exploration-B0.png

Dashboard wireframe

Editor Home.png

Website Editor Hi-fi Design

Problem #1:

Style and component inconsistency across all products

Website editor design, one of the tools that are accessible from the dashboard, was already a work in progress, eighty percent done. However, the dashboard design is only fifteen percent done. 

Need:

Keep the branding, style, color guide, and components consistent across all products.

Actions:

I set up meetings with the two other designers and the PM to define the shared master style guide, color palette, and components that we will use everywhere in future development.

Old Editor Top Bar

Editor%20Home_edited.jpg

Old Dash Top Bar

Exploration-top bar.png

New Top Bars

Top bar editor.png
Top Bar Dash.png

Old Style Guide

Old Style.png

New Style Guide

New Style.png

Problem #2: Usability Issues

Need:

A refreshing change to achieve the business and user experience goals

Actions:

1. Analyze the current designs and find the usability issues

2. Conduct UX research (user testing and interviews) with existing and potential customers

3. Conduct competitive research about dashboard design  

4. Define the user needs

Analyzing.png
  • Defined global Top Bar

  • Further optimized side bar for tools

  • Separated To-do list into existing tasks and new tasks 

  • Better notification layout

  • Improved hierarchy 

  • Fixed module consistency

  • Moved To do list CTA to the top

  • Changed copy for better readability

  • Simplified Top Bar

RESEARCH

Insights from UX research

I conducted some user interviews and usability tests with six potential customers. The current mid-fi dashboard design turns out to be misleading for users to create tasks, stay updated, and manage their business.

 

Users do not understand how to navigate the dashboard in an efficient way.

 

User Needs: quick and easy, non-tech savvy, no coding, readymade do-it-for-you

1. Clear navigation of what's the use of each tool​

2. Making it easier for local small business owners to digest the latest updates that need attention

3. Allowing users to take quick and easy actions to GTD

IDEATION

Separate To Do List feature out of dashboard homepage

The initial design stacking To-do list on top of notifications can lead to various issues. Thus, I separated To Do List feature out and use notifications feed as the dashboard home for a pure focusing experience.

 

Usability issues solved:

1. The ability to browse past notifications becomes difficult when there are too many existing tasks above the fold

2. The lack of ability to view all tasks in a timeline

 

3. Users need to go to the top of the page to create a task 

 
 
Information Architecture - Frame 2.jpg
design decision

IDEATION

Add task flow at To-Do List

In able to let users make quick actions without being distracted. I provided two options to add a task: the quick add and add details options

 
Flow-Add new.png
Flow-Edit Existing.png
flow .png

Notifications feed refinement

I refined the design of the notification box of each tool for better scalability and to avoid too many edge cases. 

 
Notif Ideation.png

VISUAL EXPLORATIONS

Exploring and defining visual design

I explored and created a mood board to better ideate on the direction of the visual design.

 

Keywords:

1. Simple and light

2. Not too playful and start-up like

3. Professional & reliable with a bit of fun

 
Moodboard.png
Visual design variations.png

OUTCOME

Design Execution and Handoff

The final deliverable for the dashboard was the hi-fi design, master components, and interactive prototype.

 
Chrome_Dashhome 1.png
typing on task.png
Chrome_ToDolist 1.png
Chrome 1.png

REFLECTIONS AND LEARNINGS

Lead product design with empathy and intuition 

1

When I first started on the project, I was aiming for a complex and multi-functional dashboard. After researching about the user groups more, who are local business owners, I shifted the direction to make everything as digestable as possible. I developed deeper understanding of what kind of feature can really accelerate people's working processes.

2

I gained valuable experience throughout the process of designing the dashboard from end-to-end. Working with an engineering-focused team within a tight timeline broadened my skills in leading design and cross-functional collaboration.

3

Due to the limitation of an early stage start up, I didn't have much time to conduct more in-depth user research to let more relevant data help with making the design decisions. I'd love to go back and iterate on the design if given more time.

4

There were countless obstacles that create inefficiencie during the engineering handoff process due to edge cases. By understanding how to collaborate and support the engineerng team, I gained new perspective on how I work and build products when I was the only designer in the team.