Duration: 6 weeks
Role: UI/UX designer
Platform: Mobile Application
Tools: Sketch, InVision, After Effect and Illustrator
Deliverables: Branding and Logo design, High-fidelity Mock-ups for the Mobile App, Responsive Web Design for Marketing Site, InVision Prototype, Style Guide and UI Kit.
Background
The Challenge
Visual Competitive Analysis
Design Principle
Moodboards & Style Tiles
Branding
Wireframe Evaluation
Microinteractions
High-fidelity Mock-ups
Prototyping
Responsive Marketing Page Design
Style Guides
The fitness industry is experiencing disruption due to advancement in technology. Today's consumers are embracing wearable technologies and other activity-tracking products more than ever before. However, despite the availability of personal metric, people continue to struggle to maintain a healthy lifestyle.
Habfit was a mock fitness mobile application that focused on encouraging users to build intrinsic motivation and confidence through goal tracking and rich music playlists.
In 6 weeks, my challenge was to build the mock app and marketing website which would better help user adopt and maintain a healthy lifestyle. As a UI/UX designer, I was responsible for delivering divergent style directions, pixel-perfect mockups, prototypes and style guides.
“Users need a way to maintain a habit of activity, but have difficulty staying engaged and encouraged to do so because of a lack of excitement in their workouts.”
By studying the UX research, personas, and mid-fidelity wireframes, I acknowledged the initial challenge was to tackle the struggles of fitness maintenance for our primary audience a Nervous Novice-Nate Sato.
I studied several competitors and noticed that the major digital applications focused on using minimal colors to maintain a color harmony, symbolizing energy and dynamic shapes to represent movement, applying generous white space, choosing friendly flat iconography and sans-serif typefaces to enhance the visual aesthetic.
Like in these fitness app designs, I wanted to create an elegant and stylized interface that motivated the user to continually use of the Habfit to maintain a healthy lifestyle:
-Introduce rich white space and hierarchy to organize the information in digestible way.
-Use friendly iconography and visualized data to deliver information in a intuitive way.
-Choose monochromatic colors to minimize distraction and maintain a sleek interface.
The UX researches and visual competitive analysis inspired my design principles. These design principles guided me to start style explorations and kept me on track to create a consistent comprehensive aesthetic for Habfit.
Users could feel exciting, being encouraged to start the workout and know that they have made significant progress when entering the app.
The design should be intuitive enough to help users concentrate on their goals, track their progress and make them feel involved and unobstructed when using the app.
The design should give users pleasure, satisfy their sense, and deliver brand value through clean, modern and consistent design.
After gathering inspiration from competitors and having principles in hand, I experimented with different colors and layouts to create three divergent moodboards and style tiles.
01-Playful, Dynamic and Energetic
I chose high saturation colors as part of encouragement to help users get excited when opening the app. I also introduced curve patterns to soften the strong contrast created by colors.
02-Efficient, minimal and sleek
In the opposite, I minimize the usage of the second moodboard where only white, black and grey colors were used. I sought a sense of ease and minimalist to invoke a sophistication feel and utilized straight line patterns to emphasize the efficient and professional look of the interface.
03-Pastel, Clean and friendly
In the third visual direction, I used soft and candid colors to connect modern users and build trust between the users and the app. I also applied generous white space to create an elegant and pastel look. This direction was a clear favorite. The cleanliness and usage of gradient created a pleasant passion and attracted my audience. In the later design, I stuck to this style and adjusted the color combination a little bit to enable it to look less feminine and more powerful.
At the meanwhile, with the persona Nate and the design principles in mind, I started logo exploration by following the steps below.
I put down “engaged, encouraged, inspiring, and energetic” since Nate needed motivation and encouragement to maintain the lifestyle of fitness. A bunch of words like “customized, friendly, and excitement” came out of my mind when considering the music feature of Habfit which inspired users during workouts by playing their personal-sourced music. Also, Habfit was a professional, efficient and customized fitness app, where users just needed to set specific exercise goals and the app would automatically choose the workout for them and track their goals. I wanted the logo to reflect this feature too.
I did a brainstorm and visualized the adjectives with objects like the magnet, muscle, dumbbell, windmill, sunrise, gearwheel, target, clock, wing, upstairs, medal, etc.
Every good logo design starts with a sketch. Sketching on paper gave me the complete freedom to explore the imagination and came out with some creative ideas.
With the help of my creative director, I selected four logos with potential and digitized them in low fidelity. I also explored concepts that represented energy, motivation, power and dynamic.
After rounds of iterations, I decided the second one to be my final logo for Habfit brand. It incorporated the first letter “H” of Habfit and a hexagon shape. It looked elegant, stable, and evoked a dynamic windmill.
Before jumping into high-fidelity designs, I evaluated the wireframes to determine areas of improvement. I simplified the signup process by removing unnecessary buttons and forms to improve user flow, retitled some navigations to deliver clearer messages, restructured the dashboard and music page to make the key information stand out and intuitive.
Improved wireframes
Interaction design is a crucial part of the product design which focuses on behavior. It creates meaningful relationships between users and the app and enhances the efficiency of the app use. Based on the wireframe, I explored several opportunities for incorporating microinteractions and sketches them out on my sketchbook and then built out by using After Effect.
Microinteraction sketches
Welcome page
Loading page
Add favorite animation
I created high-fidelity screens and started testing and iteration progressively based on feedbacks. I carefully applied the gradient to UI elements, selected quality images to give the app an encouraging personality, and designed the iconography to evoke a sense of accomplishment to my user.
High-Fidelity Mockups
To further develop the Habfit brand and promote the application, I created responsive marketing pages for both mobile device and desktop. I kept the same visual language as the mockups design, choosing the same color palette and gradient effect and using floating pictures combined with overlays. The typography was also in the consistent with mockups to enhance the brand.
Marketing site (Mobile)
Marketing site (Desktop)
The last deliverable of this project was a Style Guide. I included the core visual elements in the style guide to help ensure that the future designs would be applying the same design system and create a cohesive visual identity for Habfit.
This was my second project in Designation and from which I understood my creative process as a UI/UX designer. Since this was a mock project, the biggest challenge during the process was that I didn’t get the chance to test the design with real users, the iteration process was pushed forward through the weekly design critique sections where my creative director and peers shared a lot of valuable insights and constructive suggestions for my design. Listening to the other voices and tireless sketches and iterations was the first lesson I learned as a UI/UX designer.
Also, all the experiences I went through with this project have cemented my interest in the UI/UX designer role and my decision to transit my career from landscape architecture to the digital design world. Because here I could see my design transformed from sketches to an interactive digital product in only 6 weeks and it felt so rewarding.
