top of page
Jo Ionescu
UX/UI Designer
Wake Up!This is Your STOP!
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?
This app was listed by DesignRush in Trends as Best Easy-To-Use App Designs That Set the User Experience Standards High
DesignRush is a platform that helps users find and connect with professional agencies and service providers in various creative and design-related fields, such as web design, digital marketing, and branding. It allows businesses to discover and hire firms based on their expertise and portfolio.
Standout Features:
-
Integrated traveling map view
-
Maximal user control
-
Adjustable timers
Ever fallen asleep on a dull train ride? Jo Ionescu got you covered with the app design for Wake UP! This is your STOP! Yep, this is a mobile mapping platform that wakes passengers up as the train arrives at their station by combining alarm triggers with their location.
This easy-to-use app lets the users pick any of the city’s trains and pick one of the listed stops. As soon as they do, the design calculates how much time will be needed approximately to get there and sets a countdown until that point. Before napping away, the user can set the volume of the alarm ring easily and adjust the timers if there’s a delayed arrival.
If they wake up early, they don’t need to worry as a look at their screen will show exactly where they currently are thanks to the integrated traveling map view that follows the train to a T.
(11 Best Easy-To-Use App Designs That Set the User Experience Standards High, Article by Petar Pesic)
Wake Up! This is Your STOP!
A mobile mapping platform and consumer application that helps passengers wake up just before the train arrives at their station, by allowing them to set an alarm through GPS and/or manually.
As a part of my ongoing professional growth and learning, I decided to set a design challenge to myself, in order to show how I think as a designer and how I approach a problem.
Project Brief
The problem: 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? This raises the issue of how not to miss your stop. How could passengers wake up just before the train arrives at their station?
The goal: Developing a smartphone app, an MVP that solves the user problem of missing their destination due to sleeping through an alarm on the phone, before the users’ stop.
Duration of this individual project was 2 weeks and to start planning my design, I asked myself a few questions:
To answer the questions and deliver a solution to the users’ pain points, I was responsible with:
-
conducting user interviews and identifying the target audience
-
creating the problem statement
-
digital wireframing
-
low and high-fidelity prototypes
-
conducting usability studies
-
accounting for accessibility and refining the design
The Process
My ideation process started on paper.
Working first on the paper helps me brainstorm and gives me more flexibility in trying all the different possible ways and perspectives in which I can approach the design and solve the problem.
Some ideas of what elements the app might need were:
-
GPS based alarm
-
option for manually setting the alarm in case of a weak GPS signal
-
drag and drop on the map
-
option to plug in “from ...” and “to ...”
-
option to choose your train ride and drop off station
-
the app should work in the background - always on the screen
Understanding the User
Who are the users? Who am I designing for? What are their needs? Attributes? In what situation are they when they are traveling by train and accessing the app?
Empathizing with the user is a very important part of the design. I put myself in their position and I tried to understand what needs they might have.
In my notes, I also considered in what scenario I can find the user, the environment, and what the users’ feelings might be when interacting with the product.
Users feelings:
-
the user wants to get to the destination on time
-
the user might feel tired
-
the user wants to rest
-
doesn’t know how long will take to get to the destination
Users goals:
-
the user doesn’t want to miss the station
-
plan to rest knowing how much time is left until the drop off
Users tasks:
-
Search for the train station
-
chooses his train from the options
-
plug in the drop-off station
-
sets the alarm (GPS or manually)
-
rests
As part of the Agile and SCRUM development methodologies, I created user stories, that helped me understand the context, motivations, and desired outcomes of the user.
Two of the strongest user stories are:
1. When I travel by train, I want to sleep/rest/focus on something else knowing that I will wake up before I get to the drop-off station so that I can continue my trip without delay.
2. When I travel by train, I want to know when to leave the train, without looking at where currently is.
situation
motivation
outcome
User Journey
Mapping the user journey ensures that I am not missing out on the chance to interact with the user at any stage. It also helps me gain insights into common customer pain points.
The user journey is a great way to understand what steps the user takes before, during, and after the interaction with the app.
1. The user gets on the train
2. Finds the seat
3. Takes out the phone
4. Opens the app
5. The user can tap on the map to set the location
6. The user can plug in “from...” and “to...”
7. The user can drag and drop the pin
8. The user can reuse the recently used alarm
9. The user can reuse the recently used locations
10. The user sets the alarm and relax
11. Gets waked up by the alarm
12. Prepares for the exit
13. Steps out of the train
14. Goes to the final destination ON TIME.
By understanding the users’ flow of the various tasks the user will want to take, I am starting now to think about what kind of interface the user will need to accomplish those tasks.
Wireframes
My favorite way to start wireframes is with a pen and paper. Although there are a lot of software solutions to create wireframes, I start with pen and paper because:
-
it’s far quicker to sketch an idea than it is to mock it up using software
-
it’s easy to share and iterate sketched wireframes with a large group
-
you can spread out drawn wireframes on a table, so as to understand the larger context and how they all work together
The wireframes (screen blueprint) helped me keep the focus of the design on the user and clarify and define the app's features/elements.
Now that I have the basic structure of the app and the main user path, I am ready to continue with mockups and usability testing to validate my MVP by checking if the design is valuable and useful for the end-user and what else needs to be done to improve the user end satisfaction.
Screen Features and Mockups
-
accomplishing the task of plugging in the route in writing and through voice
-
option of adding the route to favorites for future use
-
option of finding their train ride from the time table
-
accomplishing the task of plugging in the route in writing and through voice
-
feature of the bottom navigation bar because the top-level part needs to be accessible from anywhere in the app.
-
option to go back to the home screen
-
live tracking on the map and live update if the train is on time or not
-
extra-option for setting the alarm manually in case of a weak GPS signal
-
running the app in the background
-
3 sound options in which the end-user can set up the alarm
-
option to look through all the past alarms for a specific one
-
possibility to cancel the alarm
-
possibility to set again an old alarm or to delete it
-
option to look through all the past routes for a specific one
-
possibility to set again an old alarm or to delete it
Learnings and Take-Aways
It was a great pleasure for me to work on a project that is not just about making things look pretty, or about arranging elements on the screen in a certain way. This project was the real problem solving, what UX design is at its core, a challenge in which I have learned new things about user research and its methods such as user stories and user journeys.
bottom of page