End-to-end design process

Skip to final graphic design

Design brief

AJ is a 26 yr. old traveling salesman in NYC who frequently misses important sales meetings, usually because of unpredictable public transportation. The primary factors include weather, overcrowding, peak traffic, and “other general delays.” The financial cost of missed meetings negatively impacts his quality of life.

Assuming you have access to a repository of public transport and systems data, design an app that will aid AJ to efficiently coordinate his use of public transport. Additionally, assume you have access to public transportation APIs, embedded mapping software, the user’s calendar and machine learning technology.

Three phases to my response

1. Research / empathy
2. Create / shape
3. Prototype / test & learn

Experience map

User interview

I immediately thought of real sales people I could talk to for a better understanding of what it’s like hustling between important off-site meetings. Since I am rarely late myself and not in sales, I craved more context of AJ’s situation.

I conducted a 20 minute interview with a friend Connor C. who has been in tech sales for about 6 years between 2 companies. I asked what apps he uses for work, and got a better understanding of his entire experience around conducting a sales meeting.

Human challenge

From the brief: AJ often fumbles sales opportunities due to unpredictable conditions and transportation (weather/traffic/other)

Immediate solutions

I found four high-level solutions;

1. Predict public transportation better
2. Provide transporation alternatives
   • May cost more
3. Bring the meetings to AJ
   • Requires facility
   • Less control of attendance = less certain effectiveness
4. Host virtual sales meetings online
   • Less personalized experience = less effective to yield larger sales opportunities

App concept

ReadyRide is a mobile app to help AJ get to his sales meetings on-time. It uses real-time data on public transportation routes and highlights the critical departure times required to stay on schedule. It will factor in historical trends about ridership and can also recommend alternative transportation options ranked in order of price.

Storyboard scenarios

Good user stories are critical to design. I like to start with a “nightmare” scenario involving various challenges and then a “dream” scenario involving the product as a solution. Someone once said it's not a true fail scenario if it doesn't involve getting stuck in the rain.

Fail scenario

App success scenario

Design considerations

A. I had an early question about if I should lean towards lofty futuristic concepts or stick to something practical. I chose to go with the most simple and practical approach I could. I wanted to develop something a good dev team today could build quickly without issue.

B. I gathered from the brief that AJ’s primary issues stem from (a) poor schedule management and or (b) inaccurate commute predictions. With this in mind you will notice I am not designing a new mode of transportation but, rather a weather/traffic aware scheduling & reminder system with timely and realistic transportation options.

UI feature ideas

1. Schedule views that considers transportation (between locations)
   • Transportation delays
   • Peak traffic times
   • Other common issues
2. Multiple routes between meetings
   • Optimizing for speed
   • With various transportation options
3. Schedule view that considers weather in given locations & times
   • Departure location
   • Destination location
4. Connections to ride-sharing alternatives (Uber/Lyft)
5. Map view of schedule

Contextual feature ideas

• Location awareness
• Weather awareness
• Meeting attendees
• Calendar inputs (sync)
• Notes (for agenda and other)

Technical considerations

Early wireframes (visual brainstorm)

Navigation & icons evolution

A critical part of any UX, navigation deserve significantly more attention than most interaction patterns.

1. I began with simple and familiar shape outlines shooting for general legibility.
2. Next, I moved to more distinct shapes focusing on positive and negative space.
3. I added a color splash and began realized I wanted the icons to sit inside a blue navigation bar.
4. Finally I rendered the symbols in primary white to bring back the feel of a bold negative space.

* Disclaimer - my visual design has evolved since this 2017 project.

Prototype

I used Sketch with InVision to build an interactive prototype that could be user tested on any smartphone or computer.

User testing

I only ran one 3-minute user test on the day before this project was due. Although the feedback presented much more work to be done right at the last moment, I learned invaluable ways to better express my original vision.

Check out the final graphic design