Joticle

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 showcase the drop-down menus and the navigation sidebar. The prototypes were created to prepare for user testing.

Usability testing

Conducting two rounds of usability testing, I observed how users interacted with the 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.

The goal for the drop down menu was to view a week and month's worth of data. I tried various iterations for wording such as "a month" or "a year" but found that displaying numbers such as "7 days" versus spelling out "a week" was more intuitive. Testers were able to quickly gather the information when numbers were displayed.

Aside from that, the testers were able to run through the test with no problems and 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

[data-wf-bgvideo-fallback-img] { display: none; } @media (prefers-reduced-motion: reduce) { [data-wf-bgvideo-fallback-img] { position: absolute; z-index: -100; display: inline-block; height: 100%; width: 100%; object-fit: cover; } }

Dashboard

Returning back to the Dashboard, to change the date range we’re seeing data for, simply select from the drop-down menu in the upper right-hand corner. You’ll see that the title updates itself with the exact dates to reflect this change.

Takeaways

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!