A Case Study:

smarTransit Mobile App

Transit made easy by engaging riders with real-time data with answers that matter

smarTransit Phone
A Case Study:

smarTransit Mobile App

Transit made easy by engaging our riders with real-time answers with data that matters
smarTransit Phone

Overview

Project Brief

Roles & Responsibilities

Design Team:  
Me, myself, and I

My Role Details:
  • Liaison
  • Research
  • Content
  • Craft
  • Interaction
  • Accessibility
  • Usability
  • Storytelling
designer Frank
MTA Bus Stop

Client Background

My client is a Metropolitan Transit Authority (MTA) of a midsize city in the heartland of the United States with a population of around 300,000 residents.

They serve the residents of the city and outlying areas in a bus-only transit system averaging about 170,000 riders per week.
  • Create a social media mobile application on iOS specifically for poets to showcase their work, communicate with other poets, get booked for events, and get paid.

  • 3-week timeline to deliver a lo-fidelity wireframe minimum viable product (MVP).

Business Goals & Requirements

  • The MTA asked for help in designing a mobile application to overcome challenges caused by a recent expansion of their transit system.
  • The city has developed a way around these obstacles but aren't sure how to share that information with their commuters.
  • Ensure riders know when each scheduled bus arrives at the Washington & State bus stop.
  • Ensure riders know how much time they have before a scheduled bus arrives at the Washington & State bus stop.
  • Allow riders to select one of seven bus lines to see a list of scheduled arrival times at the Washington & State bus stop.
Bullseye Targets
problem summary

Problem Summary

  • When the MTA expanded the transit system to include new routes, it caused confusion at existing bus stops because riders could no longer assume it was their own bus arriving due to overlapping schedules.

  • This is especially true at the Washington and State bus stop which is served by seven bus lines and is a major hub for the city.

  • The MTA has developed a way to know how far away each bus is from a stop but needs help in getting that information in the hands of their customers.
The research data and business requirements helped define the problem statement below:

Problem Statement

This is a block of text. Double-click this text to edit it.
smartransit problem statement

Solution Summary

After synthesizing the research data, the MVP solution and scope was defined in the following feature set:
  1. Create an Android transit mobile application.
  2. Implement a real-time bus tracker map feature.
  3. Provide quick access for riders to check how much time before their bus arrives at their stop.
  4. Advertise the Washington & State bus stop so that’s it’s never more than a couple of taps away.
  5. Easy access to transit map to lookup bus and stop information.
  6. Create a route planner feature if time allows.
problem solution
Bus Riders

Users & Audience

  • The primary users are riders whose main mode of transport is the bus and who use a smartphone.

  • The secondary users are new riders or infrequent riders who use a smartphone.

Scope & Constraints

  • 4-week timeline to deliver a hi-fidelity wireframe and prototype MVP.

  • Create an Android mobile application with a 6-feature solution set defined above.

  • $0 budget – used free tools and resources.

  • Stakeholders: MTA of Midwestern city, academic staff at Thinkful, & my mentor Himal Choi.
Scope and Constraints

Accessibility

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
principles of universal design

Important Survey Questions

The survey was key in helping us inform our design and decide what type of digital product to create. Two questions stood out to us most:

Question 1:  
What platforms are poets regularly posting their content on currently?

Key Insight:
Our data showed that almost 90% of poets were posting on social media apps. It was important for us to explore these responses further in user interviews.
  • Because A Mindful Journey is a mobile app, I had to be mindful of the screen size and how to ensure complex screens didn’t overwhelm users which could result in cognitive overload.

  • To keep the app simple, I made sure to apply proper element hierarchy and employed the principles of universal and visual design.

Important Survey Questions

The survey was key in helping us inform our design and decide what type of digital product to create. Two questions stood out to us most:

Question 1:  
What platforms are poets regularly posting their content on currently?

