Defining The Line Between User Experience And User Interface.

Introduction

As a UX design student at RED Academy I get the chance to work on real life projects for real life clients (which is the best way to learn if you ask me). For the past three weeks I have been working in a team consisting of five designers: two UX designers (Myself and Jeremy Tran), and three UI designers (Jocelyn Cho, Token Belic, and Umaru D). Together, we were tasked with delivering a mobile application design, in the form of a high fidelity prototype, for a company who has requested to remain unnamed.

Design Brief

Founded by two researchers within the domain of pain management and sound design, our client produces digitally designed soundscapes which have been tested and proven to relieve the symptoms of people afflicted with anxiety and chronic pain. Users have been recorded showing positive effects with just five minutes of listening. Currently, our client is providing their product to consumers through music sharing websites and public events, but with the amount of positive feedback and increase in demand, they decided to collaborate with the students of RED Academy (us), to create a uniquely customizable digital platform to satisfy their growing user base.

Business Goals:

1. To reduce the use of pain killers by providing a natural and organic method for dealing with anxiety and chronic pain.
2. To increase the number of subscribers to their product.
3. And to increase user retention.

Understanding that a good user experience requires both utility and usability, Jeremy and I were able to define our project goals. Our client already had a product that was providing the utility (their soundscapes were useful and beneficial to their users), so what was necessary was to design a mobile application with high usability.

UX Project Goals:

1. Design wireframes using paper prototyping to quickly test the usability of features.
2. Design mid fidelity wireframes using Sketch and a clickable prototype in InVision to further test the usability of the entire app as a whole.
3. Create copy that clearly guides the user throughout the app, and emphasizes the evidence based product.

At the same time, the UI team had been interacting with our clients, and developing their own separate project goals.

UI Project Goals:

1. Stay on brand to the company’s established brand guideline.
2. Explore typefaces, UI elements, and imagery that express organic minimalism.
3. Skin the mid fidelity wireframes (provided by the UX team) with their fonts, UI elements, and imagery.

Research

With the business and project goals established, we felt that we had a good understanding of our clients. The next parameter we needed to define were the users goals. Our client had already been receiving online reviews of their product, and from those reviews Jeremy created a word cloud to distinguish their users’ most used words.

The size of the word correlates to the amount of times that word is used.

Jeremy and I continued our user research with understanding the domain in which our product would be residing within: mobile apps for mental/physical wellness.

Within this domain we reviewed over 10 different applications. Particularly I focussed on three uniquely different apps: Headspace, Calm, and rootd. And What I understood was that:

1. Headspace’s main product is sound clips that vocally guide users through meditation and self awareness exercises. Their focus is to build habit and educate their users.
2. Calm attempts to cover everything within the domain: music, meditation, story telling, self help, breathing exercises, scenery, and more.
3. rootd is an educational and situational application specifically targeting users with anxiety and panic attacks. Information is delivered through text and imagery.

With this knowledge I compiled a list of questions to deploy in an online survey as well as to ask during in person interviews.

The online survey was deployed to specific forums pertaining to mental/physical health and wellness, social media platforms, and RED Academy Slack channels. We received 55 responses, and from those responses we learned that:

1. 64% of our survey participants were between 18–29 years old.
2. 53% of them were students.
3. 80% of them were actively trying to find a solution for their condition.

We also found that:

1. The top 3 solution methods tried were exercise, music, and support groups.
2. The top 2 effective solution methods were exercise and medication.
3. Current apps on the market ranked among the least with 11% of people finding them effective.

This data reconfirmed that there is potential for a scientifically proven product to exist that provides relief, in a natural and organic way, to those who are afflicted with mental/physical health conditions. And as a result, the product would hopefully reduce the reliance on medication.

For the in person interviews, I was lucky enough to find three people who were comfortable enough to speak about their experiences with mental/physical health conditions.

An interviewee describing what it feels like to be affected by ANTs (Automatic Negative Thoughts).

The general consensus was that the apps that focussed on meditation were too far of a reach for many people. The apps that included too many features were confusing and difficult to navigate, and the apps that were visually cartoonish, didn’t resonate with most users. We also discovered that, even though medication was effective, side effects were quite severe. Some people also felt a negative connotation towards taking medication.

So from the online survey and in person interviews, we were really able to empathize with these groups of people, and come to realize their goals and needs.

