LocalGuide

Project
LocalGuide

Duration
6 weeks

Skills
Product design
Information architecture
Content strategy

Deliverables
User personas
Wireframes
Style tiles
Mockups
Prototypes

Tools
Sketch
Illustrator
InVision    

Overview

LocalGuide, a mock iOS travel app, provides information and recommendations about where travelers can go and what to see in different cities around the world. This six week product design challenge focused on research, ideation, and wireframing all the way through high-fidelity mockups, prototyping, and usability testing.

LocalGuide was my first experience designing a digital product, making it the opening chapter in my journey to become a professional designer. This project focused on learning by doing; however, my goal was to learn what it meant to have a design process. I continuously made connections between the digital product I built and my experiences designing experimental research and educational curricula—as I learned my own process, I discovered my time as a teacher and as a scientist profoundly influence my work, helping me become the designer I am today.

Clickxmockup

Getting to know the customer

Excited to develop an understanding of LocalGuide travelers, I dove into user research to learn about their goals and frustrations.
I synthesized eight user interviews—I loved learning the traveler’s stories and found their memories to be a potent way to unearth their goals and challenges.

Part of the fun, I think, is just kind
of wandering aimlessly.” - Millie

Travelers seek opportunistic experiences.

Users sought flexibility to explore and “stumble upon” unique experiences. They liked having a few planned activities, allowing them to discover gems along the way. This helped them feel immersed in new cities.

What are the local favorites? That’s
the information I want.” - Sean

Travelers want their travel to feel unique.

Users wanted their trips to be special. Tourist traps and misunderstanding cultural conventions frustrated them.
Local recommendations made them feel like they saw the best of cities, while aligning to their interests.

We were able to explore once we’d
mastered the public transit.” - Sam

Travelers want to get around easily.

Users wanted to navigate cities easily. This promoted their ability to wander and immerse themselves. Insufficient information on transportation frustrated them, as this often deterred their ability to find new places.

If friends give us recommendations
we’ll take it.” - Alex

Travelers put emphasis on word of mouth.

Users enjoyed collaborating with locals, experts, and friends. Recommendations crafted a story about places and created a sense of trust and honesty. This personal touch helped travelers decide what experiences were right for them.

The interviews revealed I was designing for an age and socio-economic group like my own—LocalGuide users are upper-middle-class millennial professionals that travel a few times per year. With these insights, I created a user-centered perspective to separate my own experiences from theirs. I’m a complete planner and hate feeling lost—I plan most things out prior to traveling. I also usually focus my travel around outdoor experiences like scuba diving and hiking as opposed to urban cultural activities. Being conscious of the differences between myself and LocalGuide users allowed me to focus on learning how to design for them.

The user interviews painted a clearer picture of what LocalGuide needed to solve for its users, and in doing so, who my typical user would be. I used this research to create a persona for LocalGuide, Ellie. Ellie helped remind me who I was designing for as I ideated, refined, and solutioned my product.

Ellie, age 20

“The Millennial Explorer”

Biography. When Ellie travels, she only plans the bare bones of her travel. She prefers to explore cities by foot or public transportation to gain a feel for their landscape, making them feel like home. She strives to feel connected to new places through the locals who live there. She likes to wander, finding things that are cool and off the beaten path.

Goals.

  • Have a unique and personalized experience
  • Have time to wander, explore, and get lost
  • Feel like a local

Frustrations.

  • Tourist traps
  • Difficult city navigation
  • Misunderstanding cultural conventions
  • Inability to retrace steps

Tools.

  • Expedia
  • Facebook
  • Travel books
  • Maps

Synthesizing user research reminded me of my time in the classroom. As any teacher can report, every class has a distinct personality that influences the way they approach activities and challenges—I used my understanding of my students and their personalities to refine and iterate my lesson plans to fit their needs. Just like my classes, I got to know my users through their interviews—this helped me create a product that solved their problems.

Evaluating the landscape

I conducted domain research to determine how Ellie’s needs and desires fit into the travel landscape. My research illustrated trends and revealed areas of opportunity for LocalGuide.

Yelp

Millions of trusted user reviews and
recommendations for various activities.

User-generated feel of content

Too typical of a look and feel and low diversity of activities

TripAdvisor

World's largest travel site with
millions of unbiased traveler reviews.

Detailed information on specific places

Categorical searching and inability to discover nearby activities

Guides

