UX Case Study: Serenity
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
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;
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.
I don’t sleep on public transport because of the unpredictability. I don’t know if there will be delays on my way home.
I’m tired when I’m coming home, I don’t have time to be messing around with some complicating schedule system.
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.
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.
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.
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).
defining a solution
Create a seamless, relaxing experience with a smooth flow to ease tired/stressed users in.
Wake or alert a user discreetly, on time and at the right stop, regardless of any delays or train issues.
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.
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.
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.
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;
Number of successful wake up calls (alarm trigger coordinated with GPS location and real-time information)
Number of alarms set when the app detects that the user is commuting
Number of user dismissals when alarms are triggered
Number of missed stops from user feedback
Amount of time it takes from install to setting up an alarm
I created the following user flow based on the research and project definitions.
Finally, I created some wireframes based on above activities.
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.
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;
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.
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.