Applying for a position in a digital agency, I was asked to participate in a design challenge to create a mental health app from concept to final deliverable. I was only given the project brief and two weeks to submit any activities, screens, or artifacts to support my idea.
The first thing I did was to breakdown the project brief so I can understand the main “asks.” To review, the project brief states:
For many people, there is a great deal of purpose and self-worth tied to our work. We often face new challenges, which can turn into learning opportunities that foster growth and change. As we commit ourselves to meaningful endeavours in the workplace, how might we make sure that we're actively tracking our thoughts and moods to help promote and maintain good mental health?
Focusing on the important specific phrases bolded above, I have converted them as being my goals for the app. To organize my thoughts, I created a table and started doing some divergent thinking to come up with as many possible solutions.
The difficulty with creating an app from scratch is that it’s easy to run into a lot of gaps. Some of these gaps are 1) what are the user pain points? 2) what information is relevant to the users? 3) and what do stakeholders find important?
With these and many more unknowns, I had to make a lot of assumptions:
This was a good exercise to practice empathy towards potential users. I kept several post-it notes next to my computer to remind myself of these assumptions as I work on the design.
I’m naturally a visual person, so it’s really helpful for me to create simple user flows so that I have a general idea how a user will navigate through my app without creating any UI screens.
My experience as a product owner allowed me to see the importance of user story mapping. Usually done as a team, user story maps allows for the defining of user goals to tell stories to make sure the entire team is on the same page. It also helps from over-building features and getting a better understanding of the “big picture”. The final story map for this project looks like this:
The steps I took to create this was to use the data I gathered in the earlier phase (see step 2). I summarized the goals into four major groups: onboard, capture, measure, and share. Next, I would detail the user’s steps to accomplish the goals mentioned. This would then allow me to start designing and creating user stories for each user step or activity. The final step in a user story map is to prioritize the features but I skipped this since I’m not looking to build a MVP.
1. Testing the Capture User Flow
With a basic idea of what I wanted to build, I fired up Figma to start designing the wireframes. The first thing I wanted to work on was the capture user flow.
My immediate plan was to quickly design the screens and show them to a couple of my friends to get instant feedback and make further adjustments. But after a few quick searches on Google on online user testing tools, I decided to take it a step further and use an app called Maze.
Maze was a great tool as it gave me detailed insight on my designs. The only problem was it’s still an unmoderated remote testing tool which is useful for simple findability tasks and visual design signifiers but given that I was using low fidelity wireframes and the instructions I gave may have been a bit confusing, there was high abandonment and misclick rates. Here are the results
2. Testing the Measure and Team User Flows
The next screens I wanted to test were the measure and team user flows.
Learning from the first set of tests with the capture user flow, I tweaked the testing to be semi-moderated. After giving the test link to my friends, I also got on a call with them to answer any questions they may have and to clarify the objectives of the testing.
The results speak for themselves. There were still a few things that definitely needed to be addressed but overall the designs were on point.
Armed with the knowledge gained from the usability tests as well as the post interview with my participants, I had a good idea where improvements can be made. My first action item was to improve the home/timeline screen. There were several users who could not find the Add Mood button to get started. Looking at the heatmaps, it showed that users were fixated at the top half of the screen. In order to improve the design, I needed to bring the Add Mood button higher because the distance to this main action was too far for new users unfamiliar with the app (Fitt’s law). Adding labels and increasing the contrast also increased the chances of them discovering this action as well. Below is the before and after designs to the wireframe:
Another screen that needed significant improvement was the Add Activity screen. I realized that I missed the ability to optionally share comments/insights with the team. This would allow the user to add comments confidently knowing that they have control over what is shared or not. Another issue that the user test revealed was that some participants ended early by clicking on the Save button. By changing the primary call-to-action from Save to Add Feeling, participants had a higher chance of completing the Add Mood workflow.
One of the concepts I have to keep reminding myself is the notion of simplicity. I have often fallen into the trap of taking away elements to make the page less cluttered. I used to believe that less elements on the page would make it less overwhelming for the user and therefore less complex. But perceived simplicity is different from operational simplicity, where taking things out could actually make it harder for the user to find what they need to complete a task.
The heatmaps for the screen below showed how some users were trying to click on the calendar icon to possibly change the date range. I’ve made it easier for the user by showing the controls immediately without them having to open another screen.
In choosing a color palette for this app, I wanted to assign each mood a certain color. I decided for the colors to have a playful and soothing aesthetic so I chose a pastel palette to complement the users’ emotions.
1. Primary Color Palette
2. Secondary Color Palette
3. Greyscale Color Palette
Two typefaces are used within the Mental Health App: Omnes and Neutrif Pro. Together they promote a playful and friendly feeling that’s inviting to users.
In designing the UI elements, I wanted to make sure that all components are consistent and intentional. Bringing the colors and typography together should invoke the same feelings of playfulness and friendliness that entices users to discover more. The goal was to inject serendipity through messaging, animation, and other delightful surprises.
In choosing the screens that I wanted to showcase, I chose the Timeline/Home screen and a couple of the Team screens. I believe that the Timeline screen is important to get right because this is what the user will first see when they open the app after registering. It has to focus on providing the right amount of context so that the user receives a snapshot of their progress. It is also important that this screen keeps its inviting and pleasing aesthetic to the user even if they have entered multiple negative moods.
The Team screens were the ones I wanted to feature next. I feel that these are the most valuable features of the app because of how it shifts the focus from “me” to “we”. In the workplace, it is important that people are not just focused on themselves as individuals, but also take into account the team’s collective disposition.
One of the main goals in creating this app was to provide an avenue for guidance and support without feeling obtrusive. That is why I designed the app to allow users to express themselves and give honest feedback while remaining anonymous.
This data is also extremely valuable for managers as it can help them increase the team’s morale and flag issues before they can possibly escalate. It can also provide rich talking points during sprint retrospectives as real problems can be addressed by the whole team.
Early wireframes were then created and applied to the Create Your Own (CYO) prepaid plan user flow.
I then started to conceptualize the structure of each screen by creating low-fidelity wireframes in Balsamiq. I was constantly consulting with the team for early feedback especially with regards to any technical limitations in the design. It was also good to get the team involved in the early sprints so that there is a common understanding of what we are looking to build.
Right after an interview, I would write down each important information from my notes into a sticky note and would start to build a chronological structure of each participant’s experience.
Doing this exercise allowed me to get a clear picture of the concert goer’s current user experience. Most of the yellow stickies on the wall are direct quotes. These could either be the user describing their goals or pain points. Some of the yellow sticky notes describes more the user’s attributes rather than observations about specific tasks which I would use to later create my personas.
This has been both very exciting and quite challenging at the same time because I’m used to collaborating with a team on UX projects like this. I was able to use my past experience to apply user-centered design techniques in order to come up with a product that I’m truly proud of.
I know there are still a few gaps in my design but given the additional time and budget, I would’ve fleshed out the onboarding and sharing experiences and ran more usability tests. I really would have liked to delve a little deeper on the buddy system and how to incorporate mental health management skills.
UPDATE: Even though I wasn't selected for the position I applied for, my work was recently recognized as one of the Best Illustrated App Designs by DesignRush. I'm humbled by the recognition and proud of this achievement. You can check out the article here: www.designrush.com/best-designs/apps.
After selecting which direction the stakeholders wanted to pursue, we had many iterations on the chosen option. There was still a lot of debate on the right look and feel internally within the team so I reached out to research to conduct a desirability study. The goal was to understand how well the new visual designs conveyed the target brand attributes. The method we used was an online survey via Globe Collaborate among Prepaid users (n=408) in July 2016.
The results show that Design 1 is significantly preferred over Design 2, although preference among 18-25 years old is almost parity. 7 out of 8 nominated design descriptors were attributed to Design 1 with the exemption of “Simple” which was attributed to Design 2.
While the overall winner is Design 1, there seems to be a need to deep dive among the 18-25 years old demographic who are the core targets of Prepaid. Given that this age segment appeared to have no strong preference over the 2 designs, there is a need to know if they are looking for something more that was not delivered by either of the options presented.
Through the data gathered from the experience map, I was able to use the user attributes from the different interviewees to create believable users for the product I’m designing.
To create these personas, I looked at what attributes my users shared as well as what qualities differentiated some from others. From here I was able to create 3 personas with varying degrees of experience, goals and concerns. I categorized them into three basic groups: selective, avid and hard core concert goers. These form the basis of all my design decisions moving forward.
The next step of the process is to create scenarios that would take the best ideas from the ideation session and combine them into workable solutions. I start off with sticky notes so that it’s easy to add or rearrange scenarios based on the pain points I’m trying to address. Many of the ideas that I’ve come up with are not viable solutions because it cannot be built for whatever reason.
The next step I took was to create paper prototypes of the user interface my scenarios describe. Once I’ve created the necessary screens, I got in touch with the people I initially interviewed and have them go through the screens to make sure that what they’ve envisioned at the beginning of the process is what I’ve delivered in my design.
In my experience, working with paper prototypes is great because I get more and better feedback from the users compared to a digital prototype. The data gathered from this round of usability testing is what I’ll use to create the high-fidelity mockup designs.
The final app I created is called Grüpie.
Grüpie allows you to discover when and where your favorite artists are going to play, buy tickets with your friends, and archive your entire concert experience.
There’s so much more to discover with the new Grüpie app — it’s live music made better.
With the data from the desirability study, we were able to tweak the design and came up with a revised layout.
The revised layout was well received by the team and stakeholders. I then created an interactive prototype so that the interaction design can be clearly communicated to the developers.
I was really happy with the way the app turned out especially with the short development time of 10 weeks. My only main regret is that we didn’t do any usability testing during the early sprints to validate our design decisions.
After launch some users said that there were too many clicks to get to the content they needed. This feedback would’ve helped me greatly as I could’ve designed the home screen with this in mind. The app didn’t last too long though since shortly after SLS did a rebrand to the Sahara Las Vegas and our app was then discontinued. But it was a great experience and I had a lot of fun working with the team.
The next iterations based on the usability test results really help the team refine the design. For most of the screens we needed to make it clear for the user where to find key elements that would help them complete their task. That meant we had to design for better affordances and remove clutter. This was most important for the home screen.
Testing out different color and animation options for the home screen.
After providing different color options and interaction concepts to the stakeholders, they chose the UI concept that matches Globe primary blue hues with pink as the contrasting color. Gradients were also preferred vs solid colors that resonated more with their 18-25 core demographic. For design elements, we used circles and spheres to mimic Globe’s current brand guidelines.
This project really championed user-centered design. It was amazing to have users constantly consulted throughout the build cycle. I know not all projects I will work on will have the budget to involve users early and often but the final product really shines with an app the prepaid users truly love.
