![[FINAL]namecard DP black background cropped square agar.png](https://static.wixstatic.com/media/697031_45dd49cddce2429d864b7b3970df27e5~mv2.png/v1/crop/x_0,y_9,w_601,h_750/fill/w_111,h_134,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BFINAL%5Dnamecard%20DP%20black%20background%20cropped%20square%20agar.png)
![[FINAL]namecard DP.png](https://static.wixstatic.com/media/697031_66ae32c3089a4b3ba21b62015a1bdc87~mv2.png/v1/fill/w_111,h_141,al_c,q_85,usm_0.66_1.00_0.01,enc_avif,quality_auto/%5BFINAL%5Dnamecard%20DP.png)
Gym Pair App Redesign
Successfully revamped ‘Gym Pair’ existing concept interface into a comprehensive Android & IOS compatible UI / UX App which is in development phase for the Play Store / App Store release.
Role: Sole UX / UI Designer
Tools: Adobe Illustrator, Adobe XD, Pen & Paper
Timeframe: 3 weeks (20 Oct - 12 Nov 2021)
Clients envisioned a platform that allows people to meet new gym buddies through their app thus the general functions are similar to dating apps and social media platforms.
Brief
The creators of Gym Pair had their logo and app designed by a logo designer, however they were unsatisfied with how the app looked like, but they kept the design of the logo. They found me on carousell and engaged my services to help them redesign their app.
Clients requested for a more modern approach to the design. They remarked that it is not professionally done. Comments given were that the app design looks old and the colours were not consistent.
The challenge was to avoid copying existing apps out there to avoid copyright. They want it to look and feel unique while maintaining similar functions.
Action Plan
My action plan was to do competitive analysis for apps that are similar in function since there is a lack of gym buddy pairing apps.
Shortlisted apps includes Tinder, Hinge and OkCupid for the dating apps aspect.
Other platforms i have referenced includes Instagram, Whatsapp and Telegram.
Client suggested crypto.com app navigation bar as well.
Existing Layout (Not done by me)
Competitive Analysis Apps
UX Research
I analysed competitors’ key features and overall strategy to create SWOT analyses focusing on the UX / UI components.
Clients communication with me showed that they have an inclination towards tinder's overall design of swiping cards and super like functions and wanted to build similar functions into their app thus I have looked into those in detail as well.
I have also taken the initiative to look into other dating apps not mentioned by the client such as Hinge, OkCupid and Bumble to examine their UX / UI design elements.
Research Insights
Tinder has paved the way for dating apps to have the intuititive swipe left or right function thus it is very iconic for users to recognise. Hinge markets itself as an app designed to be deleted thus the functionalities of it comprehensive and straightforward. Hinge has a more minimalistic and informative UI design as compared to Tinder.
Proto-Persona
Based on user research done by the client, I have identified 3 proto-personas. We have someone who wants to be motivated by having a buddy with them, someone who wants to socialize and someone who is a beginner that just started her journey.
Information Architecture
To better lay out the relationship between each screen and actions, I have created an information architecture to visually represent the data.
Site Map
Creation of a site map was to aid the process of setting up the main navigation screens and visually organise the navigation pathways.
User Flow
I then concentrated on user flows in order to view the navigation process from a user's standpoint.
I designed user flows for 'Using the app for the first time' and 'Chat with someone'.
Paper Wireframe
Next part of the process was creating low-fidelity wireframes using pen and paper.
Digital Wireframe
These were created in Adobe XD as mid-fidelity wireframes. Throughout the different fidelity stages, continuous iterations were made to improve the app's functionality and UX.
UI Design Elements
Detailed UI design decisions are outlined below.
Bottom Navigation Bar
To build brand recognition, the navigation bar is specially designed take on the silhouette of the logo.
To highlight the main feature of the app, the icon is painted red and floats separately above the rest to differentiate it.
When clicked on, it turns black with a red neon light effect that further outlines the profile.
Introduction Screens
The backdrop for introduction pages is black with streaks of red representing movement. Logo is highlighted in the middle on the landing page and is present on these series of pages to build brand awareness in the initial contact. Icons are added as visual representations to the fields to create visual interest.
Profile Settings Screens
After hitting sign up, users will be led to the edit profile page to set up their new account. Users can upload a minimum of 3 images and a maximum of 6 images so that there is just the right amount of content for other users to view.
Streamlined directional arrow are used to denote 'next', 'back' and also for the dropdown menus.
The settings has 'on' & 'off' buttons following the design theme with the corresponding words on it so that it would be clear for users.
Gym Match Screens (Browsing Matches)
When browsing matches, users can swipe to reveal other cards to the left or to the right. The middle star icon is a 'Super Like' button, the right dumbbell icon is a 'Like' button and the cross icon is a 'Dislike' button.
Important details are displayed alongside icons just below the images while descriptive quotes (if any) falls below.
Gym Feed & Likes
Certain details were tweaked in order for 'Gym Feed' and the profile page to not look like a copy of Instagram. 'Gym Likes' is designed to look like cards too.
Gym Chats
'Gym Chat' is made of sections divided by simple lines. Chat bubble echoes the direction arrow.
Gym Explore & Upload Caption
Landing pages here are illustrations from UnDraw with mainly colors tweaked to match the brand identity. Once users click on the search bar, recently viewed accounts would appear on the list. The list changes to alphabetical order once users key inputs.
All photograghs used are from Unsplash.
