Joticle
Simplifying data visualization for a learning platform
Overview
Joticle is a social learning platform for experts, educators, hobbyists, creators, and students.

My role was to design and organize the key performance indicator dashboard so that investors, educators, and more wouldn’t have trouble understanding the data presented to them.
Project details
My role
Prototyping, Usability Testing, Visual Design

Team
Client - Scott
Designers - Michelle, Myself
Developers - Zhu, John, Raymond
Project Manager - Peter

Tools
Figma, Jira, Slack

Duration
Five weeks
Check out the official website here!
Disclaimer, the design is only for admins to view, and not open to the public.
How to better present data to clients?
The problem
Joticle's current administrative key performance indicator (KPI) dashboard lacks organization. When the team first met with Scott, the CEO of Joticle, his focus was centered around the admin dashboard. It displays data that showcase how well modules are doing and which were most frequented by students. He talked about having to manual input data for the modules which ends up being pages long.

When it's time to present the data to investors, he's left with 20 pages worth of information. It's difficult to visualize and understand the company’s data at-a-glance.
Now there's a problem, but how do we solve it? 
KPI dashboards
To approach designing an admin dashboard, I initially conducted a literature review. Understood that KPI dashboards are used to display data sources and provide an at-a-glance visual to show how business' are performing. I also ran a quick competitive analysis on other dashboard and found that colors and data visualization are often used to highlight key data points. After the initial research, the project goals became more clear, so it was broken down to two main points.
1. Need a way to show how companies are effectively meeting their goals for the week, the month, and the year
2. In order too effectively display data we need to understand our audience (Joticle team, investors, administrators, future users)
KPI dashboards
To incorporate the team throughout the design process, we (the designers) conducted affinity mapping with everyone’s ideas. Taking insights from literature reviews, and chatting with the CEO, brainstormed how might we statements that addressed concerns and issues of the current administrator dashboard. Things like "how might create a dashboard that's intuitive and easy to read," or "how might we simplify the overall experience for investors and Joticle team members."

After writing down our ideas, we grouped similar HMW questions that helped us find three main categories to focus on. Making it visually appealing, simplifying elements to lessen cognitive load and data management.
"How might we make it easier for users to find and understand the company's KPIs"
How to better present data to clients?
Client's vision
Scott had a rough idea of the dashboard. The data would be grouped into containers for different learning pods (such as how well the bookmarking glossary terms tab is doing).
Scott's vision
Developing the vision
Using Scott's vision as a starting point and running a short competitive analysis on other dashboard, Michelle, and I split up to develop different portions of our low-fidelity wireframes.

At this stage focused on the KPI data boxes and how the numbers are presented as they’re the biggest thing investors and admin will see upon landing on this page. Aside from the boxes, my task was centralized around different ways to select and display the date range for the data being displayed.
Michelle's low-fi wireframes
My low-fi wireframs
Furthering said the vision
To gather feedback and further develop the wireframes, we turned to to our team and other designers within the organization (codelab). Individuals highlighted elements such as the kpi boxes and  navigation that they felt best suited the goal and look of the dashboard. Using the best elements from both our designs, we combined them into one unified look when developing mid-fidelity wireframes.

Some questions that did come up were whether we should have data visualization or keep it strict with numbers. We went forward designing a version with and without data visualization and waited to collect feedback from Scott.
Feedback
Dark UI
Dark UI is preferred since it gives the KPI boxes more breathing room, and allows the data to be the focal point.
Lack of separation
There was a lack of separation between the navigation bar and the dashboard, so an indicator is needed to clarify what page users were on.
KPI title
The KPI title should be outside of the box as it would appear more like a header.
No data visualization
The developers said that data visualization wouldn’t be realistically feasible within our project timeframe
Moving forward

After getting feedback on the screens and clarifying project constraints, we decided to focus on adding more visual cues without data visualization. Utilizing colors as an indicator for KPI growth or stagnant growth.

  • Green and blue were tested to showcase growth. Blue was a suggestion by Scott, from a previous meetings
  • Explored red and grey to showcase a decrease in growth
  • Also tested different ways to display indicators such as coloring the containers with gradients

Furthermore, the navigation bar would be redesigned as it presented users with a lot of options. Many of the pages led to nothing, so minimizing the elements on the navigation bar into categories, wouldn't overwhelm users. This allowed for more breathing room on the navigation bar. While designing some key points we thought about were

  • A way to highlight the page the user is on
  • Add a profile section to make it more personalized, as various people like investors and Joticle employees use this
More feedback

The gradient on each KPI box is too distracting, prefer solid colors
Blue was confused with static growth, green is more intuitive to show growth
Red is best to show a decrease in growth and gray would be used for static, no growth at all
The dark navy background is the easiest to look at and allows all elements to stand out
After implementing changes...
Prototyping
After implementing those changes, we started prototyping the interactions to showcare the drop-down menus and the navigation sidebar.
1. For our drown down menu the user’s main goal is to select the time range for which they want to view data for
2. Through many iterations, we found that this had the most intuitive visuals and wording
3. For the navigation sidebar, the user’s main goals are to find the pages they need using the categories
Usability testing
I conducted two rounds of usability testing on the mid-fidelity prototypes and had our users run through a set of tasks.

We observed how users interacted with our prototype as they completed certain tasks. Tasks including navigating through the different categories and viewing different sets of data such as the data for the last 30 days.

All our users was able to run through the test with no problems and the tasks were self-explanatory. Our users had this to say...
Enjoyed the dark UI
Found the navigation icons to be intuitive, easier to navigate
Liked the drop-shadow on the cards

Feedback and findings from Scott before moving to hi-fidelity

  • Felt like the navigation sidebar was too long when all the sections were fully expanded, which would cause a tedious amount of scrolling
  • To combat this, we decided to minimize the profile section in our next and final prototype
  • I also redesigned the logo that better aligns more with the current design system, as it was something Scott had requested

The end is here!
Default view
This is the default view of the KPI dashboard. Users can toggle any of the drop-down menus in the navigation sidebar on the left to see all available pages. The sidebar can expand and collapse and give you access to one of these pages. For the prototype, the page is blank because these pages weren’t in the scope of our project
Default view
This is the default view of the KPI dashboard. Users can toggle any of the drop-down menus in the navigation sidebar on the left to see all available pages. The sidebar can expand and collapse and give you access to one of these pages. For the prototype, the page is blank because these pages weren’t in the scope of our project
Default view
The biggest challenge this project presented was time constraints. The project was originally scheduled for 6 weeks, however, ended up with only 5 weeks. Hand-off needed to happen a week ahead of the original deadline. It was sudden and left the team to quickly adjust the project's vision. It taught me a lot of time management skills, especially because multiple factors were at play such as the client and deadlines. Being flexible and quick to adapt (whether it be time constraints, issues with the project, or anything else) was a key skill. Projects are unpredictable, and there's nothing that we can do about it except to adapt!

If I could revisit the project, I'd explore data visualization as that was something that constantly came up during the research phase. How would that be implemented and also user test this implementation on Joticle team members + investors. Overall, I'm proud of what the team was able to accomplish within its timeline!
Hey! Thanks for reading till the end ◡̈
I appreciate you stopping by here!

I’m always open to a virtual coffee chat ☕ and talk about design!