UI Design Sprint: Adding a feature
A high percentage of women nowadays use an app to track their menstrual cycle. On these apps it is possible to add symptoms every day, view previous cycles and check the day of ovulation. For this week’s UI design sprint I was asked to include a new feature to Clue which shows nearby and/or recommended gynecologists.
Problem Definition
As the app’s design is kept rather minimalistic, I thought of a way to incorporate the feature without interrupting the design style. Furthermore, I thought about adding a checklist of symptoms to help women evaluate whether they are pregnant or not. As this week was focused on UI rather than UX, the research and market competition was kept on the surface-level. A quick competitor analysis showed that various menstrual cycle tracking apps are on the market, however, NONE of them offer a search option for gynecologists.
Persona
Based on my research, I defined the persona as a woman between 25 and 31 y/o which is worried about being pregnant after an unusual length of her menstrual cycle. She wishes to consult with a gynecologist on the matter as quickly as possible.
Atomic Design
To master this design sprint we were introduced to the tool of atomic design at the bootcamp of Ironhack Berlin. Rather than designing every single icon or symbol on itself, atomic design understands interface design as a collection of parts, which are ordered in a hierarchical manner:
- the smallest elements are called atoms
- combining various atoms together creates a molecule
- combining various molecules together creates an organism
- Various organisms interlinked create a template
- … and finally, multiple templates combined are called a page
My solution — part 1: The new bottom tab bar
Whereas the visual representation of the current menstrual cycle appears as the focus of the home screen, the bottom tab bar focuses on the “add a symptom” feature — which also appears bigger in size than the other elements.
To answer the needs of my persona and smoothen the user experience while searching for a gynecologist, I changed the bottom tab bar to the following:
I stuck to the symbols of the menstrual cycle, the calendar, and the analysis sheet, and created new symbols for a checklist and the gynecologist listing. Also, I moved the menstrual cycle to the middle of the tab bar, to strengthen its central role within the app “Clue”.
My solution — part 2: the User flow
As mentioned above, my persona is mainly concerned about consulting with a gynecologist to get answers to her pressing worries about pregnancy. In order to quickly address her needs, I created the following user flow. The pop-up (step 2( only appears once the usual menstrual cycle length is exceeded.
- Open the app “clue” to get to the home screen
- Read the pop-up and…
- …choose the “consult with a gynecologist” option
- See the list of gynecologist nearby and insert zip code
- Read through the listing and decide to schedule an appointment
- Choose a date and get information on the option “video appointment”
- Choose the video appointment and time slot, confirm the action
- Read the new pop-up which confirms your booking
- Return to the home screen
The Wireframes
Due to time constraints, I tried to get as close as possible to a high fi prototype as possible, however, there are crucial aspects of UI that are not finally developed.
Future steps are the improvement of the UI design and the development of the “checklist” user flow. Also I’d like to add the option to send the data from the app directly to a gynecologist, in order to make the appointment more efficient (instead of us trying to explain and to remember the symptoms ;)). Besides that, several rounds of testing and iteration will improve the showed wireframes. Why help women with their menstrual cycle only halfway, if we can create an app that assist them through the whole experience?
