Designing a mobile app from scratch
Background
I created a mobile app prototype for my UX design final project at BrainStation in early 2020. The project involves using the design thinking methodology to develop a user-focused product.
About lateTO
Before the COVID-19 pandemic, tardiness was a common problem for Torontonians because of TTC subway delays.
The lateTO app (inspired by the local news site, blogTO) alerts users of subway delays. They can then generate a late note signed by the TTC for their employers.
This app can help commuters save time and reduce their carbon footprint by confirming their reasons to work from home or have flex hours.
User interviews
In the early discovery phase of this project, I wanted to explore what the
existing transit situation is for Toronto commuters and what their preferences
were given a transit delay.
Summary
​
-
9 interviews in total (4 peers from BrainStation, 5 people externally)
-
Everyone I’ve spoken to takes the TTC to get to work
Insights
​
-
People are primarily concerned about how long it takes to reach their destination.
-
People prefer working from home or have flex hours if there is a service delay.
-
All of the interviewees agreed that their employers would allow them to work remotely if they had a valid reason and if it was feasible.
​
Link to interview script: https://docs.google.com/document/d/1n2wu1ptQ__lK8tE6QDTBuBNzU0G4la_Bj1H6DlK5DqE/
​
“I’d take the Uber if I was really stuck but that wouldn’t solve the problem.”
"There's always a lack of communication from the TTC until things go wrong."
“I wouldn’t take an Uber to work because it’s bad for the environment.”
Information architecture
Based on research gathered, I came up with the LateTO app and looked at similar apps for inspiration.
Forensic site map audits
A rough drawing of site map of similar apps​
Card sorting
I applied card sorting technique based on re-arranging some of the above-highlighted pages.
User flows + low fidelity wireframes
Flow # 1
New user requests a late note without a pre-populated location.
​
1.
Sign-in Page
2.
Homepage
3.
Form Filler Page
4.
Completion Page
Flow # 3
The user adds a new work location.
​
1.
Home Page
2.
My Locations Page
3.
Add New Location State
4.
My Locations Page
Flow # 2
The user sees a banner notification and then goes to the app.
​
1.
Home Page
2.
My Locations Page
3.
Form Filler Page
(for specified location)
4.
Completion Page
Flow # 4
The user check for service delays.
1.
Homepage
2.
Map Page
3.
Returns to
Homepage
Prototype
Here are some high fidelity wireframes.
Some comments on the copy:
-
"Log In" should be two words since it's used as a verb here.
-
The "First time user" prompt for new sign-ups is missing.
Learning outcomes
Key learnings
-
Iterating happens throughout each project phase (from the interview stage to creating a sketch to design).
-
It's hard to predict future events that could impact the need for this tool.
Ways to improve
-
Conduct additional tests and interviews to see how users respond to the interface and the text.
-
Add more unique details for the buyer personas (not shown on this page).
-
Ideally, there should be opportunities to interview employers to see if such a prototype would be valuable for them.