Wireframes, high fidelity comps, prototype
I created a set of wireframes to guide the design of the interface. After feedback from critiques I did iterations on the design. I used Sketch and InVision to create the high-fidelity comps and a sample prototype. Some screens are shown below. This is the link to the prototype and this is a link to a complete set of screens.
I designed a responsive marketing site for the product. I like to start the design for mobile first and then translate to browser level to create a seamless experience at multiple breakpoints. My copywriting reinforces the brand by using the brand name as a verb. I also created an interface style guide to help future stakeholders with the design direction as the product evolves. Use the links above to view the full content.
Responsive marketing site and style guide
The design problem, challenge and research
The CTA reported a 4.6% decrease in ridership at year end 2016. It was experiencing a yearly decrease due to low gas prices, delays caused by downtown construction and competition from ride sharing businesses like Uber and Lyft. The CTA commissioned Designation to design a digital product that helps riders identify transit problems and find alternate routes before and while commuting. The UX team created the chart below to describe the typical commuter journey and product opportunity.
Visual competitive analysis: My team researched and analyzed the competitive landscape and created a visual competitive analysis to help understand the market and find opportunities to solve our specific user needs and design a product with the best value.
Personas and design principles: The UX team created two user personas from their research. The UI team created a set of design principles to guide and validate our future design decisions and retain a user centered approach.
Defining the mood and style
Mood boards: I created a mood board for each user persona with the design principles in mind. Each mood board reflected a design direction with visuals that would evolve into a style tile to guide the design of the app screens.
Style Tiles: Once the mood boards were defined, I created a style tile for the preferred design based on feedback from the cohort and instructor. The style tile defined the UI elements that would be used in the high fidelity screens and prototype. A segment is shown below and here is a link to the full style tile.
Creating the brand
The brand name: I did ideation and sketching using words from the commuting experience of potential users. My goal was to arrive at a memorable brand name that could be used in conversation. Recent ride sharing brand names now appear as verbs in daily conversation i.e.
"Are you taking the train?" "No, I'm gonna Uber it." That is powerful branding!
The logo: Along with the words I sketched visuals in search of a visual and verbal combination that could create a strong brand logo and appeal to the users. I arrived at the logo below. It also translates nicely into an app icon for the mobile screens.