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. 

TTC Late Note_edited.jpg
ttc note.png

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​

google map.jpg
map.png
1.jpg
2.jpg
maple.png
orange.png
red.png
3.jpg

Card sorting

I applied card sorting technique based on re-arranging some of the above-highlighted pages. 

card sorting.jpg
Screenshot 2021-09-23 230522.png

User flows + low fidelity wireframes

Flow # 1

 

New user requests a late note without a pre-populated location.

brad user flow 1.png

1.

Sign-in Page

2.

Homepage

3.

Form Filler Page

4.

Completion Page

Flow # 3

 

The user adds a new work location.

janice user flow 2.png

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.

janice user flow 1.png

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.

brad user flow 2.png

1.

Homepage

2.

Map Page 

3.

Returns to

Homepage

Prototype

Here are some high fidelity wireframes.

wireframe.png

Link to clickable prototype:

https://marvelapp.com/5j15j3g​ 

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.