Camino App
Concept for a day planning app to support the modern urban commuter.
Role: Research, Product Design
Type: Academic Project
_Services
-
Secondary research
-
User interviews
-
Information Architecture
-
UX/UI Design
-
Interaction Design
-
User Testing
_Deliverables
-
Design research database
-
Persona
-
User Journey
-
Wireframes
-
Hi-fi mockups and prototypes
-
Interaction Animations
-
User test plans
_Outcomes
This was an academic project which didn't get developed or go beyond design iteration after 1 round of user testing.
​
The primary outcome was gaining experience in the discovery, design development and user testing process. In particular, I was able to explore interactions and learn animation software to create hi-fidelity interactions that are hard to get OOTB with Sketch or Figma.
Value Proposition
Fully featured so it does more than tell you where to be.
It tells you how to get there.
Tells you what you've planned next, and what you didn't expect. Life happens, and your planner should help you out when it does.
Camino makes sure you’re a few steps ahead of everything.
_Understanding the Problem
The biggest challenge was that most calendars only showed your scheduled events, often without any other context such as weather or travel time. To really be prepared when leaving your home, you would have to check at least three apps; weather, calendar, and transportation.
When’s the next train?
Do I have time to grab a coffee before my meeting?
Background
As we're seeing an increase in people who are either commuting further for work, or leaving the traditional cubicle to work flexibly in various locations; it's safe to say we’re spending a lot of time on the go.
The average commuter in the U.S. spent an extra two and a half hours on the road last year*. If you're in a city that relies on the public transportation system, you can expect to commute nearly twice as long as the average American**.
Sources: * Gabriela Saldivia for NPR, ** Jeff Desjardins for Visual Capitalist - infographics from Title Max (www.census.gov, www.trulia.com)
Will I need an umbrella?
Oops,
running late..
..I should send a text to let them know I'll be there soon.
How might we...
o1
Streamline coordination of schedule with transportation.
o2
Avoid unexpected travel conditions.
o3
Enhance the experience of time management.
USER INTERVIEWS
EMPATHY
USER TESTING
SKETCH
INVISION
AFTER EFFECTS
My Approach
By interviewing the primary user group; the On-the-Go Planner, I found out how they organize their time (meticulously), their habits (precautionary), and what products they currently use (think tech giant).
After wire-framing and creating a low fidelity prototype, I was able to observe how the OG Planners moved through the app and completed tasks. With that I was able to revise the flows, and develop the interfaces.
By establishing the branding, iconography and typography with style sheets, I formed a beautiful system that reinforced principles of design. Finally, my high fidelity wireframes were brought to life with animated interactions.
Discovery
Looking into the nature of the urban commuters routine, I was focused on finding out how they’re getting around everyday. Collected data shined a light on rising commuter times, the frequency of public transportation disturbances, and our evolving “work spaces”.
By collecting qualitative and quantitative data, I found that:
> 30% of sample group users said they spend about 8.5% of their 15-17 hour day commuting.
​
> 50% saw themselves spending more of their work day outside of a standard office desk (ie. shared work spaces, freelance work, home situations)
​
> 60% of calendar events were location dependent. 25% said that they check the weather more than once a day and that the weather affects how they commute to their destinations.
​
> 8 out of 10 people went straight from their calendar or scheduling app to their navigation app to calculate trip duration and route information. They also expected to see multiple modes of transportation, and routes for comparison.
​
> If taking public transportation, 2 out of 10 said they check yet another app to see service change information.
​
> 7 out of 10 people said they would want to see service/traffic updates without leaving the app.
USER PERSONA for the business partner/Mom, aka the On-the-Go Planner, aka Super Woman.
USER PERSONA for the young entrepreneur, who's Planning On-the-Go, and shifting focus from work - to passion - to play.
USER JOURNEY MAPS outlined their fast-paced routines, focusing on the various touch-points from discovery to conversion.
NAVIGATION MAP was structured through card sorting sessions which revealed the intuitive groups and sub-categories.
_Lo-Fi
This research and mapping led to an ideation phase through sketching and then low-fidelity wire-framing. The focus in every iteration of the experience was to:
​
> Communicate scheduled events along with travel time
​
> Connect the scheduled events with maps and travel directions
​
> Provide streamlined feed to public transportation time tables and status
​
> Create a daily calendar that aligned with weather conditions
_Prototyping & Testing
> Mid-Fi Prototype
> Moderated User Testing.
> First-Click Testing
> Follow-Up Interviews
​
​
Users were given a set of tasks to complete during the session with minimal guidance. Observing which elements misguided the user, and how quickly the tasks could be completed. Following up with interviews provided users impressions, expectations and suggestions.
Because of the high level of functionality, the user needed to have an obvious cornerstone for orientation. By revealing redundancies, I could pair down pages for clearer, more streamlined features which progressed into the final design.
NAVIGATION BAR needed to be clearer while navigating each feature. The paginations along with transitions were too minimal.
FORECAST should be shown alongside the calendar view, similar to the daily schedule. Use principals of proximity and common ground to better differentiate/group information.
TRANSIT should have a stronger information hierarchy and provide context of proximity to user.
_The Solution
With clear feature designation in the navigation bar, users will have no problem moving back and forth within pages. A static footer grounds the app, making it easy to multitask and pick up from where you left off.
Coordination
Having dates and time alongside the forecast consolidates the weather and calendars, adding context so you can better prepare for the day.
Planned for a day at the beach on Saturday, but the forecast predicts rain? No worries! Thanks to preemptive notifications, you have time to reschedule with your friends for the next sunny day.
Sometimes, time just isn’t your friend and you end up running behind schedule. We can relate. With notification prompts to snooze events, you can send predictive text messages to anyone connected to your calendar event. Already on your way? Let your friends know with a predictive text and share your location until you arrive!
​
Seamless Transition
The ability to tap on a location dependent event and be brought directly to the preferred transportation method (or quickest if not defined), not only cuts task time by 50%. Users schedules are updated when unexpected travel conditions occur, with automatically adjusted travel time and route suggestions.
Efficient
Public transportation can really throw a wrench in your smooth schedule. Checking arrival times or rerouted lines usually requires (yet another) designated application.
With saved stations and lines, you can have everything you need to know at the swipe of a finger. Using your location, you’ll have access to all your most convenient options.
Tone of Voice
o1
Always relating to the position the user is in.
o2
Serene. Optimistic. Approachable.
o3
Dependability through accessibility.
Graphics
Playful layers floating with shadows, and foggy, atmospheric transparencies provide an almost tactile experience.
Contrast, line weight and depth translate to a consistent visual hierarchy.
Relaxed colors and rounded edges promote calm, but a diverse range provides context and flexibility.
Motion
Simple, easy transitions express the ease of using Camino to move through your day. Mico-interactions reinforce the layered heirarchy, grounding the user and providing instant feedback.
Daylight Blue
#F1FFFA
Midnight Blue
#3D5A80
Brand Accent
#FFAC81
Accent 1
#FFFD98
Accent 2
#4AA59E
Accent 3
#B1DDF1
Accent 4
#F85A3E
Typeface
Avenir is french for “future” so it seemed fitting for an app that prepares you for exactly that.
Composition
Stacked blocks of information takes advantage of vertical space. The static, easily accessible footer, orients and guides easily between features. Static headers prompt actions such as search and moving through sub-pages. Easily accessible scrolling elements located above the navigation bar, are grouped by common ground and proximity.
_Learnings
A large portion of what keeps people busy throughout the day never makes it into their calendar. Small errands and chores can take up to 10% of your day. To incorporate a ‘reminder’ feature into Camino, would tie a ribbon on the whole application.
Some reminders may be location dependent, in which case using location services would be helpful for appropriately timed notifications. I would focus more on non-time sensitive aspects of users day to day life. However, this would be an opportunity for a killer app update!
