Introduction
WeAreWomen is a mobile application designed to be a diary for women, where they can share how they feel on the current day, get reassurance, motivation, and connect with other women who share similar experiences. The application is intended to be easy to understand with a simple layout, while featuring soft aesthetics and light colors to capture the feminine values that We Are Women holds. This case study aims to explain the process of creating a design system and UI design for WeAreWomen.
You can try out the interactive XD prototype here:
Discovery Phase
The discovery phase began with researching the target audience, which was women of all ages, backgrounds, and ethnicities. The research was conducted through user interviews, surveys, and online research to understand the pain points and needs of the audience. The key findings from the research were:
Women wanted a safe and non-judgmental space to express their feelings and connect with others.
Women wanted an easy-to-use interface that they could use on-the-go.
Women wanted a visually appealing design with soft aesthetics and light colors.
With these key findings in mind, I started brainstorming ideas for the design system and UI design.
Design System
The first step was to create a design system that would guide the UI design. The design system would define the color palette, typography, iconography, and layout guidelines. The design system would help maintain consistency throughout the application, and make it easy to create new features in the future.
Color Palette
The color palette was selected to be soft and feminine, with pastel colors such as pink, lilac, and light blue. The colors were chosen to create a soothing and calming effect on the users. The colors would be used consistently throughout the application, to create a cohesive look and feel.
Typography
The typography was selected to be clean and simple, with a sans-serif font. The font was chosen for its readability on mobile devices and its modern look. The font would be used consistently throughout the application, to create a cohesive look and feel.
Iconography
The iconography was selected to be simple and minimalistic, with round edges and soft curves. The icons were designed to be easily recognizable and intuitive. The icons would be used consistently throughout the application, to create a cohesive look and feel.
Layout Guidelines
The layout guidelines were selected to be simple and intuitive, with clear navigation and easy-to-find buttons. The layout was designed to be mobile-friendly, with larger buttons and clear text. The layout would be used consistently throughout the application, to create a cohesive look and feel.
UI Design
With the design system in place, the team began designing the UI for the application. The UI design aimed to be simple, intuitive, and visually appealing.
Onboarding
The onboarding process was designed to be simple and welcoming, with clear instructions and a warm color palette. The onboarding process would guide the user through the application, explaining how to use the features and connect with other users.
Home Screen
The home screen was designed to be simple and intuitive, with clear navigation and easy-to-find buttons. The home screen would feature the user's diary entries, and a feed of other users' entries. The home screen would be the main hub of the application, and the user would spend most of their time here.
Diary Entry
The diary entry screen was designed to be simple and easy to use, with a clean layout and soft color palette. The user would be able to write their feelings and emotions, and tag them with keywords for easy search later. The diary entry screen would be the core feature of the application, and the user would spend most of their time here.
Profile
The profile screen was designed to be simple and intuitive, with clear navigation and easy-to-find buttons. The profile screen woul display the user's information, including their name, profile picture, and bio. The user would also be able to view their diary entries and connect with other users through this screen.
Search
The search screen was designed to be simple and intuitive, with clear navigation and easy-to-find buttons. The search screen would allow the user to search for other users' diary entries based on keywords or tags. The search screen would help the user connect with other users who share similar experiences.
Settings
The settings screen was designed to be simple and intuitive, with clear navigation and easy-to-find buttons. The settings screen would allow the user to customize their profile, including their profile picture, bio, and privacy settings. The settings screen would also allow the user to manage their account, including changing their password or deleting their account.
Conclusion
In conclusion, WeAreWomen is a mobile application designed to be a diary for women, where they can share how they feel on the current day, get reassurance, motivation, and connect with other women who share similar experiences. The design system and UI design were created with the target audience in mind, to ensure that the application was easy to use, visually appealing, and emotionally supportive. The soft color palette, clean typography, minimalistic iconography, and intuitive layout guidelines all contribute to the cohesive look and feel of the application. The end result is a user-friendly and visually appealing application that creates a safe and supportive space for women to connect and express themselves.