City guides with offline maps, curated
by experts for before or during a trip.

Expert information and knowledge

Failure to connect people in the moment or help with collaboration

Sidekix

Urban discovery on the go with
personalized and interest-based routing.

Ability to explore while walking.

Required planning for specific categories of desired activity.

Nearify

Discover nearby personalized events
such as concerts and parties.

Opportunistic exploration of nearby activities

Required planning for specific categories of desired activity.

Like A Local

Travel tips from real locals.
Skip the tourist traps.

Ability to explore while walking.

Required planning for specific categories of desired activity.

Different applications connected travelers with local and expert recommendations but few promoted in-the-moment discovery, fostered human collaboration, or created a depth of knowledge necessary to feeling local. The well-known apps felt basic in branding and didn’t feel like they would connect to the unique experience that Ellie seeks—the lesser-known apps like Nearify and SideKix felt more visually off the cuff in their usage of color and imagery.

Additional general domain research revealed an ongoing shift in people’s perception of travel and experiences as gifts. Research illustrated that, “more than three in four millennials (78%) would choose to spend money on an experience or event over buying something desirable.” This literature suggested that emphasizing the local and personalized experiences that LocalGuide travelers seek is also beneficial from a business perspective.

The analytical nature of market and domain research felt familiar to me—however, it was new to examine the look and feel of the applications in terms of color and typography as well as interaction patterns and branding. This opened my eyes to design research and showed me that my analytical background would help me become a better informed designer.

Defining the product

After combining my understanding of Ellie’s goals and frustrations with market and domain research, I determined the opportunity and problem that LocalGuide needed to solve for. I synthesized my research and formulated my product problem statement; I used this as a guide during brainstorming and concepting.

Millennial explorers need a way to discover and navigate both local and curated experiences while traveling, because they wish to feel connected to the places they visit through personal connection, activities, and authenticity.

I created potential scenarios in which Ellie used LocalGuide and utilized her stories to create a foundation for feature requirements

As a cultured explorer, I want to avoid tourist traps so I can authentically experience new cities.

As an exploratory wanderer, I want to effectively navigate new cities so they feel like home.

As an experience-driven millennial, I want to track the places I discover so I can visit and share them.

Ellie’s desire to track places she discovers resounded with me, as I love pinning new and recently visited restaurants. Crafting situations in which Ellie wants help while wandering allowed the planner in me to see through her eyes—her stories reminded me of the mental scenarios I went through when I imagined how certain students would interact with my lessons and how I could account for them in my lesson prep. Through creating her narrative, I developed a better understanding of her other problems and how she might use LocalGuide to solve them.

Brainstorming, building, and iterating

With a solid foundation of potential product requirements and an understanding of Ellie’s wants and needs, I dove into concept brainstorming. I used 6-8-5’s to rapidly iterate on my ideas and drew interaction design inspiration from products like Tinder, Matchbook, and Google Maps.

Rapid sketching was a new practice for me—in the past, my drawings were neat and precise. Gaining experience and perspective on the benefits of differing levels of fidelity and how they relate to my goals helped me become comfortable with this process and embrace coloring outside of the lines. After several rounds of ideation and feedback, I refined a few concepts and sketched wireframes.

Learning
from locals

Expert information from locals curates content to help Ellie avoid tourist traps. It also improves her ability to communicate comfortably with those around her.

Personalized nearby experiences

Location services and an exploratory mechanism give Ellie opportunistic activities as she wanders. The app learns with use, personalizing her unique experiences.

Traveling
with ease

Navigation information across multiple categories and local tips help Ellie feel comfortable in new cities. Navigation tracking allows her to save her favorite paths.

Curating
experience logs

Saving places she loves, wants to see, or has visited helps Ellie keep track of her travel. Logging allows her to look at them later, collaborate with others, and share with friends.

After testing and iterating a paper prototype, I moved on to information architecture to figure out how my ideas could converge. Crafting the IA felt like designing a multi-day lab. Thoughtful design allowed my students to easily navigate between lessons, build their knowledge as they progressed, and locate information necessary to their success. The logical application of how different screens and areas of the app relate was an interesting mirror to organizing complex information for my students.

Creating an application map allowed me to see how the different pieces of LocalGuide would fit together and how Ellie would move through it to complete specific tasks. I sought to simplify my initial designs as I moved into mid-fidelity wireframing.

Onboarding

Launchpad

Discover

Discover example

