UI Process — Wellness tools Part II

Romy Böhme
2 min readNov 24, 2018

--

In my previous story I explained the UX process for a stress management tool. Now I am going to share the results of the UI part of this project. I improved the mid-fidelity wireframes from the feedback I received back from testing.

Additional to the question of the “how does the user feels right now”, I added one more question about the triggers for mood changes in the mood tracker. The answers will be showed in a diary like format. The user will have a big picture clearly outlining, in a simple and accessible way the triggers for mood changes, trends emerging and identify solutions. Furthermore, the option is given for making coach appointments online. The user can decide an appropriate time and can talk to the coach per video call/audio call and saves time not going to face to face meetings in person.

When I started to think about my visual identity, I defined the brand attributes:

  • balanced
  • helpful
  • patience
  • reliable
  • understanding
  • sustainable

In order to determine a design direction, I created the style tile which included colours, typography and icons to communicate what my final visual identity will be. I tried exploring various colour combinations, which are light and not very exciting — to add a sense of calmness to the brand.

Style tile

I built a design system and the atomic design and developed my high-fidelity wireframes in `sketch´.

App Screens

Last step before testing and iterating again was to generate micro interactions and animations in Flinto.

--

--