Overview

Background
Sporty Ventures is the app that helps people connect, track fitness goals, and build communities around fitness. The company focuses on building a community with tracking fitness activity to help users achieve their goals.

Problem Statement
Users needed a location to access all the information regarding fitness score, recent posts, badges & achievements, and weekly challenges on their profile page.

Responsibilities
There were two teams for this project who focused on working with the low fidelity designs and the high fidelity designs. My responsibility was to create the high fidelity and low fidelity mobile screens for the profile page, friend’s profile page, and FAQ page. The goal for these designs were to match the design guidelines of the brand and to make it intuitive for the user.

Deliverables

The Process
The design team gathered user research prior to me joining the team, which helped me follow a systemic approach for developing the design. The team built empathy maps, user flows, and user journeys to help us understand their users and understand user experiences. We were given a list of different ideas to add within each of our assigned screens.

Sketches
Here is where I sketched the FAQ page and the profile page. The design of the FAQ page is very simple but I wanted to match the design of the company’s brand. The profile needed to have the correct content laid out in the correct order. The team wanted my "recent events" idea to be showcased on the top of the page and have the rest items listed underneath it.

Managerial Critique
Our team discussed the importance of matching the friend’s profile with the user’s profile. We found that the friend and user’s profile needed to have a more practical design for:

  • Viewing challenges
  • Achievements & badges
  • Groups

I found it a little hectic trying to view/preview the groups and challenges section on the profile page. My idea was to add a horizontal scroll for the content that the user needed to see right away. The manager loved the idea and asked me to push it to high fidelity.

User Flow
We created this user flow to understand what the user needs to view. Each square suggests a branched off section for the mobile screen. We had to stack each feature correctly in order to prioritize what users need to view first on the page. This is where creating user flow came in handy. The portion that was highlighted in red is the area that I created.

WireFrames

Here are my Wireframe designs. These Wireframes were built from of my hand drawn sketches and were created to help visualize where the content should be located on the page. The Wireframe design gathered the company's global components over time and was eventually designed off the company’s design architecture.

Here are the recent posts section of the profile page. The user would be able to view the most recent posts their friends made. These could be new goals, new events or new challenges they won against other users.

This Wireframe is the friend's profile page. The friend's profile page was designed to be a similar design to the main profile page. The message button allows communication with the friend and a button to remove them from being a friend.

This Wireframe is the Frequently Ask Questions page that uses a simple layout of questions organized in a vertical order. Once the bubble is selected the user will see the question drop-down with an answer.

High Fidelity

We created a simple clean friend's profile page that held all the important components needed. I added a section to view the fitness score, name, location and their recent activity at the top.

I then included a tab to toggle between recent events and upcoming events. On the bottom there was a sections for viewing groups, challenges, Badges & Awards, and weekly challenges.

Here is the main profile page where my recent events idea was added. The user selects their recent event and the highlighted route shows on the map.

This FAQ page is simple and intuitive for the user to understand and use. They only need to select a question by tapping the bubble and their answer will appear for them.

Learnings/Analysis
First round of design critiques were discussed matching the friend profile with the user’s profile. The friend and user’s profile needed to have a more efficient design for viewing challenges, achievements & badges and groups to fulfill the usability needs of the profile.
‍
I found it a little hectic trying to view/preview the groups and challenges section on the profile page. My idea was to add a horizontal scroll for the content that the user needed to see right away. The manager loved the idea and asked me to push it to high fidelity.

Future Roadmap
Expand on the profile screen

Future Research
Have users test different stages of the design to determine the proper design architecture of each screen.

Contact Information

Phone
(949) 892 - 0224
E-mail
Tylermj333@gmail.com
Location
Irvine, California, USA
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.