UX, UI, Ixd Designer
iPhone_7_Dribbble_Two_Hands_Dark.gif

UX Case Study: Serenity

 

UX Case Study: Serenity

iPhone_7_Dribbble_Two_Hands_Dark.gif

The Design Challenge

“Have you ever tried to take a short nap on the train only to wake up and find yourself at the end of the line? How can you help passengers wake up just before the train arrives at their station?”

If you want to practice doing similar design challenges, I found this challenge as part of a collection of design challenges you can do yourself at uxchallenge.co.

Tools Used: Balsamiq Mockups, Adobe Xd, Adobe Illustrator, Adobe After Effects

Time Elapsed: 48 hours

1- Research

User Research

To design a successful product, I first need to know who the users are and clearly identify their needs. I conducted a series of interviews on friends and colleagues who regularly use public transport after work. Here are some excerpts from conversations;

  1. An alarm? For the train? I don’t know. The alarm on my phone sounds, despite the fact that I’ve got headphones on. This is really embarrassing, especially if I was asleep.

  2. I don’t sleep on public transport because of the unpredictability. I don’t know if there will be delays on my way home.

  3. I’m tired when I’m coming home, I don’t have time to be messing around with some complicating schedule system.

  4. I don’t really fall asleep on public transport, I do try and do some work sometimes though and I zone out.

A survey I distributed also revealed that 60% of users would enjoy an solution that automatically works after setting it up.

2 - Definitions

In this stage of the process, I am constructing a plan based on the needs and insights gathered from my research. I aim define objectives and subsidiary goals. There’s a number of things I create to do this. I aim to develop our understanding of the users and uncover what they want.

User Personas

Following the principles of user-centred design, I created some user personas that represent fictional users. Their understanding and representation is based on key user insights from user research.

User Stories

I created some user stories to describe types of user, what they want and why. I generally find user stories to be beneficial agile tools, in that they serve to create a simplified description of a requirement.

I choose to follow Mike Cohn’s ‘as a, I want to, so that’ format of user stories. There is a number of reasons why I follow this method, but primarily it comes down to having well structured stories that assist me as a designer with product priorities.

Screenshot 2018-12-06 at 21.29.10.png

Empathy Mapping

Next, I created an empathy map based on our core user. The empathy map allows me to visualise and articulate what we know about a particular type of user. It also externalises knowledge about our users in order to create a deeper understanding of user needs, and later aid in decision making.

I have 4 quadrants in my diagram; Think/Feel (User’s preoccupations), Say/Do (User’s behaviour), Sight (User’s environment) and Hearing (User’s influences). I’ve also outlined Pains (User fears, frustrations, obstacles) and Gains (User’s wants/needs, measures of success).

Screenshot 2018-12-06 at 20.48.29.png

defining a solution

  1. Create a seamless, relaxing experience with a smooth flow to ease tired/stressed users in.

  2. Wake or alert a user discreetly, on time and at the right stop, regardless of any delays or train issues.

  3. A smart application, that can be set up once and automatically turns on during commute. Habit building takes time and a lot of motivation from a user, whereas automatic syncing requires less effort from a user.

3 - Ideation

At this stage of the project, I look for ideas that are worth refining based on the material gathered in the previous steps. From there, I create moodboards, user flows and wireframe mockups. This stage is often the initial part of prototyping visual concepts. The questions I seek to answer in this stage is how can we solve the user’s problems.

Brainstorming

The cool thing about defining what needs to solved at an early stage, is that no matter what form the solution comes in, we know the type of results the solution should achieve. We can brainstorm all sorts of products that can achieve these results.

A solution could be a personal butler who comes with the user on the train. What about an AI-powered seat that buzzes when it’s time for the user to get off? I opted for a smartphone app, as most of our identified users already have a smartphone. It also does not require a lot of action on the part of the transit provider.

My proposed solution, ‘Serenity’ app will sync up with current real-time information networks, allowing the app to update in real time.

Screenshot 2018-12-07 at 03.57.16.png

Moodboard

Screenshot 2018-12-07 at 20.52.21.png

To begin the ideation stage, I created a moodboard to experiment with a colour palette, typefaces, and style as well as plan visual elements of the project. Moodboards are often one of favourite processes within my UX flow as it allows me to envision the feelings and emotions of a potential project. This is very important to me as I am a firm believer that users do not always remember pixel perfect visuals or perfect font pairings. Users remember how you made them feel.

