UI Feature Design
2019
CityMapper x Compass
CityMapper x Compass is a collaboration that helps city-goers have a more complete transiting experience. CityMapper’s new integrated feature provides the cost of each trip while giving the Compass transit cardholders the option to link their accounts to CityMapper and manage their cards on the go.
Roles
Content Design
UX & UI Design
Art Direction
Visual Design
Research
User Testing
Tools
Figma
Adobe Photoshop
Adobe Premiere Pro
Type
Team of 4
Date
December 2020
5 Week duration
​
Contributions
For this project, I was involved in the visual design, design process and lead in content design. I conducted user research alongside interface design and user experience design of the application, more specifically led the visual design of the homepage. Moreover, I was profoundly involved in art direction decision making, particularly in the color choices. I ensured that the colors were engaging, encouraging, and trustworthy while presenting the Moleskins brand itself. As the lead content designer, I worked to produce and iterate images alongside a short video clip to best communicate the idea behind the project. The project was done remotely in 5 weeks period of time.
Process
01
01
CityMapper x Compass
CityMapper x Compass is a collaboration that helps city-goers have a more complete transiting experience. CityMapper’s new integrated feature provides the cost of each trip so users can make informed decisions on which route best suits their needs. Not only this, but Compass cardholders will be able to link their accounts to CityMapper and manage their cards on the go. This way, Compass users can make sure they have enough stored value for each of their trips, as well as conveniently reload value through CityMapper anytime and anywhere they need.
02
02
What is CityMapper
Citymapper is a public transit and mapping service app that collects and combines data for all urban modes of transport ranging from walking to cycling, with emphasis on public transportation.
This app excels in cities with extensive public transport because it is able to access all types of rail and bus maps (depending on the city you live in) in order to provide the best route possible to the desired destination. As well as updated information on delay and line closures, it also has information on ferry and bike and car-sharing.
03
03
Research and Analysis
We sent out a survey which 30 people completed. These people were both users and non-users of CityMapper, their age range was 18-40 with the biggest group being aged 22-25.
The users that have been interviewed were aiming to use this app to navigate them to their desired destination with the fastest and easiest route possible, using public transport available in their area. Moreover, the reason why they choose public transportation as their method of transportation because it was not only convenient but also cost-efficient.
04
04
Persona
From this research, we were able to create a user type to design to help us design a new feature targeted to this.
New Features
01
01
Calculating the Cost of Transit
Although transiting can be very cost-efficient, each route can vary in price depending on how many zones you cross (with Translink). Especially for those who are concerned about saving everywhere they can, helping them find the most wallet-friendly route can add up over time. This is also perfect for those traveling who don’t mind leaving a little earlier to save some extra money.
​
Recommending a route that has the least amount of transfers so you don’t have to pay extra fares or recommending a bus over Skytrain so you just pay 1 zone instead of 3 are examples of how this feature can help users save up for their other goals.
02
02
Sign-In for Compass Holders
CityMapper now offers a new feature, where users can link their Compass card in the app and it calculates the cost to the destination using the value stored in their card.
03
03
Register the Compass
If they don’t have a Compass card they can register for one from the app. The app will take you to the Compass card website so you can register for a new one there. Once finalized it will appear in the app.
04
04
Add Stored Value
Not only users can view the stored value of their Compass card, but they can also add to the stored value if necessary. The stored value will appear on the homepage so it can inform the user when it is below a certain amount.
05
05
Request U-Pass
If users are U-Pass holder it will show you the status of your card and will allow you to request for nest months pass (Figure on the left). If users are willing to order a new Compass card, they can order a new one and the app will redirect you to the Compass website to order a new one (Figure on the right).
Business Value
Value for Stakeholders
By leveraging Moleskine’s existing art challenges and allowing graphic artists to create their own challenges we can increase customer engagement with Moleskine’s brand values and provide long-term engagement by making Moleskine a habit.
For CityMapper
Helps CityMapper to become the primary navigation tool for users while travelling locally or abroad. Rather than just providing the fastest route, it also provide the best routes for travellers who want to save money. Lastly, it encouraging more consistent and frequent use from users
For Compass
Encourages customers to create graphicIt allows Compass holders an alternative way to manage their accounts. Showing price differences when using Compass cards encourages users to sign up and reload more. It helps to better plan of trips and allows transiters to make the most of the Translink systemart more consistently and improve their art skills.
Takeaway
Through this project, I learn how to learn the context and main users of an existing user interface application and help to make it better and improve it. The user testing conducted hep to understand how people will interact with an application and which helped me to come up with improvement ideas to increase the quality of an existing interface.