Key Insight:
Our data showed that almost 90% of poets were posting on social media apps. It was important for us to explore these responses further in user interviews.
  • Furthermore, I ensured there was enough space between elements to avoid accidental taps.

  • Finally, I used consistency throughout the app to make it both usable and learnable so that users would be comfortable using it and have a positive experience while in the app.
principles of visual design

Design Process

Double-Diamond Design Process

This is a block of text. Double-click this text to edit it.
Double-Diamond Design Process
  • I employed a user-centered approach on this project by using a double-diamond design process defined by its four-stage model of discover, define, develop, & deliver.

  • Because this process isn’t linear, it allowed me the flexibility to quickly change directions if needed to address glaring issues and to continuously iterate during the project cycle.

Assessment

Exploratory Research

Our team used a Kanban board in Jira to help keep us organized, understand the workflow, and on track to meet strict deadlines.
After reviewing the client’s business requirements, I conducted research on the public transit industry to get an idea what questions to ask and to narrow who the target audience is.

According to the American Public Transportation Association (ATPA):
  • In 2019, Americans took 9.9 billion trips on public transit and since 1995, public transportation ridership has increased by 28%.
  • More than two-thirds of riders walk to their stop or station.
  • The importance of public transit as a means of travel to work is substantial, with over 7.6 million Americans commuting to work on transit.
  • The growth of vehicle location systems have increased substantially since 2000 making the availability of public transit data such as bus arrival times more accurate and accessible.
Conducting Research

Proto Personas

Human-Centered Design

After conducting exploratory research on the public transit industry, I made initial assumptions on the users by creating three proto personas.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
smartransit proto persona1

Proto Persona 1 - Junior Samples

  • Uses the bus daily to get to work and likes that it reduces his carbon footprint.

  • Software engineer in his late 20's.

  • Lives downtown and three blocks from his bus stop.

  • Loves helping others discover their purpose.

  • Really hates that he can't verify if his bus is running on time especially during bad weather.

  • Public transit is crucial for his lifestyle.
After gaining a better understanding of the poetry landscape, our team searched the Internet for similar apps that met the following criteria:

Proto Persona 2 - J'sira Talmadge

  • Uses the bus frequently to get to school and around town.

  • Full-time student in her early 30's.

  • Lives downtown and her bus stop is right outside her apartment.

  • Loves learning new things in school and particpates in social justice causes.

  • Hates not knowing if the bus she sees coming down the street is her bus or a different one.

  • Would love to know how long before her bus arrives at stop to avoid wasted time.
After gaining a better understanding of the poetry landscape, our team searched the Internet for similar apps that met the following criteria:
smartransit proto persona2
smartransit proto persona3

Proto Persona 3 - Cathy Cunningham

  • As a single mother, the bus is critical for her to get to daycare and work.

  • Secretary in her late 30's.

  • Lives downtown and her bus stop is a couple of blocks away.

  • Wishes she could claim wasted time around public transit to spend more time with her kids.

  • Hates not knowing if the bus is on time because it causes her to be late dropping off kids at daycare and being on time to work.

  • Wishes public transit wasn't so stressful.
After gaining a better understanding of the poetry landscape, our team searched the Internet for similar apps that met the following criteria:

Users & Research

Competitor Analyses

Human-Centered Design

I then conducted a SWOT analyses on two similar apps for public transit systems.  See the subcharts below for details.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
smarTransit SWOT analyses

SWOT — Competitor Strengths

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Relevant content.

  • Simple & clean interface.

  • Search bar customized for specific screens.

  • Many transit options.

  • Easy toggle option for stations information.
SWOT Strengths
SWOT Weaknesses

SWOT — Competitor Weaknesses

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Ineffective messaging.

  • Poor visual design on buttons.

  • Confusing navigation with lack of hierarchy.

  • Confusing settings button.

  • Cognitive overload on slide out menu.

  • Too many transit options.

SWOT — Client Opportunities

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Design better UI than competition.

  • Design app with emotion.

  • Use colors with more pop.

  • Simplify interface and user flow.
SWOT Opportunities
SWOT Threats

SWOT — Client Threats

