Project
My Role
SWEATers is a mobile app targeting people that are interested in doing any kind of sports as a hobby or profession, where they can find sports partners, share their own, or join other users' sports activities. In addition, they can enjoy special offers from healthy yet super yummy eat & drink stops, sports shops, studios, and gyms! It gathers all sport-related needs in one platform to transform users' sports experience.
Starting from redefining the business goals & the strategy of the app to visual identity, UX & UI processes I was involved in each phase of the product, working closely with stakeholders and the outsource development team.
Brief
Challanges
The goal of the project was to redesign the UX & UI of the app before the release.
When I got the brief, there was already an interface with a very complex, counterintuitive UX full of flaws, dead ends & repetitive content, supported by a non-aesthetic design that looked like still-in-progress. Besides, there was no clear definition of user segmentation and personas, as well as a defined product value. The main challenge is to set the ground for and upcoming UX work by defining personas, user journeys for each persona, and make the app help users to accomplish their goals in the most easy and intuitive way.
User Research
Market Analysis
I started digging into the business goal & the strategy of the app. I conducted wide research and prepared a very detailed report of benchmarking, market analysis, sporting habits, sports practices, demographics, and etc. Below, is an image from the sports practice section of the report.
Personas
I created 5 different personas that would be the target of the app, eliminated the irrelevant features, and convinced the stakeholders to start with a simpler app that target users would download and use.
User Interviews
We set interviews with 20 people from each persona group, 100 in total, to validate personas, getting insights about their sports habits, motivations, and barriers for sports, technology tendencies, and preferences, etc. We checked if they would be interested in using the features we kept in the app.
UX Design
Sitemap
To know what I was dealing with, I started creating a sitemap of the existing tool, when I discovered so many dead ends, irrelevant or repetitive content existed all around the app. Below, a very little part of the existing sitemap can be seen.
Usability Heuristics
As the app consisted of different major features to be redesigned, I decided to prioritize them according to complexity, possible frequency of usage, and importance. I prepared Usability Heuristics Report in detail, to highlight the most problematic features to start with and suggested solutions to all detected problems.
Use Cases & User Flows
The feature list was set & prioritized to be designed as separate modules. For each module, possible use cases & user flows were created.
Card Sorting Sessions
After defining functionalities covering each use case created, we conducted open card sorting sessions for a group of 45 in total. The analysis of all the sessions was completed to base the new sitemap to be created.
Sitemap & Tree Testing
The sitemap of the app was recreated and tested by online Tree Testing with 40 users, revised according to the test result, and finalized for wireframing.
Wireframes
Combining all the outputs of previous phases, detailed wireframes for each module were designed and revised after review meetings.
Visual Identity Design
Before starting the UI redesign, I suggested revising the visual identity to reflect the dynamic, energetic and fun side of SWEATers. Within this context, the tone of voice, color codes, illustrations, typography, and icon library were reconsidered & redesigned.
UI Design
Before screen & interaction designs, I chose 3 different UI styles as dimensional, dark & light UI and tested them with users & stakeholders. The style selected by the majority defined the visual style of our screens. I designed each screen, every interaction, icon, and illustration for each module, sign-in / sign-up processes splash screen, and tutorials.