From moodboarding, I anticipated that although I wanted a calming and soothing app for tired users, I would also have to find a way to adapt the UI for waking people up. I opted to create a night/day mode, complimented by friendly and humanist language.

Technical Considerations

From my user interviews/research and competitor analysis, I was able to make some key technical decisions. Whilst the moodboard allows us to make visual choices, it is also important to consider the interaction design of the app. These metrics include;

  1. Number of successful wake up calls (alarm trigger coordinated with GPS location and real-time information)

  2. Number of alarms set when the app detects that the user is commuting

  3. Number of user dismissals when alarms are triggered

  4. Number of missed stops from user feedback

  5. Amount of time it takes from install to setting up an alarm

User Flow

I created the following user flow based on the research and project definitions.

Screenshot 2018-12-07 at 03.38.59.png

Wireframes

Finally, I created some wireframes based on above activities.

Screenshot 2018-12-07 at 16.09.01.png

From the idea generation process, I have a clear idea of how my proposed app should work, as well as look and feel. I propose an app that connects with transit real time information systems to provide a smart alarm system to alert passengers when they should exit the train/bus.

4 - Prototyping

Next, I built a representation of all ideas and solutions I compiled so far.

Straightforward sign up system , broken up into several steps. Progress is shown visually, which can grant a sense of control to a user. I also opted to allow users to sign up with Google/Facebook as my observations suggest that a majority of users prefer to tap one button to transfer personal details, rather than manually inputting an email address.

Straightforward sign up system, broken up into several steps. Progress is shown visually, which can grant a sense of control to a user. I also opted to allow users to sign up with Google/Facebook as my observations suggest that a majority of users prefer to tap one button to transfer personal details, rather than manually inputting an email address.

Day Mode:    Upbeat, practical colours that invigorate and energise users.

Day Mode: Upbeat, practical colours that invigorate and energise users.

Night Mode:    Optimised night mode with a muted, relaxing colour palette.

Night Mode: Optimised night mode with a muted, relaxing colour palette.

Red colour used to indicate to user of possible delays or time running out.  Users are quite anxious about train/bus delays are often checking separate apps or trawling through twitter to find information on delays. The Serenity app can provide this information, lessening the effort on the part of the user.

Red colour used to indicate to user of possible delays or time running out. Users are quite anxious about train/bus delays are often checking separate apps or trawling through twitter to find information on delays. The Serenity app can provide this information, lessening the effort on the part of the user.

Serenity can run in the background and still alert user that their stop is approaching.  This covers many eventualities of the users described in our persona. For example, one user may want to have a power nap on the commute home, whereas another user would like to focus on his work without the constant need to look up and check what station is next.

Serenity can run in the background and still alert user that their stop is approaching. This covers many eventualities of the users described in our persona. For example, one user may want to have a power nap on the commute home, whereas another user would like to focus on his work without the constant need to look up and check what station is next.

Screenshot 2018-12-08 at 03.11.07.png

Icon Design

I put together a design with fluidity and movement, to indicate a commuters journey.

5 - Testing and Conclusions

With the first prototype built, I was able to connect my mobile phone to Adobe Xd and allow users to interact with my model. I also invited these users to provide me with their feedback and questions.

I gathered some interesting feedback from user feedbacck. Should I decide to take this project further, or simply build another prototype, here are some considerations I will be aware of for the next iteration;

  1. The app should begin the process of alerting a user of their upcoming station in an optimal manner. Several studies suggest 20 minutes is the amount of time a person requires to ‘fully wake up’, but assumptions like this can be dangerous. Several users were apprehensive about the timing of the app. For this reason, I will create a setting that allows a user to describe whether they are a heavy sleeper, light sleep, intend to be awake (but working). Based on user input, the app will calculate the alarm schedule for the user based on these metrics.

  2. Serenity’s default notification is device vibration, so if a user is sleeping or listening to music, they will still feel the vibration. During the onboarding process, the user is briefly informed of this but is given the option to activate an alarm. Although the user will be notified that this dialogue box will only appear once, they are also informed that they may change the notification settings at any point. If a sound alarm is chosen, a user is warned if they do not wear headphones that other commuters will also hear the alarm.