Our team focused on the three most important HMW’s that would solve the client’s needs while also allowing us to complete a minimum viable product (MVP) within a 3-week design sprint.
  • Lack of transit options.

  • Competitors offer plethora of transit content.

  • Very thorough & functioning interface.

User Surveys

Human-Centered Design

Next, I conducted a user survey that asked 15 questions shaped by my research and meets the following criteria:
  • Bus riders whose primary mode of transportation is the bus and who uses a smartphone.
smarTransit User Survey
I received 17 responses and the survey was key in helping to inform my design and to decide what features to include in the digital MVP product I create. Out of the 15 questions I asked, two stood out to me most:

User Surveys

Important Survey Questions

I received 32 responses and the survey was key in helping to inform my design and to decide what features to include in the digital MVP product I create. Out of the 15 questions I asked, three stood out to me most:
  • Bus riders whose primary mode of transportation is the bus and who uses a smartphone.
Survey Question 1:
What do you consider the most important feature in a transit app?
Key Insights:
  • The most desired feature is an option to see their bus in real-time on a map at over 70%.

  • The second highest feature was a tie between a multiple route planner & reminders/alerts at 52.9%.
smarTransit Survey Question 1
smarTransit Survey Question 2
Survey Question 2:
How important is using a mobile transit app?
Key Insights:
  • 57.1% of respondents rely heavily on the use of a transit mobile application or online site when riding public transit.

  • All respondents use some type of smartphone in their daily lives (Apple iPhone narrowly beating out Android).
Survey Question 3:
What are your biggest frustrations riding public transit?
Key Insights:
  • The biggest frustration riding public transit is lateness of buses at 85.7%.

  • The second highest frustration is wasted time waiting for buses to arrive at 71.4%.

  • This indicates that most frustrations are borne out of buses running on time and users wasting time not knowing when to expect their bus.
smarTransit Survey Question 3

User Interviews

Next, I conducted three user interviews and asked a total of 12 questions each while recording the sessions over Zoom.  All of my participants use public transit and use a smartphone frequently in their daily lives.
user interview

Key Insights:

  • Most people use a mish mash of mobile apps or websites when using public transit.

  • Almost all riders use a smartphone of some kind and they interact with it whenever they ride public transit.

  • The most requested feature for a transit mobile app is the ability to see their bus in real-time on a map similar to how Uber and Lyft apps work.

Problem Statement

Human-Centered Design

After synthesizing all the research data, I finally settled on a problem that needed solved in the following problem statement:
smartransit problem statement
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Core Features for MVP

Human-Centered Design

This is the core feature set I focused on for an MVP that meets the scope and client’s requirements.
problem statement
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Survey Question 1:

What do you consider the most important feature of this type of app?
  1. Create an Android transit mobile application.
  2. Implement a real-time bus tracker map feature.
  3. Provide quick access for riders to check how much time before their bus arrives at their stop.
  4. Advertise the Washington & State bus stop so that’s it’s never more than a couple of taps away.
  5. Easy access to transit map to lookup bus and stop information.
  6. Create a route planner feature if time allows.
Core Feature Solution

User Personas

Human-Centered Design

So after deriving key insights and pain points from all my research data, the personas of J'sira Talmadge and Ted Gobble were born.
  • smarTransit - User Persona 1
  • smarTransit - User Persona 2
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Empathy Map

Human-Centered Design

Taking the user persona a step further, I created an empathy map trying to discover what a user may say & what they may be thinking when using a product or service.

Also watching what they do may be different than what they say which gives a better insight into their behaviors.  Furthermore, the emotions a user displays when using a product can uncover pain points and delights around that product.
smarTransit - Empathy Map
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

User Stories

Human-Centered Design

I then created user stories informed by my research, user personas, and empathy map to help flesh out the user flows needed for the core features of the app.
  • smarTransit - User Story 1smarTransit - User Story 2
    Both user story 1 and user story 2 were combined into one user flow.  See next section for the diagram.
  • smarTransit - User Story 3smarTransit - User Story 4
    I created a user flow for user story 3 which can be seen in the next section.  However, for the fourth user story, I didn't create a user flow because of flow issues.  This user story will be addressed in a future iteration.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

