Sofvie Data Dashboard
Streamlining data access and analysis by creating Sofvie's first ever internal dashboard
Timeline
March - April, 2023
4 weeks
My Role
Communications Lead
Project Planner and Manager
Product Designer
Team Mates
3 product designers:
Auboni Poddar, Kaitlin King,
and Xue (Snow) Yu
Tools
Figma, Figjam, When2Meet, G Suite
Python Graph Gallery, Chart.js
Project Context
This was a 4-week internship during which I worked with 3 other UX designers on a project for our client, Sofvie. Sofive is a business intelligence and technology firm that provides software for health and safety management for oil, mining and construction industries.
Challenge
Sofvie tasked our team with designing their first ever internal data dashboard, to identify user engagement patterns and improve business performance. The goal was to create a user-friendly dashboard with clear data visualization and efficient access to critical information.
Stakeholders
Project Hosts - Data Science Team:
Sidney Shapiro, Data Science Manager
Alison Liu, Project Manager
Vinh Lam, Jr Data Scientist
Sparsh, Data Analyst
Dashboard Users - Sofvie Team Leads:
Gus , Chief Innovation Officer
Shelley, Client Success Manager
Wymen, Sales Director
Dan, Quality & Services Manager - UX + Devops Manager
Solution
Our team of four UX designers delivered a high-fidelity design and prototype for Sofvie's internal dashboard. The new dashboard exceeded Sofvie's expectations, delighting both their data science team and the team leads who are the primary dashboard users. By streamlining data access and analysis, the dashboard reduced the time it takes team leads to view and analyze critical data points by at least 50%.
Date selector allows users to pick a date range as well as compare to a different date range. Client company and site selector allows users to dig deep into data of just one or several of their clients.
Data points are organized into vertical pages and then horizontal tabs.
All data points and charts have info pop-ups that explains what the data point is, how it is calculated and where the data comes from, so all users have a shared understanding.
My Key Contributions
As the communications lead, I managed all interactions with Sofvie stakeholders, including scheduling meetings, and handling emails and instant messaging.
💬
As the project manager, I led the crafting and monitoring of the project plan, driving our team to stay in scope and deliver on time.
⌛
I gained buy-in from Sofvie to allow user interviews in the form of a card sort to gather important user insights before jumping into the design process.
🤝
I presented and justified our mid-fidelity designs, leading productive discussions and gaining valuable feedback.
🗣️
As a UX designer, I optimized the team's design process through Figma’s auto-layout techniques, resulting in increased efficiency.
👩💻
Client Testimonials
“ One of the things that impressed me the most about Nancy was her ability to break down complex problems into clear and concise design steps. Her ability to communicate complex ideas and concepts clearly and effectively was instrumental in creating a design that exceeded our expectations. ”
Sidney Shapiro - Data Science Manager
“ Nancy's exceptional leadership skills, attention to detail, and focus on delivering high-quality results were instrumental to the project's success. She managed her team members effectively and encouraged them to exercise their skills and gain experience, which resulted in a highly motivated team that achieved excellent results. ”
Xiang (Alison) Liu - Project Manager
Clarifying Project Goals & Requirements
Initially tasked with designing an internal data dashboard, I recognized the importance of understanding Sofvie the company and its specific needs and objectives to ensure our solution would meet their expectations. I collaborated with my team to prepare a list of targeted questions for our kickoff call with Sidney and his data science team. These questions were designed to reveal key information about the problem the dashboard aimed to solve, the specific decisions it would support, and the criteria for measuring success.
During the kickoff call, we learned that Sofvie needed a centralized dashboard for information about the company and its clients. The dashboard would serve various teams across the organization, including sales & marketing, client success, billing & accounting and devops. Version 1.0 of the dashboard would be on desktop only, limited to static data points and visualizations, without the ability to add, edit, or manipulate data or personalize views for individual users.
Aligning Through Project Scope & Plan
Following the kick-off meeting, our team's next move was to produce a project plan to ensure that Sofvie’s stakeholders and our team have a shared understanding of the project's objectives, constraints, and resources, resulting in a more focused and efficient outcome.
Sidney did provide our team with a list of required data points which he created after speaking with the team leads. However, upon review and consultation with our mentors, we still lacked a deeper understanding of the data points’ importance to dashboard users, how they will be used for making business decisions, and how they should be presented for viewing and analysis. To bridge this gap, we added user interviews to our plan.
Overcoming Resistance - Educating Stakeholders on the Importance of User Interviews for Effective UX Design
Alison, the project manager from Sofvie, initially resisted our proposal to speak with dashboard users. She believed the requirements list provided by her team was sufficient. Despite my explaining the importance of speaking to end users before designing, Alison remained unconvinced.
Eventually, I identified her concerns: she feared that the interviews would be theoretical and time-consuming, and therefore not as useful.
To address this, I fleshed out our user interview plan with a moderated card sort as the main activity, showing a demo with sticky notes representing data points and rectangles representing dashboard screens on Figjam, a whiteboarding tool.
This approach would provide something concrete to discuss with interviewees and only require 30-40 minutes per interview.
By my showing rather than telling, Alison and her team were ultimately persuaded. This experience taught me the importance of coming prepared with concrete proof of concepts rather than just persuading on the merits of the idea.
Uncovering User Groupings and Aligning Vision with Key Stakeholder
The card sort exercise provided valuable insights into how the team leads, who are the end users of the dashboard, group and order data points relevant to them. There were differences in how the leads organized the data points, but there were more similarities. For example, 3 out of 4 team leads wanted to see data points on Customer Satisfaction and Feedback & Review together on one page.
During our final card sort interview, which was with Gus, the Chief Innovations Officer, we learned that he was the main sponsor for the dashboard, and he felt his original vision and scope had been exceeded by the inclusion of sensitive data, such as revenue data points. This insight saved us valuable time and effort, as we would have designed unnecessary metrics and visualizations that would later need to be removed.
Removed sensitive data
Designing Data Groupings and Valuable Dashboard Features
To reach the data grouping and ordering we needed for our mid-fidelity designs, we looked for common patterns and identified overlaps from the card sort results.
Homepage contains the team leads’ overlap of data points that are viewed most often, most important for decision making and viewed first to get a general picture before digging deeper.
Then we had 2 more pages of data points - at the time of mid-fidelity we did not know what to name them yet, but page 1 contained user journey, feature usage and user engagement data points.
Page 2 contained demographics, segmentation and satisfaction data points.
The card sort exercise also provided insights beyond just data points, it teased out the importance for features such as filters, date range and company selector, and chart-accompanying raw data tables. These findings helped us design a more useful and valuable dashboard for our end users.
From Mid- to High-Fidelity
I presented our mid-fidelity designs for the internal dashboard to Sidney's team. I provided rationale for the data groupings and orderings based on our card sorting exercise. I also explained our data visualization decisions where the requirements were not specific. For instance, when exploring Usage Cycles, the original requirements were, “How often users are accessing the platform and when they tend to use it the most.” We proposed various options, including metrics showing the average daily, weekly, or monthly product usage and bar graphs to visualize the most popular usage times.
Sidney's team gave us valuable feedback, such as consolidating some separate charts and changing the visualization from one type to another. This collaborative process allowed us to incorporate the client's feedback and refine the designs further.
Overcoming difficulties designing high-fidelity together
To ensure efficiency and consistency in our 4-person team designing the internal dashboard for Sofvie, we divided and assigned tasks and established Figma styles for color and typography, building on Sofvie's brand guide. We also created a grid system on Figma.
Additionally, we utilized chart and graph options from Python and Chart JS libraries to guide higher fidelity designs, as suggested by Sofvie’s DevOps team who will be coding the dashboard.
Despite these measures, designing together still presented challenges. After creating a single page - the homepage - as a team, we discovered the need to address consistency details, such as padding and spacing between headings, legends and charts. We also realized the benefits of using auto layout and components to save time and effort while maintaining consistency. Our experience highlighted the importance of defining detailed design rules and utilizing technology to the fullest to streamline the design process.
Our Company Selector made into a component
High-Fidelity Prototype Testing and iteration
One of the most significant takeaways from our high fidelity prototype user testing was that testers expressed concern about potentially having different interpretations of the data point headings, as well as not understanding the data source or how it was calculated.
Before
No support given to aid understanding of data point/chart headings
After
We recognized the need to address this and developed an info icon feature that provides users with quick and easy access to the definition of the data point, its source, and the calculation method. This ensures consistency and allows everyone to be on the same page, regardless of their level of familiarity with the data. By including this feature, we were also able to increase the overall trust in the accuracy of the data.
Final Prototype
Our Project’s Impact
All 4 team leads, who are the end users of the dashboard we designed, are confident that our dashboard would reduce data viewing and analysis time by at least 50% or more.
We successfully convinced our client on the importance of direct communication between designers and end users for effective UX design. This ensured that the dashboard fulfilled the needs of the end users, rather than just assuming what they wanted.
By having direct communication with end users, and making the CIO realize the scope creep, we also helped Sofvie’s team leads open up discussions to maintain alignment between teams internally.
What I learned and would do differently next time
Show don’t tell
It is more effective and persuasive to provide the client with tangible evidence of your proposed ideas, such as a quick proof of concept, instead of relying solely on theoretical reasoning or verbal explanations. This approach also ensures that everyone’s understanding of your ideas is the same.
Sofvie
Comparion
House2Home
Kept
Praesent id libero id metus varius consectetur ac eget diam. Nulla felis nunc, consequat laoreet lacus id.