FITME
FITME’s mission is to connect athletes to other athletes and thereby fostering community activities, networking, and friendship all over the globe.
CHALLENGE
Working in the social activity industry was a challenge for me initially.
After learning about industry leaders and their strengths and weaknesses, I was tasked with creating the app from the ground up. This includes a working prototype that will be used to test the app on a college campus.
TIME
CLIENT
DELIVERABLES
6 months
FITME
Low, Mid and High Fidelity Screens
Prototype
THE PROCESS
The process started with working one on one with the client, who had the thought for this app for close to 2 years. He already finished the paper wireframes which we refined together before I digitized them into low fidelity wireframes.
WIREFRAMES
First, I started with some low to mid-level wireframes,
incorporating the insights gathered from the market research.
Here are just a few screens.
REGISTRATION PROCESS
For the registration phase of the app, a employed a minimalistic look with tiles and square buttons that the user can interact with to sign up and pick out some sports that they are interested in.
HOME & EXPLORE SCREENS
The home and explore screens were centered around the user's ability to connect with other users and engage in activities with them on a geographical basis. It stressed on-location services and prioritizes the user’s profile where it showed almost every single aspect of the user's description including what their interest was, how skilled they are at sports, and even what their nutritional goals were. All the descriptions were added by the user.
USER TESTING
Since we had close to 100 wireframes to test out, we organized
a group of seven or eight people to test them out. While it was hard to find and keep up with people's schedules, it was worth it in the end because they gave us invaluable information on how to change the wireframes to better fit the app as a whole.
Keely Driscoll,
User
“The registration screens could be shortened by combining the sign up screen and the email/passwords screens.”
“The images and tiles are way too close together for me to fully understand where to click.”
Matt Burrows,
User
Users were able to voice their concerns and communicate with
us to places that they found later confusing during our use her phone. We took their feedback and consideration to work on the next round of mid-Fidelity wireframes.
HIGH-FIDELITY SCREENS ROUND 1
Now that the first round of user testing was done, we were able to
salvage all the great parts of the wireframes and then also fix the
parts that needed to be improved on. It was quite a challenge for
me to continually improve on the design decisions that were
made for the wireframes.
I had to stay in constant communication with the CEO of the company over the design decisions that are being made. I had to essentially learn to find my voice and stick up for my decisions and explain why these decisions are better than other decisions being made and that was the hardest part for me during this phase of the creation of this app.
Gradually finding my voice as a designer and standing up and defending my decisions enabled me to create the high-fidelity wireframes that you see below.
USER TESTING
CONSISTENCY IS KEY!
The next phase of the process was to communicate with the client
and do five rounds of iterations based on feedback. This process took
close to two months. We focused on making the interface as user-friendly as possible, making sure everything is aligned and that a grid was used, and I personally focused on making sure that the typography and the button structure were consistent throughout the app.
AFFINITY DIAGRAMMING
As I started implementing the changes based on the user feedback, I came upon a troubling situation.
PROBLEM: there were way too many changes to be made and I wasn't able to categorize the changes in a way that told a story of how the screens went from A to B.
SOLUTION: I created an affinity diagram that categorizes the changes based on user flow feedback, imagery, typography, and additional changes based on what the user said.
The Affinity diagram let me categorize the feedback so I can more easily implement them and show the growth of each iteration over time.
Changes made based on User Feedback and communication with the CEO:
Since users found that some of the text was hard to read, we made sure to include a very legible font called Helvetica Neue.
We also observed that the users felt a deeper connection to the app when imagery was used. Particularly, the images of a casual nature and most likely taken by the users themselves.
We discovered that some of the screens could be combined together so that users don't have to click so many times before the registration was over.
KEY SCREEN PROGRESSIONS
As we went through each iteration, I was careful to implement the changes based on feedback. I also took some liberties and changed the design direction to better fit the app in certain instances:
In the home page layout, I removed the borders in the modals and instead chose to use a drop shadow to create the illusion of depth and border.
The iconography was handpicked to make sure that they were all visually consistent (same width, height, spacing, and color.)
EVENTS PAGE
Iteration 1
Iteration 2
We wanted these event cards to look like the ones in
the profile section, thereby adding to the overall
consistency of the site. That’s why i changed the
square design to a more consistent rectangular
design.
Iteration 3
After some testing, we realized that the fresh stories section wasn’t adding to the events page. The relevant items on this page were more about what events were happening at the time (this week, next week, etc) rather than what individuals were doing. That’s why we removed it and added it to the home page instead. The meet-up now buttons on the top were also removed to later be added to the home page.
Iteration 4
The add button was added for users to look at events and to add their own events. Adding the the stories on
the events section was messier and didn’t quite fit.
That’s why the trending events modals are shown as events that are happening
in these categories right now. This way the user can navigate events
based on what sport they are interested in right now. We took the “fresh
stories” section and categorized them to prioritize events happening
near the user rather than to prioritize stories being posted.
The wave was added as a safety measure but also
as a way to break the ice, helping people engage with
each other. We acknowledged that there are introverted and extroverted people out there and we want to give everyone tools to connect with others that make them feel comfortable. Whether it's just waving hello or having a full conversation.
HOME PAGE
Iteration 1
Iteration 2
For the home page, we added color and imagery
to personalize the page for the user. We wanted to
showcase pictures of other people who are using
casual and professional imagery of themselves so that
new users can see other people and evoke relatability,
an inclusive environment, and safety. We wanted to show
that this platform caters to all genders
We got rid of the search bar because in the long term,
once the feed section is introduced, you will be able to search
for other users, events, etc. The search capability is better utilized
in the feed section. Just like Facebook, LinkedIn, and Instagram, users
will be able to search through their feed for different things.
Iteration 3
The user profile icon and the fresh stories section
were geared towards more individualized user interaction.
This promotes just more engagement from users. We
designed this to battle unethical designs that are common and
problematic in the tech industry now. In the near future, we
plan to ensure that users’ geolocation and private data is not
shared even when the user is not using the app.
The wave was added as a safety measure but also
as a way to break the ice, helping people engage with
each other. We acknowledged that there are introverted and extroverted people out there and we want to give everyone tools to connect with others that make them feel comfortable. Whether it's just waving hello or having a full conversation.
USER PAGE
Iteration 1
Iteration 2
We also made sure that to let the user know that they don’t
have to fill out everything. They can share however much information they feel comfortable and safe sharing. Some information is mandatory (name, age, username) used to verify the user and show other users that they are legitimate (thereby increasing overall app safety).
Each section not only shows what a user's stats are, but
it also demonstrates their personality. You can know more about a person’s history, likes & dislikes, sports experience.
Iteration 3
PROTOTYPE
NEXT STEPS
Based on user testing feedback, I feel that some of the screens (especially in the registration process) can be combined so users can input their information in the least amount of clicks possible.
Speaking with the development team, I also saw that some of the modals in the home page can be simplified so that there weren't so many interactive elements. As a team, we still have to user test to prioritize which elements should be kept or taken out.
LESSONS LEARNED
I learned how important maintaining a schedule for deadlines is. I was able to come up with a plan for submitting assignemtns for each week we had deliverables. I was only able to do this after learning more about my work habits, figuring out how to balance the rest of my life with my work and by having open communication with the CEO on when the work will be finished.
I learned The process of how developers take my designs and called them into a fully functioning application. That's all my designs being created in JavaScript and CSS and I saw which screens were tougher to create and which screens were easier to create. By speaking with the developers, I was able to combine certain screens together to increase the overall functionality of the app.
MORE CASE STUDIES
#UI #UX #WebDesign #Prototype #Designsystem
#UI #UX #MobileDesign #Prototype #Designsystem
#UI #UX #Prototype
