FitPal
About The Project
The project takes place in a real-life work environment where the professor acted as a client. Creating a brand style guide to establish the visual identity and interactive components for the new company. The company has only one designer, so a style guide and library of components could help them save time and have cohesive design. The company’s overarching goal is to develop an online and mobile app based educational service, offering video courses and interactive learning experiences across a diverse range of exercises.
Key Data
Role: UX designer, Visual designer
Timeline: 8 weeks
Tool: Figma, Photoshop, Adobe Acrobat
The Process
Process 1: Understanding the client’s needs and wants
Process 2: Creating Style guide
Process 3: Approving from clients
Process 4: Designing the component library
Process 5: Final design
Understanding Client's Brand Identity
Discovery Questions
In order to establish the company identity from the scratch, I asked the client about cultural, demographic, background and tone of the voice was essential and crucial.
Presentation
After information gathering process to define the company's brand identity, I presented the client with a variety of design concepts. We discussed these concepts in detail, considering the client's expressed preferences during the presentation. From this meeting, we arrived at a mutual decision to pursue the wing and sunrise concept for further development.
Ideation
Following the client's approval of the "wing + sunrise" concept, I delved into design research to explore a range of possibilities for its meaningful incorporation into the client's service.
Brand Personality / Tone
Client meetings emphasized a focus on user motivation and support, shaping an optimistic brand personality for the app. To reflect this cheerful and encouraging tone, we ensured all messaging within the app is hopeful and promotes a sense of belonging for users.
Style Guide Challenges
To establish the client's service's visual identity, I developed a comprehensive brand style guide encompassing core principles, brand identity elements, color palette, typography, design tokens, image guidelines, and tone of voice.
Challenge 1 : Rules
Developing the style guideline from scratch required careful consideration of which rules to include and which to exclude. I faced the difficulty to find the right balance because overly detailed rules could limit flexibility during development, while insufficient detail might lead to deviations from the original design.
Solution
To ensure clarity in my design choices, I took the initiative to create mockups myself. This hands-on approach allowed me to visualize the impact of rules and determine what was essential and what could be removed .
Challenge 2 : Concept
I encountered challenges in finding effective ways to incorporate the "wing + sunrise" concept into the style guide. While I initially considered placing the wing shape into the design and using the multiple colors to evoke a sense of freshness morning, I felt compelled to push myself further to add more uniqueness and establish a distinct brand identity.
Solution
The hero section features a background feather element . This design decision reinforces the overall theme without introducing a visually dominant wing icon. The background integrates seamlessly, creating a unified aesthetic.
Component Library Challenge
To establish a cohesive design system for the FitPal website and app platforms, I developed a comprehensive component library. This library serves as a central repository of reusable UI components, encompassing both visual styles and interactive states.
Challenge and Solution
Following on the brand style guide ensured consistency within the component library. However, during this process, I identified areas where the guide's rules could be improved for broader application. For example, the color palette needed additional shades to accommodate various button states. To address this, I carefully considered making some changes to the style guide, prioritizing the creation of universally applicable design principles.
The process
In creating a responsive design for FitPal's website and app platforms, I prioritized maintaining a cohesive user experience across all screen sizes, while also optimizing component performance. To achieve this, creating initial mockups that explored the functionality and layout of the interfaces.
Mockups
Final Design &
Success Metric
One of the success metrics was to ensure a seamless design experience, I asked another designer to create a course list screen based on style guide and component library. Her design closely aligned with my vision, reflecting the effectiveness of the established style guide and component library. This experience exemplifies the success of these design resources in promoting design consistency.
Lesson Learned
The Reasons
Developing a comprehensive brand guideline requires careful consideration of numerous rules, as these rules will be applied across all design materials. Throughout this process, I meticulously evaluated each rule, asking "why" to determine its necessity and effectiveness. While introducing new rules can expand design possibilities, it's crucial to ensure they maintain overall consistency.
Importance of Mockups
Mockups are essential for even the smallest design elements. A visually appealing element in isolation might not integrate seamlessly into the overall composition. Through mockups, I've identified situations where minor adjustments to size, color, or placement were necessary for optimal visual cohesion. This proactive approach saves time compared to fixing integration issues later in the development process.