VIA is an app that allows users to discover popular places and hidden gems along their transit route. This app provides estimated transit times and cost information along with relevant information such as parking or tolls. The same app will also allow the user to view their recent trips or save places they would want to visit in the future.
This app was presented as my project on the topic of transit during my accelerated UX Design course at BrainStation. Working on this project allowed me to learn how to work with a short timeline as it was an accelerated course.
Accelerated Course Nov 2018
User research • Ideation/Sketching • Information Architecture • Wireframe and Prototyping • Usability Testing
As a fellow traveller, I am constantly looking at maps for restaurants, attractions and to discover new places. The challenge of switching back and forth between different apps presented an opportunity to create a platform that would help discover and explore while budgeting the cost of time, transit, parking, and tolls, all in one app.
- How might we design one app that consolidates features the user likes from other apps?
- How might we add an inspiration feature?
- How might we save favourites or recent routes?
- Too many options
- The user might get overwhelmed
- The app will open a separate map app for directions
- Hard to find places unless it’s on their list
- Cannot enter place name on “Where to?” input – have to put the full address
- Transit options and cost are not on one page to see which would be better for a user to make a decision right away
- Does not offer parking rates
After conducting user interviews, I was able to identify insights, pain points, and behaviours that will allow me to craft personas in order to navigate my designs for the target users.
- Users are using more than one app to determine the distance and costs
- Users are finding places through social media, web search, and word of mouth
- Finding new places is their source of inspiration
- Users plan their transit routes based on the cost of ride or time (i.e. how many passengers are riding with the user)
- The user chooses their transit routes based on convenience and comfort
To better understand human interaction, I designed an experience map to lay out the user’s journey when using the app. This way, I can visualize the product flow and set constraints to stay on track when making design decisions.
User Flow (Task One)
After identifying the main objectives, I created a task flow, thinking about how a user would interact with the app. The user flow below depicts a new user going through the onboarding and checking out the “Discover” page which provides suggestions and inspiration on new places they can discover, and is then given a list of transit options with the associated costs. The user is then shown a live map with their chosen route defined by their transit choice.
Ideation & Sketches
Once the main task flow is clear, my initial sketches explored various iterations of the user flow using inspiration from other existing UI components and functionalities. I dove deeper and visualized the different task flows of each persona.
PERSONA 1 – TASK 1 SKETCHES
PERSONA 1 – TASK 2 SKETCHES
PERSONA 2 – TASK 3 SKETCHES
PERSONA 2 – TASK 4 SKETCHES
During POP testing, I learned to better understand users and discover the best experience through iterations. A few things I learned:
- Missing pages and functional back buttons
- Header and footer needs to be stationary after logging in to access the main features of the app
- Transition options for a better flow for the user
After various iterations and having the foundation laid out, I started wireframing the main task flows in Moqups (used at the time of the course). With the time constraints to finish this project, I conducted usability testing of how a user might use the app with the different task flows. In the short timeframe that we had, I was only able to do mid-fi wireframes and didn’t get to do any hi-fi wireframes or user interface designs.
After conducting user interviews, sometimes different problems arise from the users’ point of view that is opposite from the initial idea. It is important to ask the right questions.
Testing, testing, testing. Testing and iterating are a continuous process.
Interviews, sketches, and prototyping allows for inexpensive changes throughout the process and refine the user flow ($1 sketch vs $100 code).