Felicity’s landing homepage for our website
UX Intern- Winter 2018-2019
I focused on creating a clear and beautiful homepage for the mobile app, going through research and ideation to result in a better revision of former models.
The Problem
As an intern, I was assigned first to improve existing designs. I needed to make a new homepage for Felicity, our mental health, CBT-based application. The design to the left was an older version that needed a re-haul. The main issue was that though this design was simple and concise, it did not 1) welcome the user as a returner, and 2) did not fit the aesthetic and brand that Felicity was trying to push. So, I immediately got to work, researching competitor applications, and designs that would make Felicity’s homepage tell its story and mission. I thought that the most important and challenging aspects would be how to convey the message of “helping the user help themselves” and also how to make this homepage so appealing that the user would actually want to check how they were doing and integrate the app into their lives.
“Our old homepage design”
The Target Audience
Felicity uses Cognitive Behavioral Therapy, allowing users to journal their issues they experience throughout their day. Its primary users are college students as we aim to provide a cheaper and easier way for them to help themselves, rather than costly therapy visits or university counseling and psychological services. So the age range is 18-25, and open in regards to race and gender.
Information Architecture
I started to solve my problem on my first iteration by diving straight into the information necessary. To the right is what I came up with in terms of what goes into the homepage. I soon found this was my mistake- I did not research enough before going to this step, and my design reflected that.
“Here, we gathered all the content and organized it”
What I Did Wrong
The leftmost screen below was my first iteration, and though the background image and visualization in the center were nice, my lack of research really showed here. Since I did a poor job at researching competitors, my design was liked but also compared to Pacifica, a similar app and its design. In fact, the “How have you been” circle aspect was basically a direct copy. This lead me to realize just how important a homepage is and how I need to really research just what it is that makes homepages inviting to returners and comforting. I needed to combine the best from every app, and put my own creative spin on it.
“The left image is my first iteration, and the two images to the right are Pacifica’s design”
Competitive Analysis
The Flo App, Pacifica, and Moodpath were the 3 apps I narrowed my results down to and completed a competitive analysis on. Though only Moodpath and Pacifica were 2 mental health apps, and Flo was for tracking periods, they all had aspects in common. What I gathered was that visualizations were still important as an easy way to digest information, and that there had to be a calendar view to quickly check in on progress and time. From this, I had two creative ideas I wanted to implement differently and uniquely- a user friendly reminder and a statistic showing users on the app. I felt this would be the best way to get the story of Felicity as a “help you help yourself” tool and still be minimalist and non-intruding.
“From left to right: Pacifica, Flo, Moodpath. I analyzed these 3 competitors to see what they succeeded at”
Wireframes
After gathering the best from each competitor, I sketched some wireframes. My main ideas were to have a calendar clearly in the middle, create a way to see other people who were also using Felicity, and blur the background image (while still keeping the log a session and sign out buttons as well as my previous iteration’s background image). How to organize this without cluttering the homepage entirely was the challenge here.
“These are 4 wireframes I sketched, playing with ideas of live stats, a calendar, and organization of the content”
Visual Design Palette
The team as a whole came up with this palette to use for branding and color, so I followed the guide, using orange and blue as the two main colors throughout.
“Felicity’s visual palette”
Final UI/UX
The result was a clean homepage that was inviting, interactive, and lively. Firstly, the background image was blurred slightly so that the icons and visuals would pop out more. The “How have you been” dialogue stayed with dot visuals to the left indicating a new day. Underneath, I put visuals of stats of other users throughout the day, so the user would not feel alone while journaling and putting their thoughts into the app. Below that, a small 3-day calendar with the center date being the present day was placed and able to be scrolled either left or right, with 4 options under for what the user could do. The main “log a session” and sign out buttons remained as they were important for hasty users who just wanted to get right to it. In all, it effectively communicated the story of Felicity and why people should continue to check in when they needed it- over everything, this app was for the user to give themselves as much value as they could by analyzing themselves, and this homepage was a good starting point.
“The final design I came up with”
An isometric mockup view of the screen on an iPhone, for a practical viewing reference.
What I Could Do With More Time
With more time, I’d love to go back and research even more apps outside the field of mental health and planning. It’s actually very fascinating how many original and unique homepage designs there are out there. This one to the right -my InsightTimer-is one of my favorites because of its brilliant feature of the live map. It stands out to me to as it accomplishes many things at once. It gives social proof to the brand that people actually use the app, make users feel connected to it, and inspires more and more usage. I’d love to use it in Felicity or any other project that I work on. I want to continue to get inspired by other apps and also experiment and fail a lot, because I realize that’s what gets new and interesting designs!
“The image above is a screenshot of InsightTimer, a successful meditation app using a live map on their homepage”
Felicity Introduction Video
Below is just a video I had made for my internship at Felicity. It explains what CBT is and how Felicity specifically uses it to help you! Besides knowing how to use Adobe Premiere and After Effects professionally, I love to make some of my own creative projects with them, such as video essays about TV shows, books, or movies I like!