Re-design an existing app challenge
— And the challenge of this week, is… Re-design an existing app of our choice. the first impulse I had was to look at the existing apps on my phone, went through the various apps that I use the most, or the ones that I keep for the longest time, and there it was Flo app, that I really like and that immediately felt the need to re-designed it. That’s how I choose;
Flo, What is Flo?
For those who don’t know about FLO, it’s an app that monitors well-being and menstrual cycles and their phases: fertile period; PMS; symptoms and much more…
Starting with the challenge, it was necessary to take screenshots of the existing app, and of a certain flow, in order to begin a detailed examination of the interface. In this case, was chose the home page, and how to edit the menstrual cycle and symptoms, as well as notifications and secret chat. It seemed pertinent to me to follow this flow, because it is the main objective of the app.
Why?
I felt room for improvement, by looking and using it. I want to point out that I really like the future, Secret Chats, which allowed users to discuss intimate topics and seek support from the Flo community, however it feels like maybe if it would have some inclusive changes it would enhance the secret support chats future.
“This feature became so detached within Flo that some users downloaded the app only for Secret Chats, while others never used the community feature at all. This was not ideal, as we wanted to reinforce the synergy between different parts of the app to serve our users’ needs better”
text source here.
Flo, It’s an important app for anyone who lives in a frenzy life, without time, to have a life as healthy as they would like. It’s for users that tend to loose track of the symptoms, by registering them, the user can have an understanding of a lot of the moods and reactions, so they can be aware of and be able to prevent eventual situations in their day-to- day life.
Flo — Current design
At glance i already identify for my redesign approach the color, maybe it as very radical change, but i went in a deep research before questioning it and i figure out that;
Pink, blue, black, white, green, white, red, lilac, brown and a multitude of other colors. Colors are universal and have no gender. No color can define a person or sexuality. Color choices do not define who you are. However, we cannot fail to deny the social conventions that are already well established in society. Nowadays edges have become softer, we’re freer and gender fluid and we tend to use pink as much as we use other colors. Pink doesn’t represent only women anymore, it’s only a color. So the first change proposal of re-design, will be it’s color, i went deep on research to find the meaning of colors and ask to 10 people, without any context, what is their favorite color? from this 10, curiously 6 people answered with the color Blue, also went to investigate about it and realize that:
“ Blue is linked to self-expression, intuition, and spiritual consciousness. Purple stones bring calm, meditative states and sleep.”
So starting with my re-design color i have built this mood board for inspiration, following the choice of color palette, as well as the typography.
Defining the previous important elements as well as the components, i started sketching up my re-design approach.
Start sketching the re-design ideas
I noticed that it was confusing and difficult to understand what part of the cycle the user is at the moment, on the app’s landing page. So i started by redesign the initial calendar on the landing page itself in circle so that users can have visual relate and better understand how a monthly cycle works and what phases is in, without having to open the calendar, following the guidelines of the heuristics — 2) Match between system and the real world.
The message in the center of the circle: “ less chance to get pregnant today” it seems to me quite susceptible to anxiety for those who are trying to get pregnant, for this reason I removed it and added a list below with articles targeted and chosen according to the symptoms registered, but with still an option to search for whatever wants to know about, applying the — 3) User control and freedom.
To register the symptoms it was very difficult to understand which button to press, it’s lost between the article cards, so have placed it on the nav bar a side do the menstruation ic. So now its possible to have, a icon for editing menstruation and the symptoms on the nav bar.
New Feature — The moon calendar
While doing research on this redesign challenge, i came across the possibility of creating, a new future for this app that seemed quite relevant to me and after several conversations with potential users, the idea started to become a possibility even though it is still something little studied, but there are many studies about menstrual cycles intermittently syncing with moon cycle. In very short, after my research a menstrual app with a moon calendar future would be a very complete app for those who want to follow the more traditional methods and understand the reason for the symptoms in a more holistic way, in addition I dare to say that through the data collected, it can help in the progress of science.
…In research and sketching, simultaneously, Mid-Fi — Flo redesign:
Hypothesis Statements
We are not the user — we don’t base our design in our assumptions — make them visible self-aware, writing them down helps.
We believe — by putting the information more clear and inclusive — will achieve more users to help them through their cycle and have a healthyer life.
We believe — by having a moon calendar along with the menstrual cycle, with register symptoms — will achieve more users to help them better through their cycle and have a better quality of life.
— Try it here
Home Page
Change the calendar for one that can be visual at first and understand the cycles.
Responsive icons, in the Nav bar, for editing menstruation times and symptoms, and for the lunar calendar, the moon fase it self on the cycle calendar.
The secret chat on the nav bar and at the top right the notifications preferences.
History Cycle
In here the user can view and edit it’s menstruation time, so the circle on the home page goes around and give you the previsions for the next month or year of your cycle, also with the visual of the moon calendar.
Symptoms Cycle
Same as the History Cycle, but with Symptoms, in here you can choose the day, and you have a option to choose the symptoms divided by categories also with a search option to choose the symptoms right away. By adding the symptoms the app collects sufficient data to understand if the are acceptably normal or if you need to pay attention to some abnormal situation with your cycle, by that is given a county through the section on the first page with articles chosen especially for the user as well as the chat will start an automatic conversation on the topic.
Moon Cycle
This new future, gives you the knowledge of the moon calendar and its phases, so it is possible for the user to follow its cycle by the moon phases, receive advices from the moon in correspondence with the cycle.
Notifications
In this Section, I have simplify it more, so the user knows how to access easily and clear, turn on and off, because sometimes this is a very sensitive information, and no one wants to have the notifications popping in all the time about the cycle, but also its very important to be warned by the pill. Some use the phone alarm ran randomly, and in this way it would be much easier to set the alarm just for the pill.
Secret Chat
I have copied the original chat, because it feels secure that is small and asks ig you want to continue the conversation and also informs you previously about the matter. Just redesigned the color to follow the flow of the redesign proposal
Testing
Usability as design framework — did you test the product? This is the most important part of the process. Why do ou have to check usability testing and how is it used . Usability? It has to be intuitive and usable. What about pleasure? The product don’t have to be only double, they have also to be fun to use, of course we can apply this in ui on how they nice they look.
Usability in general in refer to our heuristics.
We are not perfect and we can forget some important content. We have our limitations but still as much as we test the better, is a vey good indicator.
My final test was based in,
Explain in 3 minutes what’s the app about
Ask to go edit menstruation time, after go back and add symptoms, for the end was asked to go to the settings and put on to receive a reminder to take the pill.
10 15 minutes were needed and 4 of 5 to dive truth the app with out explanation. And after some tests a lot of our coming improvements arise. Of course more tests where need, and i really liked and enjoyed this process and had fun learning by doing this challenge. It wasn’t easy, and still have a lot to learn.
Hope you enjoyed reading, and if you please have any advice I’m all ears.
