Colourfit enhances the dressing experience for visually impaired individuals through outfit colour recommendations.
Colourfit • July 2023 - Aug. 2023
Colourfit • July 2023 - Aug. 2023
Colourfit is a mobile app designed to assist the vision-impaired individuals and those struggling with color differentiation in their outfit choices. Using a skin tone and hair color scan, it suggests clothing colors that complement the user.
MY ROLE
Design Lead
RESPONSIBILITIES
Content Strategy
User Interface Design
Prototyping
User Research
TEAM
4 Developers
3 Designers
TOOLS
Figma
Photoshop
Illustrator
My Role
My Role
My Role
As the Design Lead for Colourfit, I delegated tasks, hosted design meetings, and facilitated the seamless handoff of design assets and specifications to our development team, including Se Hyeon Oh, Marina Faria, Anson Su, and HT Tai, to ensure a cohesive and efficient workflow throughout the project lifecycle.
I was responsible for creating mockup designs and the UI kit, overseeing wireframe and user flow creation, and guiding the overall visual direction with Ellie Kim and Xinhui Wang. My goal was to design an intuitive and cohesive user experience, making color and outfit experimentation accessible and enjoyable for users.
As the Design Lead for Colourfit, I delegated tasks, hosted design meetings, and facilitated the seamless handoff of design assets and specifications to our development team, including Se Hyeon Oh, Marina Faria, Anson Su, and HT Tai, to ensure a cohesive and efficient workflow throughout the project lifecycle.
I was responsible for creating mockup designs and the UI kit, overseeing wireframe and user flow creation, and guiding the overall visual direction with Ellie Kim and Xinhui Wang. My goal was to design an intuitive and cohesive user experience, making color and outfit experimentation accessible and enjoyable for users.
Competitive Analysis
Competitive Analysis
Understanding User Needs
Our approach involved a deep dive into the experiences of vision-impaired users and those facing color-related challenges. We conducted interviews, surveys, and user testing to comprehend their struggles, frustrations, and aspirations. This guided the development of a user-centric solution.
Our approach involved a deep dive into the experiences of vision-impaired users and those facing color-related challenges. We conducted interviews, surveys, and user testing to comprehend their struggles, frustrations, and aspirations. This guided the development of a user-centric solution.
Understanding User Needs
Competitive Edge
Colourfit's uniqueness lies in its ability to scan outfits, provide tailored color suggestions based on skin tones, and enable easy outfit organization through personalized closets. This sets it apart from other applications, emphasizing both inclusivity and user convenience.
Colourfit's uniqueness lies in its ability to scan outfits, provide tailored color suggestions based on skin tones, and enable easy outfit organization through personalized closets. This sets it apart from other applications, emphasizing both inclusivity and user convenience.
Competitive Edge
Target Audience
Our target audience spans diverse age groups and genders, focusing on those with color-related challenges and vision impairments. The design process revolved around ensuring accessibility, simplicity, and enjoyable user experiences for this diverse demographic.
Our target audience spans diverse age groups and genders, focusing on those with color-related challenges and vision impairments. The design process revolved around ensuring accessibility, simplicity, and enjoyable user experiences for this diverse demographic.
Target Audience
Competitive Analysis
Persona
Persona
Persona
This is the goals and frustrutaions of the first persona, to check out the rest of the persona's and see their first point of contact and moodboards please click here.
This is the goals and frustrutaions of the first persona, to check out the rest of the persona's and see their first point of contact and moodboards please click here.
User Flow
User Flow
User Flow
The app's user flow guides users through a simple process: scanning skin tone and hair colour and receiving personalized color combinations four outfits. It's designed to be straightforward and enjoyable, aiming to help users easily experiment with different colours.
The app's user flow guides users through a simple process: scanning skin tone and hair colour and receiving personalized color combinations four outfits. It's designed to be straightforward and enjoyable, aiming to help users easily experiment with different colours.
UI Kit
UI Kit
Logo
The black and white “o” represents the experience of individuals with visually impairement, it symbolizes their perspective and serves as a visual representation. By incorporating a colorful “o” alongside the black and white one, I acknowledged that Colourfit is an inclusive brand that caters to both visually impaired individuals and those who can perceive colors. The contrasting colours helps create a visual distinction between elements, making the logo more accessible to everyone. This contrast also interprets as a metaphor for the transformative power of Colorfit.
The black and white “o” represents the experience of individuals with visually impairement, it symbolizes their perspective and serves as a visual representation. By incorporating a colorful “o” alongside the black and white one, I acknowledged that Colourfit is an inclusive brand that caters to both visually impaired individuals and those who can perceive colors. The contrasting colours helps create a visual distinction between elements, making the logo more accessible to everyone. This contrast also interprets as a metaphor for the transformative power of Colorfit.
Logo
UI Kit
Typography
Indivisible and SF Pro Display are two contemporary sans-serif fonts that harmonize seamlessly. Indivisible have sharp edges and a clean, modern aesthetic. SF Pro Display’s rounded edges and polished appearance lead to a professional and sophisticated look, enhancing accessibility and readability for everyone.
Indivisible and SF Pro Display are two contemporary sans-serif fonts that harmonize seamlessly. Indivisible have sharp edges and a clean, modern aesthetic. SF Pro Display’s rounded edges and polished appearance lead to a professional and sophisticated look, enhancing accessibility and readability for everyone.
Typography
Colour Palette
The app utilizes a color palette consisting of five vibrant colors as accent and a black-and-white scheme for primary colours. This choice of colors aims to ensure high contrast and improved visibility, catering to all users, including those with color blindness or visual impairments, enabling them to efficiently perceive information and navigate through the interface. Primary colours black and white helps maintain a strong contrast, allowing users to easily distinguish different elements and buttons, thus enhancing overall accessibility and user experience.
The app utilizes a color palette consisting of five vibrant colors as accent and a black-and-white scheme for primary colours. This choice of colors aims to ensure high contrast and improved visibility, catering to all users, including those with color blindness or visual impairments, enabling them to efficiently perceive information and navigate through the interface. Primary colours black and white helps maintain a strong contrast, allowing users to easily distinguish different elements and buttons, thus enhancing overall accessibility and user experience.
Colour Palette
Illustrations
I have created all illustrations using illustrator and Photoshop.The illustrations, ranging from clothing placeholders to memojis, were designed to enhance engagement and clarity within the app. These visual aids serve as both informative placeholders and personalized user avatars, augmenting the overall experience.
I have created all illustrations using illustrator and Photoshop.The illustrations, ranging from clothing placeholders to memojis, were designed to enhance engagement and clarity within the app. These visual aids serve as both informative placeholders and personalized user avatars, augmenting the overall experience.
Illustrations
UI Elements
In the interface displaying colors, skin tone, texture, and clothing types alongside the color swatches, I ensured that color names were consistently present. For better interaction, I used two ways to show users how they could interact with the app. For instance, in the navigation bar, I enlarged and highlighted icons with a colorful stroke to enhance accessibility. Check out all of the UI Kit through here.
In the interface displaying colors, skin tone, texture, and clothing types alongside the color swatches, I ensured that color names were consistently present. For better interaction, I used two ways to show users how they could interact with the app. For instance, in the navigation bar, I enlarged and highlighted icons with a colorful stroke to enhance accessibility. Check out all of the UI Kit through here.
UI Elements
Wireframes
Wireframes
Throughout the designs, wireframes were structured to offer guidance without overwhelming users by sectioning the contents and creating hierarchy. Check out all of our wireframes here.
Throughout the designs, wireframes were structured to offer guidance without overwhelming users by sectioning the contents and creating hierarchy. Check out all of our wireframes here.
Wireframes
Mockups
Mockups
In the mockups my first priority was accessibility by implementing color names and clear interactions to support users' understanding and engagement at every step. For the rest of the pages, check mockups through here.
In the mockups my first priority was accessibility by implementing color names and clear interactions to support users' understanding and engagement at every step. For the rest of the pages, check mockups through here.
Mockups
Key Learnings
Key Learnings
Adherence to Best Practices and incorporating Accessibility: Understood the value of adhering to industry best practices, emphasizing user-centered design, accessibility standards, and iterative testing to ensure a seamless and inclusive user experience.
Collaboration Dynamics: Trusting collaboration was key throughout the project.Embracing a collaborative approach with both developers and designers involved consistent communication, continual feedback, and iterative adjustments to ensure a cohesive and user-friendly outcome.
Design-to-Development Transition: The design to development transition taught me the importance of clear communication, detailed design specifications and maintaining design documentation for a seamless handover.
Adherence to Best Practices and incorporating Accessibility: Understood the value of adhering to industry best practices, emphasizing user-centered design, accessibility standards, and iterative testing to ensure a seamless and inclusive user experience.
Collaboration Dynamics: Trusting collaboration was key throughout the project.Embracing a collaborative approach with both developers and designers involved consistent communication, continual feedback, and iterative adjustments to ensure a cohesive and user-friendly outcome.
Design-to-Development Transition: The design to development transition taught me the importance of clear communication, detailed design specifications and maintaining design documentation for a seamless handover.
Key Learnings
© 2024 Luna Sever
© 2024 Luna Sever
© 2024 Luna Sever