IdeatE & cREATE

User Flows

Human-Centered Design

I mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.

  • Account Sign Up & Bus Lookup User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit User Flow 1

  • Route Planner User Flow

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit User Flow 2
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

App Site Map

Human-Centered Design

I then created a static site map that helped me determine what content should go where and what screens I needed to create.
smarTransit Site Map
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Sketching Solutions

Human-Centered Design

Now that I had a better idea what screens and features I needed, I sketched out wireframes informed by the user flows while also keeping accessibility in mind.
research data landscape

  • Splash & Onboarding Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 1

  • Onboarding Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 2

  • Home & Slide Out Menu Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 3

  • Bus Stop, Map, & Favorites Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 4

  • Help, Settings, & Account Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 5

  • Bus Stops, Map, & Favorites Sketches

    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Sketches 6
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Human-Centered Design

After my initial wireframe sketches, I focused on branding to explore some ideas that came to me during the sketching process.  I created a mood board and branding guide with a couple of iterations each displayed below.
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Mood Board

I put together a mood board and color palette to try and capture the feeling I wanted the brand to convey.  

However, once I started building out hi-fidelity wireframes, I found my original color palette did not display as well as I hoped.  I explored other color combinations until I found one that worked better in v2.0.
  • Mood Board v1.0
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Mood Board v1.0
  • Mood Board v2.0
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Mood Board v2.0
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Branding

Branding Guide

As you can see with my branding guide, I went through a couple of iterations as well too.  Even though my second iteration works better than the first, I'm still not fully satisfied with the results.  I plan to continue exploring other color palettes until I find one that truly portrays the feeling I envision for this app.
  • Branding Guide v1.0
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Branding Guide v1.0
  • Branding Guide v2.0
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit Branding Guide v2.0
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Human-Centered Design

Now that I had a better idea what screens and features I needed, I sketched out wireframes informed by the user flows while also keeping accessibility in mind.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Mid-Fidelity Wireframes

Based on my sketch solutions, I created mid-fidelity wireframes for my core feature screens.
research data landscape
  • Splash & Onboard Wireframes
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit mid-fi wireframes1
  • Home Screens
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit mid-fi wireframes2
  • Bus Stops & Bus Routes Screens
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit mid-fi wireframes3
  • Route Planner, Favorites, & Help Screens
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit mid-fi wireframes4
  • Modal & Settings Screens
    I first mapped out user flows informed by the user stories while being mindful of the problem statement, client requirements, and research insights.
    smarTransit mid-fi wireframes5
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Digital Wireframes

Hi-Fidelity Wireframe Iterations

Next, I applied color and images to the wireframes and turned them into hi-fidelity versions.  During this process I changed the branding color palette because I didn't like how the colors looked once applied to the mid-fidelity wireframes.

Here are just a few screens that document the iterations from mid-fidelity to hi-fidelity and finally hi-fidelity with a new color palette:
  • Home Screen Iterations 1
    smarTransit home screen iterations1
    ●  In my first iteration on the home screen, I changed the branding logo slightly and made it smaller.

    ● This allowed me to modify the search bar so it stretches across the entire screen and makes it more prominent and is a focus on the screen.

    ●  I also removed the bus routes listed below the bus stop.  The bus routes now comes up as a modal when tapping on a bus stop.
  • Home Screen Iterations 2
    smarTransit home screen iterations2
    ●  I added color to my home screen to make it hi-fidelity.

    ● I changed the color palette because I didn't like the way the original colors looked.  I still don't like new color palette and continuing to find a palette that conveys the feeling I want from the app.
  • Router Planner Screen Iterations
    smartTransit Hi-Fi Iterations2
    ● On the route planner screen, the only major iteration was the change to a new color palette.
  • Favorites Stops Screen Iterations
    smartTransit Hi-Fi Iterations3
    ● On the Favorites Stops screen, I moved the favorites icon (heart) so it displays at the beginning of the line instead of at the end.

    ● This change makes the icons line up better and is no longer a distraction.
