What is the Objective?
The primary objective for this project was to redesign an application, while still maintaining the overall brand. As well as reformatting the overall layout, features, and elements of the application.
Who is the Target Audience?
The target audience includes women and individuals with menstrual cycles, ranging from adolescents to menopausal stages, as well as those with specific health conditions like PCOS or endometriosis. Other users include busy professionals, people trying to conceive, and health-conscious individuals looking to monitor their reproductive health.
What are the Key Tasks?
- Analyzing the current application to note down any problems and potential solutions
- Creating low fidelity wireframes to plan out the screens and layout
- Maintain brand logo, colour palettes, icons, imagery, and tone of brand
- Establish a grid system to create high fidelity screens
Logo Design
Starting with the logo drafts, I experimented with different concepts while still trying to maintain the aspect of time and flow.
The design of the original logo features a flower on an icon that is made to look like a stylized diary with pink as the primary colour. The colours in the logo aren't used in the app itself, so it feels like a bit of disconnect there as well. I wanted to simplify and modernize the overall icon to match the redesigned branding.
UI Kit Breakdown
Keeping the target audience in mind, I've carefully selected a colour palette that feels soft and inviting, perfectly aligning with the femininity of the app. I've opted for primary colours like purple and pink, with secondary accents in blue and yellow, not just for their aesthetic appeal, but also for the emotions and moods they can evoke, which resonate with the experience of periods.
The choice of thin strokes and rounded icons was aimed to maintain a seamless user experience without overshadowing the app's content. My goal was to create a sense of ease and fluidity throughout.
The logo, depicting a pad formed by tear-shaped elements, symbolizes the natural flow of a period. As for the font, I've gone for a clean, modern look that's easy on the eyes and ensures readability across all platforms. Similarly, I've kept the icon selection minimal to maintain consistency and cohesion throughout the app. To tie everything together, I chose Quicksand as the main font; its simple, clean, and modern aesthetic perfectly complements the overall look and feel I aimed to achieve.
What is the Problem?
01. Too much information on one page
Since the app contains so many features and functions, it can be overwhelming and hard to navigate around. This can be especially difficult for users to find what they’re looking for and can easily get lost in all the features and information.
02. Trying to cram too many features
As well, the amount of colours, cartoon pets, and themes are distracting and make the home screen too busy. It makes it harder for the user to focus on specific items because their attention is being drawn to so many other elements.
03. Inconsistency in imagery
The imagery includes a mix of vectors and real life images, which causes inconsistency and creates confusion when associating items together.
What is the Solution?
01. Simplifying and focusing on one key element
To prevent users from endlessly scrolling to find what they need, I decided to condense the content sections on each page. By simplifying the layout and highlighting one key element on the homepage, I aimed to prevent unnecessary distractions elsewhere, ensuring users know where to focus their attention.
02. Different approach in keeping the app friendly and welcoming
Additionally, incorporating a welcoming greeting at the top of the app immediately upon opening creates a friendlier atmosphere for users, similar to what the pets on the original screen attempted to achieve.
03. Choosing one style of imagery to be kept throughout the interface
Vector style illustrations were used as the primary imagery and kept throughout the application to maintain consistency.
What is the Problem?
01. Hard to understand the meaning behind certain aspects
Just from a glance, it's hard to understand what certain elements mean without the need to click around for clarification, resulting in poor user experience as users are left to decipher meanings on their own.
What is the Solution?
01. Rearranging the information
By placing the symptoms within the day-to-day breakdown or notes section provides users with additional insights into their current cycle.
02. Adding in essential elements
Introducing a legend beneath the calendar offers users a convenient method for interpreting the meanings associated with various colours, enhancing user comprehension and navigation within the interface.
What is the Problem?
01. Endless scroll
The endless scrolling through the page makes it harder for users to find what they're looking for and potentially can be overwhelming.
02. Not enough context information provided for the button
With only the "edit period" button available, users lack context regarding what they would be editing. Additionally, if users wish to reference their period information, they are required to navigate back to the home or calendar pages, leading to further inconvenience.
What is the Solution?
01. Condense sections
By just putting general input topics and condensing sections, it reduces the users' need to scroll endlessly to find what they're looking for.
02. Adding in necessary context
Including details about the user's period start and expected end date below the 'edit period' button can provide clear context for users, helping them understand precisely what they're editing and the outcomes of their actions.
As well, the inclusion of the prompt "What would you like to input?" serves a dual purpose. It not only informs users about the page's purpose but also acts as a guiding tool to help users through the input process.
What is the Problem?
01. Missing established hierarchy
In the self care page, the hierarchy is missing and there’s no way to find specific topics that the user might be looking for. The diary function is placed all the way at the bottom of the page and can easily be missed if the user doesn’t scroll all the way down to the bottom.
02. Excessive button clutter
There are too many buttons at the top and doesn't necessarily help users who might not know what they're looking for.
What is the Solution?
01. Rearranging items based on hierarchy
I decided to rearrange the items to create a more well established hierarchy. Instead of letting the users potentially discover the diary function on their own, I placed it at the top to encourage users to use it as well as draw more attention to this feature.
02. Putting a search bar
In order to enhance user navigation and convenience, I placed a search bar near the top of the page for easy access, helping users in finding specific self care topics.
03. Adding in a section for users to resume their progress
To simplify the process and create a seamless way to help users go back into topics, I introduced a progress bar indicating the topics they're currently in the process of learning. This tool not only aids in navigation but also serves as a gentle reminder and encouragement for users to prioritize self-care.
04. Catering towards the user
Specifically for people who don't know what they're looking for or seeking guidance, the recommended section offers suggestions based on the user's logged-in data, taking into account their potential needs.
What is the Problem?
01. Too many buttons and information
Much like the other screens, the information gets lost within all the elements making it hard for users to know what to focus on.
02. Not many options to filter information
This gives users a form of restriction, especially if they are looking for a specific view of their data.
What is the Solution?
01. Putting the most important information bigger and more visible
At the top, I rearranged the information for users' period, ovulation, and cycle insights for better visibility and to give a more quick way to show insights and data.
02. User options for cycle trends
For the analysis of cycle trends, I've included an option allowing users to switch between viewing data from the past 3 months, 6 months, or the entire previous year. Upon selection, users can access a more detailed breakdown of their data. Overall, it also gives a cleaner look for the entire screen.
What are the Main Issues?
01. Inconsistency of imagery and visuals
Inconsistency in imagery and visual elements within an app can disrupt the user experience as well as create a negative impression of the overall app itself.
02. Cluttered sections with too much information
Cluttered sections within an app overwhelm users with an excessive amount of information and can potentially make users not want to use the app.
03. Hard to navigate
The intuitive design is lacking a bit and a challenging navigation system makes users' ability to move seamlessly through an app harder.
What are the Key Takeaways?
01. Process of simplifying
Having an app with so many features and functionalities can make it difficult to display without taking away necessary information. I learned the importance of finding a balance between comprehensive features and intuitive design. It involves identifying redundancies, minimizing unnecessary elements, and presenting information in a clear and concise manner for the user.
02. Importance of establishing hierarchy
Establishing a clear hierarchy ensures that users can easily navigate through the app and find the most relevant information easily. By prioritizing information and elements based on their importance to users, we can cater to users' needs more effectively. This involves understanding and analyzing user preferences, behaviours, and objectives. A well-defined hierarchy guides users through the app, directing their attention to critical features and content. All in all, integrating simplicity and establishing hierarchy into app design enhances user experience and drives engagement.