Eric Hart Design
Clearify-MVP.jpg

Clearify: MVP, iOS app prototype

Summary - iOS app MVP prototype for a stress monitoring app called Clearify.

What it is - Clearify is a stress monitoring app for corporate employees in Japan seeking to reduce and understand their stress. I was tasked with taking the general idea of “helping Japanese corporate employees relieve and understand their stress” and turning it into a mobile MVP prototype to gauge viability and investor interest.

How it works - This MVP prototype takes users through a few basic functions: signing in, posting a feeling, browsing the timeline, searching through past emotions via Emotion Search (and its filters), and editing settings.

My role - Research, strategy, wireframing, UI/UX, prototyping, design.


Challenges

Visually representing emotions

At any particular moment, a Clearify user will need to choose from a list of emotions that which they feel. How do I depict those emotions in the app? Will I use text or emoji-like icons? Should different emotions be represented by different colors? Would visual aids help to explain how users feels over time? There was an infinite number of things I could’ve done.

DIRECTION 1

At first, after some trial and error, I landed on Direction 1. I used text to describe emotions instead of emojis because there were twenty-two emotions to choose from. It would’ve been almost impossible to design simple emojis with enough subtlety for a user to pick one out correctly from the others. Text afforded me the ease of recognition and the increased chances of a user not choosing the wrong emotion for the moment. I also used the color red to represent emotion. Red meant love, anger and energy. It’s the warmest and most dynamic color. The “log emotion” icon in the header, the emotion titles in the cards on the timeline, any CTAs to “Post your feeling” were all in red. I thought it was an appropriate analogy for emotion.

To help further explain to the user how their emotions are changing overtime I decided to use graphs. In this direction, I landed on using line graphs and radar charts. I was hoping the line graphs would be a familiar, easy to use tool that could show the ebbs and flows of emotion over days, weeks, months, and years. The radar charts were brought in to give a visual aid as to what the user’s average emotional profile was over the same time period. As an example, even though a user may have felt many emotions on a particular day, the radar chart could show that the user stayed mostly inside the frustrated/worried sector. In Direction 1 these graph were found in multiple location throughout the app. At the end of each day a special Daily Summary card would appear on the timeline that would display a line graph and radar chart. Inside each card on the timeline would be a line graph showing your previous emotional trajectory up until that point. The activity tab had another, more detailed line graph as well as the aforementioned radar chart.

Ultimately though, I didn’t feel comfortable choosing this direction. The color red started feeling like it could mean, “stop”, “cancel”, or “error” as opposed to being an analogy for emotion. I felt that due to there being red action buttons inside of native iOS apps, that might dilute the analogy and cause confusion. I also felt that seeing so much of the color red throughout the app might have some psychological effect on the user, eliciting emotions from them that I had not intended and skewing their emotional data toward “hotter” emotions than would be normal for them. The graphs ended up feeling overused and tiring. Since they were displayed on so many pages a user would be trying to interpret one at almost all times. You couldn’t escape them and I thought a little breathing room would be appreciated. The line graphs just ended up not working for me because emotions are such a seldom seen data set to have as the y-axis of a graph and a lot of thought needs to go into trying to understand them. I also had to let radar charts go. Similarly, the radar charts also demanded a bit too much energy from the user to read.

DIRECTION 2

After I hit a wall with the first direction, I pushed forward to find a new approach. In Direction 2 I stuck with my decision to use text to describe emotions instead of emojis but, landed on something new in regard to color. Staying away from all the issues I ran into when using the color red, I went with a multi-color concept. Each of the 6 main emotion categories was given its own color. This was useful in that wherever a user sees a specific color used throughout the app (ex. yellow) it will always be analogous to its main emotion (ex. happiness). For example, yellow could be used in shapes, charts, text and tags and still be recognized as “happiness” without having to write out the word happiness. This concept freed the user from the burden of being forced to read everything, contributed to a more lively look and feel throughout the app and allowed me to side step all the issues I had using the color red in Direction 1. This color approach also paired very well with the new direction I went in with regard to graphs.

In Direction 2, the way I used graphs evolved. For the reasons above I stayed away from line graphs or radar charts. Instead, I opted for pie charts only. Using more than one type of chart to visualize the same type of data was overkill and didn’t give much value to the user. The simplicity of only using one type of graph made for a more pleasant and unified graph experience. For the type of data I was visualizing, pie charts felt much easier to understand. Pie charts felt appropriate because not only do they show the whole picture, but users can visually compare and contrast the ratios of their emotions. Pairing other contextual information (ex. numerical and location data) with these pie charts felt especially powerful and I determined it should be the standard way of presenting them. To avoid the frequency and overuse issues I had in Direction 1, and to give focus to the pie charts, I used them sparingly. I gave them a “home” in Emotion Summary sections that would be easy for users to find when needed.

In the end, I felt comfortable that Direction 2 solved many of the challenges I was running into when trying to visually represent emotions in an interactive digital medium. The stakeholders agreed and it was decided that I was to utilize Direction 2 when building the interactive prototype.


Takeaways

Failure happens.

This project didn’t ultimately get off the ground. Not every project I work on will be successful. Sometimes things are just going to fall apart and I’m going to have to learn from it and move on.

Passion is key.

The passion and energy I had for this project was special. As long as I continue to pursue projects that I’m passionate about, that keep me wanting to learn and grow, I know the energy I give is always going to be worth it.

This problem still deserves a solution.

Even though it failed, this problem is still worthy of being solved. These users still deserve to have a solution to this problem and I believe a product will come along that is successful at doing that in the future.