research data landscape

The Solution

Hi-Fidelity Prototypes

Human-Centered Design

I created a hi-fidelity prototype in Figma incorporating the user flows into a product that I could now assess in usability tests.
smartransit hi-fi prototype
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Usability Testing

Human-Centered Design

To assess my prototype, I conducted 2 moderated usability tests that were recorded with mouse movements and audio with the tester voicing their thoughts out loud.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Moderated Usability Tests

Due to time constraints, I was only able to conduct 3 moderated usability guerilla tests.  They both were recorded with mouse movements and audio with testers voicing their thoughts out loud.
Key Insights:
  • Parts of interface the text was too small or clickable area was not big enough resulting in accidental taps.
  • Some transitional features in my prototype was not performing as expected.
  • Not able to pinch to zoom in or out on transit map.
  • Some colors were too vibrant.
  • Wrong navigation in some parts of app.
usability test image

The Hi-Fidelity Prototype

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.
Android SmarTransit Phone

Clickable Interactive Prototype

Click or tap on the phone to open an interactive prototype of the smarTransit bus mobile application.
  • Error Prevention (a prompt asking "are you sure you want to upload this?")

  • Help (we didn't have any FAQ's or walkthroughs, etc.)

Prototype Video

Click or tap on the video to watch a tour of the smarTransit bus mobile application.
  • Error Prevention (a prompt asking "are you sure you want to upload this?")

  • Help (we didn't have any FAQ's or walkthroughs, etc.)
Next Sign

What's Next?

Text placeholder
  • Continue to explore color palettes to reflect the feeling I want the app to portray.
  • Address additional accessibility concerns.
  • Implement a multiple destination route planner.
  • Payment and ticketing system.
  • Supporting additional transit options such as train and trolley.
  • Add pinch and zoom to maps.
  • Add additional scrolling maps.
  • Safety feature for riders due to harassment.

Conclusion

Reflections

Human-Centered Design

While practicing lean-agile methodologies, we often made reference to a human-centered design and implementation process.
research data landscape
  • We operated as a lean Agile team using the SCRUM method in a fast-paced 3-week design sprint.

  • We brainstormed, researched and gathered data, interviewed users, and created storyboards. We also fleshed out user flows and app maps, sketched wireframes, built digital wireframes and interactive prototypes, tested them, and presented our solution to stakeholders, our client, and my assessor.

Important Survey Questions

This was my first true UX/UI project and the four weeks I worked on it was unbelievably intense and stressful but I’m grateful for the experience in learning the process and tools for this industry!
  • It was my first time working on a team in a design sprint. It was challenging, stressful, awesome, very time-consuming, and rewarding! We looked out for each other, we laughed, we bickered, but mostly, we took pride in bringing the client's idea to life!
Orb
reflection orb 3

Important Survey Questions

I spent way too much time on my wireframes by creating hi-fidelity versions instead of lo-fidelity and learned the hard way about getting attached to a design.

Having said that, I need to learn how to work faster especially during the wireframing stage.
  • It was also my first time really learning about accessibility and how to apply it to a design project. At first it was daunting because of all the accessibility standards and principles I had to try and remember. I wasn't confident I could pull it off at first. However, I quickly learned it is part of a continuous iterative process to apply accessibility and eventually get it to a place where the app is both usable and learnable. Awesome learning experience!

Important Survey Questions

It’s very hard at times to design products for users without interjecting bias or projections.  I need to trust the process and let go of my perceived outcomes and own mental models before I can truly understand a users needs.

I have a new found respect for UX professionals and designers on how much work it takes to design great products.
  • I learned to overcommunicate in a team of eight. With that many people working in their own lead roles, it was very easy to overlap and step on one’s toes. Transparency was our mantra to prevent animosity between team members.
reflection orb
Scroll to top