A UX Case Study on Mobile Design — Project Diary
The brief for the project in collaboration with General Assembly was to conceptualise new features for the PTV app while adhering to the existing brand.
Our goal was to deliver an interactive prototype that will:
- better support multi-modal travel with particular emphasis on travel planning and avoiding delays
- promote a shift to walking and cycling by integrating data and features from Melbourne Bike Share, and
- better promote ticketing information and purchase.
Over a 2-week design sprint, I worked alongside two UX designers and centred our interface design for iOS. We all worked on all aspects of the design process, used Trello to organise and prioritise our tasks, and applied Scrum to manage the project.
Week 1 —
With only 4 days, our team devoted the first week to research and synthesis. Each day started with a stand-up and ended with a group check-in, having both sessions time-boxed.
We started our research process by identifying the things we know, things we don’t know and things we would like to know more about using the KWL chart. We used the ideas we generated to develop a user survey that we sent out to get some quantitative data.
Take aways —
- Apps either started with a map or a journey planner
- Most apps used tab bar navigation for easy access to primary go-to tasks
- Functionality was high across the board
- Many apps specialised in certain areas
From the online research, our key considerations were to organise and structure the app pages for quick access to primary go-to tasks, and to revisit and rationalise content + context of the current app pages to improve the functionality.
Using the insights from the previous day, we developed a discussion guide which we used to run in-lab interviews as a team — taking turns to take notes while one member conducted the interview. We also conducted individual interviews overnight to ensure we had enough user research to work with.
This day was about synthesising all of our research data.
- Commuters checked the PTV app before their trip, when at the station and along different touch points in their journey
- Commuters took shortcuts
- Commuters used different transport/navigation apps for different “challenges”
- Information was presented in such a way that’s not optimised for a mobile device
- App perceived to have unreliable and/or displayed incomplete information
We also mapped out the PTV app’s current user flow and put it side-by-side with one of its direct competitors for further analysis.
End of the week — this was a big day to keep the project on track! We had a few tasks we set ourselves to complete before the day was over.
By referring back to the themes and insights that emerged from our affinity mapping, we brainstormed on “how might we” address these by coming up with features on post-it notes to form our user mental model.
Through a group discussion about our data and research, we defined two clear user groups: familiar vs unfamiliar commuter — over which we created our personas.
For our research to come full circle, we mapped out the PTV app’s current sitemap to work out what was available and where all the information lived within the application.
- All menus were hidden under the hamburger menu and the current homepage was driven by favourites and nearby next 5 (on the pre-condition that it has been set).
- Existing features like journey preferences were often missed because the interactive design was not intuitive enough for the user to identify within the context of the page.
- From our user research, people would either use the maps or journey planner.
- The existing structure of the app was not intuitive enough for the users.
Using the insights from our research, we then ran a time-boxed group workshop to arrive at our problem statement:
“Users need a way to find timely and relevant information to help navigate the public transport Melbourne system with the least amount of effort.”
Week 2 —
This week we developed and implemented our ideas, and presented our solution. Each day started with a stand-up and ended with a group check-in, having both sessions time-boxed.
Our solution statement:
“We believe that by restructuring the PTV app and rationalising the content pages based on user context, that we can help users navigate the Melbourne transport system with the least amount of effort.”
Feature Prioritisation and MVP
We pulled out the features we came up in our user mental model and plotted them in a matrix. We then voted on the features based on importance vs. effort, and that met the project brief for our MVP checklist.
Recommended Sitemap and User Flow
Based on our user research and online information on mobile navigation, we carried out a card sort based on how users used the PTV app (hotspots, traffic) and designed a sitemap that lifted the key tasks that users were after when using the app.
We kept all others from the existing design under the More Options tab bar menu so users can still access these pages easily.
We also introduced floating buttons in place of most local navigation for better affordance allowing users to get information they needed within the context of their journey without having to leave the page.
After locking down the new IA structure and the list of features, we designed the following user flow to enable our personas to achieve their goals and to fulfil their needs when using the PTV app.
This also helped us when ideating on the content requirements for the app pages.
It was the day when the pen hit the paper! Our team wanted to quickly generate creative ideas through crazy 8’s. We then had a group review, critique and voted on ideas for each screen, and followed this through with a group sketch of our paper prototype.
We had two iterations to our paper prototype which was tested with six users in total. Some of the findings from our usability testing included:
- Favourites (positive) was a preferred tab bar navigation over disruptions (negative)
- Separating the Bike Share and Cycling floating menu buttons did not make sense for most users
- The Nearby (copy) tab bar menu caused a lot of confusion for users
- Users were not sure what the ‘Hide’ icon was meant to do
- Users wanted more information about the bike share system
- Users were expecting to be taken to the journey planner when clicking the Find icon on the tab bar
- Users were unable to distinguish between the origin and destination on the map once their journey has started
- Users were unsure of what to see on the information carousel when their train/tram/bus journey has started
Using the feedback from our usability testing, we moved our paper prototypes to wireframes using Figma — this allowed us to collaborate whilst working on assigned screens individually.
We spent a fair bit of time testing the clickable prototype with new users on this particular day. We received more constructive feedback and were we to iterate on our design further, the following are some of the areas we have earmarked:
- Support for offline maps and navigation
- Pay for bike share in-app
- Push notifications for disruptions
- Myki integration
- Greater accuracy for bus timetables
As a group, we also worked on organising and preparing for our client presentation.
The last day of the sprint was devoted to group presentations and critique.
Our team took some time to have a group retrospective to reflect on what went well, what improvements we could have made to our process and delivery as well as personal feedback to support each other in view of future endeavours.
Having trust while holding each other accountable helped in the success of our project. Using Trello to elevate transparency and running daily stand-ups allowed us to put a plan in place while giving each other space through the process. I found re-focusing and re-harnessing effective when I felt opposed to an idea and made the overall demands of the work less stressful.
I’m Maidy! I am a multi-disciplined designer from Melbourne who brings empathy, passion and commitment to my work. I am inspired by people and their stories; and, always looking for ways to improve user experiences with products and services. Let’s connect!