MetroHop
Project Overview
This project aims to develop a responsive design for a public transit system on mobile and iPad platforms. It allows the users to navigate the public transportation easier, offering features such as browsing routes, finding the optimal way to reach a destination, and manage tickets. By implementing the new design, the aim was to elevate customer satisfaction and generate a boost in ticket sales.
Key Data
Role: Visual designer
Timeline: 3weeks
Tool: Figma, Photoshop
The Process
Process 1: Conducting design research
Process 2: Creating mockups
Process 3: Redesigning
Process 4: Final design
The User
The app is targeted to the user who takes the public transportations regularly. The age range is pretty wide from kids to elderly people.
The Goal
The goal of the design is to provide the data rich information for all the generations. The user interface needs to be simple, focusing on clarity over style, and emphasizing important information such as CTA.
Design Research
My initial step in developing the app was conducting research. During this phase, I focused on examining how other apps manage data-rich information with a clear hierarchy, as well as the visual elements such as colors.
Getting The Ideas
Through my concept research, I observed that many apps utilize multiple colors to represent different modes of public transportation. Additionally, I noted that breaking down information into smaller chunks aids in distinguishing between elements.
Style Tile
Creating the style guide below enabled me to maintain consistent design for both mobile and iPad apps. By visualizing key design elements such as color palettes, typography, and interface components, the style tile provided a clear visual direction for further development.
Sketch/Mockup
Drawing insights from research and the style guide, I created rough sketches and started developing initial mockups for both the mobile and iPad versions of the app. While ensuring consistency with the identified design elements across both platforms, I discovered that adjusting the layout and positioning of elements on each screen was crucial in optimizing the user experience for different device sizes.
Initial Design
Based on the sketches and mockups, I developed my initial design. The primary color chosen was green, aiming to evoke a sense of environmental consciousness. I employed multiple colors to differentiate between various modes of public transportation. Additionally, I utilized a grayish-green shade to present data-rich information within small sections.
Initial Design
Redesigning / Final Design
The problem : Lack of Attraction
I initially chose colors for the design based on color theory principles. However, I received feedback that the color contrast was insufficient, and the choice of shades of green and black lacked attractiveness.
The solution
I explored additional color options and conducted brief interview sessions with friends who regularly use public transportation. The feedback revealed a negative perception of both public transportation and associated apps, particularly due to the inaccurate information about arrival times.
This insight prompted me to make a shift in the color strategy. I decided to incorporate shades of blue into the design, aiming to evoke feelings of reliability, and orange to signify joyfulnes in relation to public transportation services.
Final Design
Success Metric
While this concept project did not involve formal success rate measurement, I've identified key metrics for future design iterations. User satisfaction and sales figures compared to the previous design will be instrumental in evaluating the effectiveness of this concept.
Lesson Learned
Listening To the Real Voice
My initial color choices were based on my belief that public transportation is better for the environment. However, this superficial idea resulted in a lack of attractiveness in the color harmony of the mockups, and some of the color contrasts failed to meet accessibility standards.
Having interview sessions with the target users provided me with valuable insights about public transportation and its associated app. It helped me reconsider how I could address their concerns with my design. This experience has taught me the importance of incorporating the user's voice into designs.