User Goals:

1. To have an effective and easy method for relaxing the mind and body.
2. To feel normal and calm without relying on medication.

Planning

With the research phase of the project completed, Jeremy and I were ready to start brainstorming and testings ideas for features within the app. To ensure that our design ideas were always in the interest of our users, I created three separate tools which we could refer back to:

1. User persona

Jessica represents the culmination of the demographics, feelings, and emotions collected from our survey and interviews.

2. Storyboard

Based on the stories we heard during the interviews, the storyboard illustrates a typical experience that Jessica might encounter in her everyday life as a student.

3. Customer journey map

Similar to the storyboard, the customer journey map is based on our data, but instead visually represent the emotional highs and lows Jessica might feel when going through daily activities.

Together with our clients, we came up with a list of features that could be included in the app. Then, to ensure that the project stayed within the scope of three weeks, Jeremy and I categorized the features into priority groups:

Need to have:

1. Onboarding
2. User profile
3. Categories for soundscapes
4. Soundscape player
5. Subscription page
6. Unable to disclose this feature*
7. Unable to disclose this feature*
8. Unable to disclose this feature*

Nice to have:

1. Unable to disclose this feature*

Future considerations:

1. Notifications
2. Mood tracking
3. Journal
4. Voice guided soundscapes

*Items marked with an asterisk will remain undisclosed until the NDA is lifted.

Designing and Testing

When designing the category labels for the soundscapes (which we renamed as Journeys), we felt that the initial idea of using Anxiety, Negative thoughts, Pain, and Sleep disorders held a negative connotation and did not fit with our user’s goals. Instead, Jeremy came up with the labels of Calm, Clarity, Pain relief, and Sleep.

To understand how a user would navigate through the app, Jeremy created multiple user flows for each section.

Example of one user flow within the app

Using the user flows as a guide, we sketched wireframes using pen and paper which we used for our initial user tests.

Blurred sections will remain undisclosed until NDA is lifted.

From these tests, we found that specific copy within the app was necessary to fully understand and use the app properly (ex. onboarding copy, instructional copy, etc.). So, we decided to move into designing mid-fidelity wireframes in Sketch where we could clearly write out copy.

Blurred sections will remain undisclosed until NDA is lifted.

While we were conducting our research and designing wireframes, the UI team was developing high-fidelity UI components to be skinned onto our wireframes. To spread out the work load for them, Jeremy and I decided to complete the wireframes in separate sections. Once one section was complete, we would hand it off to the UI team to be skinned, then move on to wireframe the next section. This way the UI team wouldn’t be overloaded at the end, and if any changes were required after testing the completed prototype, they could be quickly remedied.

Once all the mid-fidelity wireframes were completed, I imported them into InVision to create a clickable prototype which I then used to conduct further testing with our users.

(Placeholder for link to InVision prototype once NDA is lifted.)

Key findings:

1. We needed to clarify the visibility of the system status when users were going through specific processes.
2. We needed to improve the consistency of icons and buttons throughout different sections of the app.
3. We needed to increase the size of certain buttons to improve usability.
4. Many users ignore the onboarding process making it necessary to have instructional copy throughout the app.
5. All users found it easy to navigate the application, even if they didn’t read or understand certain copy.

Final Iteration

With our final iteration we were able to incorporate all the must have features of the app, as well as update the design and usability based on our user feedback. Once the UI team completed skinning the wireframes, I, once again, imported the images into InVision to create a clickable prototype. The completed project was presented in front of our clients and instructors in a 30 minute presentation, and received both positive and constructive feedback.

Blurred sections will remain undisclosed until NDA is lifted.

(Placeholder for link to InVision prototype once NDA is lifted.)

Reflection

Only after seeing the high-fidelity wireframes did I begin to visualize the potential for further design. Where I thought, at the beginning of the project, that the mid-fidelity wireframes would easily translate into high-fidelity, and that there was a hard line between the UX and UI teams, I now realize that the line is quite blurred. A very structured mid-fidelity wireframe can limit the creativeness of the user interface. Also, a completed high-fidelity wireframe can inspire a UX designer to reconsider certain design choices. Currently UX/UI is written in this form with a slash dividing UX and UI, but after my experience with this project I believe that it should be written more like so:

UIX! (I should trademark this)

User Interface Experience! Because, in reality, the user interface is a large part of the experience.