With the smartphone revolution, everything – even professional medical care – is available from within our pockets, reducing our need for office visits, cutting costs, and empowering patients. Emotilink is an upcoming mobile app that provides counseling services through video chat, reducing patients’ fear of social stigmas and saving them time and energy.
My team of UI designers worked with the founders of Emotilink over three weeks to deliver style tiles, pixel-perfect mockups, prototypes, and style guides to rebrand their product.
Our client wanted a professional style to ensure users’ trust of the quality of the product and the counseling it promises. Somewhat conversely, the client also required a playful aesthetic to help users feel more comfortable with the idea of video counseling. Our biggest question was the following:
How do we balance two seemingly competing visual styles, playful and professional, to create an approachable and reliable mental health app?
From the very start, we created design principles that were based on our clients’ goals and vision for their brand. We used these principles to guide our research and design directions:
The client enthusiastically approved these and felt they were aligned with her goals for the brand. Next, we looked into the elements that make a brand look professional while playful, and explored ways we might translate these into our app. We researched relevant competitors, like Doctor on Demand, Talkspace, ZocDoc, and Headspace, to gain an understanding of the space and determine the general visual and experiential trends that conveyed the appropriate mood.
In short, we realized that Emotilink needed to combine professional colors and clear calls to action with playful illustrations and casual language. With our research and design principles in mind, I created a fitting logo and three divergent style directions to present to our client.
The client held strong opinions on our designs, which was difficult at times, but gave us a clearer picture of her brand vision. She liked that the layouts felt approachable, but her biggest critique was that the colors either felt too clinical or too muted. Following her feedback, I combined elements of each style tile and went back to the drawing board for a new color palette to balance vibrance and trustworthiness.
ITERATIONS AND TESTING
Using our research and clients’ direction, I created my first round of designs. I used bright colors and flat illustrations to create a playful mood, while keeping the interface simple. The client was satisfied with the designs, and felt they were a successful balance of professional and playful. However, the background color still felt clinical and a bit heavy.
During user testing, we found that the splash page was too busy and could increase users’ anxiety. Given that both our users and clients felt the designs were too busy and too heavy, I decided to explore a cleaner and more relaxing aesthetic.
The majority of our user feedback was related to the functionality of the app, so we decided to tackle some of the pressing usability challenges before continuing to the second iteration of screens. Users were overwhelmed by the number of buttons on the dashboard and found the “scheduled appointment” page to be unintuitive. I closely analyzed the wireframes and fixed these issues in the next iteration of my mockups.
I removed the background color to create a lighter mood and incorporated an abstract wave element that users described as “relaxing” and “soothing.” Not only did the wave element make the app more playful, but its blue color also conveyed reliability and trust, a sentiment that was echoed in user testing.
I was proud that the resulting app successfully balanced playful and professional. The client appreciated my exploration of a new direction wholly different from the original unsuccessful design and applauded the clean and friendly design.
“I just wanted to say that you guys really exceeded our expectations. I’m so impressed with how much work you did in three weeks. Amazing work!”
-Client after our final presentation
WHAT I LEARNED
This project made me realize the value of honest, sometimes harsh, critique. Our client had a vision for Emotilink, and her feedback helped us align our designs with her expectations for the brand. I learned to synthesize feedback from the client with results from user testing to create an improved final product. When my first iteration of screens got mixed feedback, I went back and made drastic changes to my designs. I am proud of the final product because I was able to reimagine the brand entirely after beginning with an initially unsuccessful design. Ultimately, I created a product that satisfied the goals of both the client and the user.