Users had a difficult time understanding (1) what my bottom tab icons represented and found the (2) different types of buttons I used confusing. In my launch pad, they also didn’t understand the difference between Discover and Learn. Moving forward, I incorporated copy to increase icon affordance and worked to simplify my language and buttons.

Exploring visual directions

To create potential visual directions, I focused on two of Ellie’s influences: exploring and unique experiences. Connecting these back to her desire to feel local and immersed within new places, I created two divergent visual directions.

Crisp and Natural. This direction pulls from the freedom that comes with exploring the outdoors and connecting to the wild side of cities.
Authentic and Undiscovered. This direction drew inspiration from vintage typography and unique street art. It represents the unseen sides of cities and a subculture that often escapes tourists.

User feedback suggested the authentic and undiscovered direction better suited travelers like Ellie who spent more time in urban settings. This feedback allowed me to see the crisp and natural direction was a result of my own traveling experience. Moving forward, I refocused on designing for Ellie. This was an important lesson that taught me to be mindful of not designing for myself during future projects. With a visual direction in mind, I set out to create high-fidelity mockups and a prototype for usability testing.

Refining the visuals

I found the visual part of the design process to be challenging—it took some rough user testing to gain a better understanding the difference between applying visual and user interface design. I was so excited by watching my designs come to life in color, I served myself a healthy lesson of doing too much.

Initial

Final

Initial

Final

Users enjoyed my gradient and colors, stating they felt current, but they were overwhelmed by the over application.
The headers were too large for longer city names and the script and serif fonts felt out of place.
Users felt the blue and red buttons were harsh on their eyes.
I decreased the signal to noise ratio, decreasing my color usage to draw attention to important elements.
I changed headers and body copy to a friendly sans-serif, refining the size to account for longer titles.
I altered the buttons to be a deeper blue and black, accounting for potential issues in accessibility.

After getting a bit trigger happy with color, I learned that less is more, especially when dealing with gradients, and the importance of designing for accessibility, a topic I now care deeply about.

Design solution

I created and iterated high-fidelity screens. After feedback, I refined my designs to improve white space, decrease gradient usage, and clarify typography hierarchy. These changes improved alignment with the best mobile practices and created a more balanced look and feel.

If you’d like to see these in high resolution, please view here.

Watching my wireframes evolve into high-fidelity designs was awesome. It reminded me of how I discovered the Stanford d.school process in my final year as a teacher, when I created a weather vane product design unit for my 7th graders. Whenever I designed new units, I’d first complete the projects myself; this helped me iterate my lesson plans and discover potential use cases that required extra problem solving for my students. Seeing my weather vane go from a sketch to a fully functional laser cut instrument that measured wind direction and speed was a moment that helped cement my decision to transition careers.

Next steps

There are quite a few things I could do to improve this project. However, at the end of the day, LocalGuide represents something beyond the deliverables I created; it taught me the design process and helped me begin to discover my own take on it. From this perspective, it showed me that the abstractness of user interface design was a new challenge—a challenge I was eager to continue with, as I saw it pushed my brain in new ways.

From a deliverable standpoint, there are a few key aspects of the app I’d revise with additional time.

Remove the direction feature. Users stated they would only use Google Maps for this.
Remove the launchpad. It’s an outdated pattern and created redundancies within the IA.
Reconfigure the bottom tab bar to simplify the IA.
Redesign the home screen to place value proposition on the opportunistic discovery feature, the tool users were most excited about.

LocalGuide was a potent lesson in the dangers of feature bloat. I was so excited by my insights and concepts that I tried to incorporate too many things into one application. This resulted in an overly complex IA and redundant user flows. I took this learning and applied it to my next project, Habfit, where I worked to simplify task flows and reduce redundancies in the IA.

What I learned

I grew immeasurably over the six weeks I worked to create LocalGuide. This project challenged me to separate myself from my user and taught me the value in crafting tools like personas, user stories, and style tiles that helped keep my perspective on Ellie. It also illustrated the value of research as both an empathy and knowledge building tool.

Learning and implementing the design process reminded me of many things from my time in the science lab and classroom; thinking about all the ways I can bring my previous experiences into my future and be my whole self as a designer was exciting—a lover of science, people, and making a difference. Watching my idea evolve from a messy sketch to witnessing real people click through my high-fidelity interactive prototype ignited a passion in me for building digital products and helped solidify my move into product design; I will always remember this project fondly.

Back to work