SaaS platform dashboard
The dashboard/homepage for the SaaS product by Trusted Shops for B2B customers.
Overview
As the UX designer in a multidisciplinary product team, I was responsible for researching and designing a concept for the product dashboard. The challenge was how to give users useful information in a clean, understandable and attractive way.
In brief, my process was:
Article research
Competitor research
Internal survey
User journey
​
Wireframing
Internal feedback
Iteration
​
High fidelity design
Internal feedback
Iteration
​
Research
Article research
I wanted to start by generally understanding the feature and its goals (What is a dashboard? What are its aims? What makes an effective one?) I researched a number of online sources to gain an understanding of the aims and dos/don'ts of dashboards.
​
(See: NN Group, UX Design CC, UX Planet, Just in Mind, and Usability Geek.)
Competitor research
At this early stage, I also wanted to see how our competitors and other SaaS products were presenting their dashboards. This helped to form a general idea of the standards out there.
Key Findings
- Both scrolling and no scrolling layouts used
- All use cards, with one piece of info per card
- Include CTAs & links to further info or actions
- Graphs, numbers & visuals used to present info
- Not so many different colours used
- Fully customisable dashboard by the user is rare
- Some welcome user back to a new session
Internal survey
Although I had my own ideas, I wanted to get an internal consensus on the possible top priorities and useful information for users who visit the dashboard. Not only would this information guide my design, but also provide justification for my content choices in the conception/wireframing stage.
​
Preparation
​
In the survey I included the possible information pieces that could be interesting for our users and asked respondents to choose what they thought were the top pieces of information in order of priority, as well as space to provide other suggestions and any other comments. I distributed the survey to 14 key internal stakeholders - customer success managers (CSM - who are in daily contact with users), product owners, other designers, management.
Outcome
​
An analysis of responses showed that there were 5 distinct pieces of information deemed important for users. 3 were related directly to the performance in the specific product areas Reviews and Guarantees, and 2 were more general topics - tasks to do and information on how to improve the performance of the user's company.
User journey map
To bring information from the research together and to prepare for the next stage of conception/wireframing, I created a user journey map. This helped me to explore, before wireframing, how users might interact with the dashboard and its information pieces, and consider what users might think, expect or need.
Wireframing
First concept/wireframe
Using the research gathered in the previous stages, I explored some design ideas in a rough wireframe for the layout and information topics that were proposed. I played around with the layout until one version seemed to make sense for me.
Given the advice from the article research,
I chose a non scrollable page and placed other cards in order of priority (in my perception) according to the F reading pattern.
From the internal survey, I found it was important that users should be shown what tasks they need to do, so I decided on having a Tasklist card.
​
For showing the Reviews grade and review numbers per grade, a component for this already existed in the current product and I used in idea this wireframe.
​
To show the number of reviews received each month, it made sense to show this in a simple bar graph.
​
As I wasn't sure what kind of information was appropriate to show for the Guarantees, I added a graph to act as a point of discussion for the feedback rounds.
​
From the research and user journey, I included CTAs to direct users to other relevant areas and date filter options for the graphs.
Basic layout:
Final wireframe:
Internal feedback
With this wireframe, I organised discussions with the CSM team and product owners responsible for the respective product areas to be included on the dashboard.
My aim was to find out, in their opinion, if the cards and content displayed were relevant and useful for users, and discuss how we might improve them. This stage involved a back and forth process between discussions and iterating the wireframe.
Iteration
I took away the important feedback points and updated the wireframe in an iterative approach between discussions and updating the wireframe until I finally arrived at a decent concept.
Design
First design
As the wireframe incorporated the important, useful feedback from the feedback rounds, I used the content and structure and put it into a high fidelity design using elements from the design system - so that it would be visually consistent with rest of the platform.
​
With this design I organised more feedback sessions with internal stakeholders.
Internal feedback
I discussed the design with my product team, CSM, other product owners and product designers. At this point I also met with the content designer to discuss appropriate wording and design choices. Again, I took an iterative approach between discussions and updating the design.
Iteration
Given the feedback received that the screen seemed packed with information making it difficult to focus on one point of information, I changed the layout from a static "everything above the fold" to a scrollable one. Although the article research I did mostly advocated non scrollable pages, the competitor research for SaaS products showed both layouts were being used. I also added section titles to further clarify the structure of the page.
A scrollable page of course meant that I had to decide on the priority of the cards and place them accordingly. It made sense to keep the welcome and the branch selector at the top. I decided to put the Tasklist card as the next card, as it was found from discussions with CSM that information on urgent tasks to do was very important.
​
Other good feedback points mentioned I also included in the updated design iteration.
​
User testing
With the updated design, I conducted online user interviews with my product owner. We spoke to 5 users from two of the three user groups. My aim was to find out what content is important for them, what their general and detailed impressions of the dashboard were, any parts which don't make immediate sense and any suggestions for improvement.
​
Preparation
​
To start off, I noted down the aims of the research and key information to find out. I then prepared an interview script which contained an introduction, general interview questions to find out how users use the product, a card sorting activity to understand what content is important to them, and then an exploration of the prototype design with questions relating to their real-time experience with it.
Outcome
​
After analysing the feedback, I found the overall response to be generally positive with some useful ideas for further amendments.
Final design
The majority of information shown on the dashboard, along with the layout and scrolling, seemed to be appropriate for the users interviewed. I amended the design based on the points for improvement mentioned by users, as detailed below.
Tasklist
​
-
Added tags to clearly show users how long they have left to action urgent tasks.
-
Added the capability to proactively mark by the user when tasks are done
-
Created the possibility for users to view an explanation of the fields "Urgent" and "Due" in the tasklist by adding an information icon and a tooltip to appear on hover over the icon.
Guarantees​
​
-
Made information more visual by adding larger visual elements/numbers.
-
Added clear CTAs to lead user to action or view cases.
Feedback card​
​
Users felt that this card wasn't so important and should be moved somewhere else. However, from a product point of view it would be useful to get feedback after the first release, therefore I kept the position of this card at the top. I prescribed, however, the automatic removal of the card after the user has submitted feedback and allowed the card to be removed by the user by adding a close icon to the card.
Customisation​
​
Although customisation amongst competitors appeared to be unusual, we already had the idea to offer users this flexibility, and users in the interviews confirmed that this would be welcome addition. Therefore we planned this feature for a later iteration.
