Creating a company dashboard for a fitness brand

An admin panel for performing multiple business functions in one place.

Role: UX Design Lead

Image alt tag
Creating a company dashboard for a fitness brand

Project Overview

My Role: UX Design Lead

Project Duration: 1 year

Tools & Methodologies

  • User Research

  • Product Research

  • User Persona

  • User Journey Map

  • Information Architecture

  • Wireframes

  • Prototype

  • Mockup

Creating a company dashboard for a fitness brand
Creating a company dashboard for a fitness brand

My research started with user interviews

User Interviews

During the ideation phase of the project, I conducted user interviews to build new personas and to inform the design. I created a survey with 4 open-ended questions, focusing on the needs and desires of solo entrepreneurs. In 4 days, I recruited and interviewed 3 users remotely. I referenced the user interview findings throughout the entire design process.

Creating a company dashboard for a fitness brand

Product Research

After my user interviews, my research shifted to focus on existing products in the market for internal tools. I looked at these products based on the insight I gained from the user interviews. I looked at what tools the user has already tried, and why those tools didn't work for them. What I learned was:

  • Many of the out-of-box tools do not customize well enough.

  • Some tools only focus on one aspect of business operations, leaving the need for multiple tools spread out across platforms.

  • Some tools have functionality that is unnecessary and distracting.

Creating a company dashboard for a fitness brand
Creating a company dashboard for a fitness brand

Persona

I wanted to form a deeper understanding of our users' goals, needs, experiences, and behaviors. So, I created a persona based on the user survey. I used the persona to inform my design decisions and reflected back on it throughout the entire process.

Creating a company dashboard for a fitness brand
Creating a company dashboard for a fitness brand

Problem Statement

Stephanie is an overwhelmed entrepreneur who needs a streamlined business system that can help her effectively run her company because she’s having trouble staying on top of the multiple jobs required of her

Creating a company dashboard for a fitness brand

User Journey Map

I mapped out the entire journey of an entrepreneur to gain an understanding of specific pain points and how to create solutions for each of them. Each action stage had a different pain point and therefore required different solutions. My goal was to create something that brought all of these solutions together in one, easy-to-use dashboard.

Creating a company dashboard for a fitness brand

Sitemap

Once I hypothesized what solutions would work for Stephanie, I created a sitemap to organize the information for the web app in a seamless way:

  • I wanted something that separates each business process, so it's easy to focus on one thing at a time. So I mapped out a page for each individual department function

  • I also wanted a way to bring all of the data together, to see everything at once so it's easy to get a bird's eye view. So I created a reports page that will show the health of each department

  • I later sketched a rough idea of what the dashboard would look like based on this sitemap

Creating a company dashboard for a fitness brand

By mapping each process & making each tool accessible and easy to use

Creating a company dashboard for a fitness brand

Wireframes

Using Figma, I translated my ideas into low-fidelity wireframes and designed the mockup for the desktop. Then, I improved them by adding a few relevant stock images and copies. At this stage, the wireframes were defined enough for some user testing. Based on 2 tests, I’ve made a few alternations and moved on to creating high-fidelity prototypes.

Creating a company dashboard for a fitness brand
Creating a company dashboard for a fitness brand

Mockup

Once the usability issues were resolved, I moved on to design the final screens in Figma. My goal was to create a visual identity that has a fresh, modern, corporate design. Also, I took a deep dive into my catalog of references for inspiration. The final design reflects my goal to create an easy-to-use, all-in-one product based on what I learned about my users needs

This is the high fidelity prototype. You can enlarge the screen and test it for yourself

Creating a company dashboard for a fitness brand

What I learned

With this project, I gained new insight and perspective, learned some new skills, and was able to improve on my existing skills. Here are three key ways this project helped me develop better as a designer:

1. Designing for a different end user creates different needs

For this project, I looked at things from a different perspective because I was designing for a different kind of end user. Instead of a front-facing consumer, my design was for the business owner and operator. The needs and desires differ in many ways. Consumers tend to use designs that entertain them, whereas B2B users require functionality over enjoyment. Consumers are more deterred by friction in their user experience, whereas B2B users aren't as stymied by some friction in their user experience, as long as the function solves their problems. The new insights I gathered helped me grow more curious about learning to understand different types of users.

2. Designing a different kind of platform

I learned how to design for a different platform by working on my first web app design. The most obvious way a web app is different than mobile is size, but a few other differences I focused in on were menu building, interaction design, and prototyping. The menus I built for this project were more robust, and included more options for how the user can interact with the design. My work on this project helped me improve my interaction design and prototyping skills.

3. Designing to visualize data

A skill I improved on during this project was visual communication by designing dashboards to showcase data and reports. I learned its important to allow the data to tell a story that is complete with relevant information while also being easily understood. I believe this project helped me grow in my empathy as a designer, by endeavoring to understand what jobs are most important to the user, and how I could be provide them with a design that helps her get those jobs done.

Next Steps

Here are ideas for the next steps of this project:

  • More usability testing to improve the design

  • Scaling the project up to include more users with the inclusion of user permissions

  • Creating a mobile version

Drop me a message
Let's share ideas & discuss ways to collaborate!