Joticle Copy

First, good old research ;)

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 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)

Synthesis

To incorporate the team throughout the design process, Michelle, the other designer and I 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 to simplify the overall experience for investors and Joticle team members.

After writing down all 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. Helped to ensure which key points had to be addressed while designing the dashboard.

“How might we make it easier for users to find and understand the company’s KPIs”

There was already a vision

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

Furthering the vision

Using Scott's vision as a starting point and running a short competitive analysis on other dashboard, each designer developed sketches. At this stage focused on the KPI data boxes, 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.

Taking it even further *

Collecting feedback from our team, those points were to further flesh out the 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 collect feedback.

Dark UI

Light UI

Feedback

Dark UI
1. 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
2. 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
3. The KPI title should be outside of the box as it would appear more like a header.

No data visualization
4. 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 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 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

After showcasing and discussing the features to the team, this is some of the feedback that they designs recieved

1. The gradient on each KPI box is too distracting, prefer solid colors

2. Blue was confused with static growth, green is more intuitive 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

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

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...

Enjoyed the dark UI

Found the navigation icons to be intuitive

Liked the drop-shadow on the cards

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 developers took over.

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

‍