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
UI/UX, Usability Testing, Prototyping, User Research

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

Tools
Figma, MongoDB, Jira, Slack

Duration
Five weeks, October to December 2021
Check out the website here!
Background
What is joticle missing?
Joticle's current administrative Key Performance Indicator (KPI) dashboard is cluttered and lacks organization. The CEO of Joticle, Scott, has to manually input data and it ends up being pages long. When presenting the dashboard to admin or investors, it is difficult to visualize and understand the company’s data at-a-glance.
“How might we make it easier for users to find and understand the company’s KPIs”
Research
To get a better idea of what we are designing for, we did a literature review as well as competitive analysis on KPI dashboards. Some of our findings were…
The problem
1. KPI dashboards are used to display data sources and provide at-a-glance visual to show how their business is performing
2. Need a way to show how they are effectively meeting their goals for the week, month, year
3. To effectively display data we need to understand our audience (Joticle team, investors, administrators, future users)
Synthesis
To incorporate our developers throughout our design process we conducted affinity mapping with everyone’s ideas. Since it was clear what we were designing for, we went ahead and brainstormed how might we statements to create possible solutions.After writing down all our ideas we categorized them into sections such as design system, visual hierarchy, cognitive load, and data. We did so to refine our ideas and combined repeating ideas into one how might we statement to lead our design process.
The Design Process
Scott's vision
Low-fi wireframes
From the sketches, Michelle, and I split up to develop different portions of our low-fidelity wireframes. My task was centralized around different ways to select and display the date range for the data being displayed.

We showed them to our team and other designers within the organization (codelab). The feedback was used for our next set of wireframes and since a majority of what was said is positive, we were able to confidently proceed with our 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 consult with Scott, the CEO.
Mid-fi wireframes
After presenting our mid-fidelity wireframes to Scott, we received some more feedback…
1. Dark UI is also preferred since it allows the data to stand out more. It gives the KPI boxes more breathing room and allows the data to be the focal point.
2. A lack of separation between the navigation bar and the dashboard so an indicator is needed to clarify what page users are currently on.
3. The KPI title should be outside of the box as it would appear more like a header.
4. We were also allowed to change the logo and the navigation bar to match the new design system
Mid-fi wireframes continued
In terms of data visualization, Scott was unsure whether that should be an essential part of the default view, so the next steps moving forward are...
1. Exploring the possibility of incorporating data visualization into the default view
2. Having physical graphs that display the data would make it easier for users to identify growth trends for certain categories
3.However, due to time and technological constraints, and discussion with Scott, we decided to put the feature aside for the time being
Mid-fi wireframes continued

The color system, we went through various iterations implementing things such as

  • Different background colors-  Indicator colors such as green vs. blue for growth (blue was a suggestion brought up in our previous meetings)
  • Also explored different colors the team suggested such as red vs. grey to show a decrease in growth
  • Wondered if we should display indicators by coloring the containers with gradients, would icons be more intuitive

As for the navigation bar the designers

  • Added a profile section to make it more personalized
  • Solid-fill vs. gradient bar to highlight the page the user is on
Hi-fi wireframes
After talking to our team and discussing the features, we found that...
1. The gradient on each KPI box is too distracting
2. Green is a more intuitive color to show growth
3. Red is best to show a decrease in growth and gray would be used for static, no growth at all
4. The dark navy background is the easiest to look at and allows all elements to stand out
Hi-fi wireframes
We had some ideas as well such as minimizing the elements on the navigation bar into categories, that way it wouldn't overwhelm the users with their options and allow for more breathing room on the navigation bar

With this in mind, we showed it to Scott and he mentioned how toggles for the navigation bar would be nice as it can tackle the problem of having too many sections on the navigation
Prototyping + Usability testing
Low-fi prototype
After implementing those changes we started prototyping the interactions into our designs, mainly showcasing 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
We conducted 4 rounds of usability testing on our 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...
1. Our design systems such as the Dark UI
2. Found the navigation bar icons to be intuitive
3. Enjoyed the 3D effects from our drop-shadows
Final feedback
Something users noted was that "Clicking on podcontrol should take me back to the home page."

We quickly implemented that feature and communicated with Scott about our user testing findings and last minute changes before the software engineers took over.

Presented our findings and low-fi prototype to Scott for any final feedback and he had to say...

  • 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
Final prototype
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 our prototype, the page is blank because these pages weren’t in the scope of our project.
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.
My takeaways
This project was overall a big learning experience since it simulated a real-life workspace. Keeping in mind developers, a project mentor, a client, and stakeholders in each step of our design process. It created a new perspective and workflow that allowed me to learn about communication in a cross-functional setting.Time constraints were a big challenge in this as we originally had 6 weeks for the sprint, however, due to external conflicts that came up, we only had 5 weeks. The shortened timeline caused the hand-off to happen a week ahead of the original deadline which left the team to quickly adjust the project's vision. It taught me a lot about time management since there were many factors at play such as scheduling meetings in advance, and meeting deadlines, all while balancing academic responsibilities.
More work
TuneIn →
Thank you for reading till the end! But it doesn’t have to end here, let’s connect!
↑
Joticle
Simplifying data visualization for a learning platform
Client Project
UX Design
Joticle
Simplifying data visualization for a learning platform