LocalGuide, a six week design case study
LocalGuide, an iOS travel mobile app, provides information and recommendations about where people can go and what to see in different cities around the world. I thought it would be fun to share my design decisions and iterations during this challenging and rewarding process.
**LocalGuide was a UX/UI project to learn and practice user-centered design principles and methodologies.
LocalGuide App
MY ROLE
User Researcher, UX Designer, Interaction Designer, Visual Designer
DURATION
6 Weeks
TOOLS
Axure, Pencil sketching, Proto.io, POP, Photoshop, Illustrator, Sketch 3.6
DELIVERABLES
User Personas, Competitive Analysis, Usability Testing, Wireframes, Prototypes, Branding, Mobile/Web Design
CHALLENGE
A series of interviews were conducted on prospective users for LocalGuide. LocalGuide needs the research analyzed and the user experience and user interface of the app designed.
PROCESS
User Research
Goal: Understand the target audience and brainstorm design solutions.
In order to summarize and communicate research trends and patterns to others, I created user personas. The user personas helped us to understand our user’s mental model, environment, skills, tasks, and any other factors critical to understanding their behavior pattern. It’s very important to understand our users and to design for a specific somebody.
Product Requirements and Users’ Goals
In order to keep the effort focused and focus on the problem I am solving for the users, the problem statement is defined. The problem statement was referred to multiple times through the design process as I was designing a solution for the users.
I also brainstormed potential product features of the LocalGuide app and the users’ experience goals. I defined how I want the users, ‘Ryan Faye and Sandra Villanueva’, to feel while using the app.
6–8–5 Exercise
The next step of the process was to generate as many ideas and come up with potential solutions for the users. One method for doing this is the 6–8–5 exercise. I created 6 to 8 sketches in 5 minutes. I repeated this exercise as many times as needed to come up with different concepts and to refine my ideas.
This fun exercise helped me work out my ideas before taking those potential solutions into Illustrator or Sketch.
Interaction Design
Goal: Create wireframes and prototypes for the LocalGuide mobile app.
Competitive Analysis and Visual Study
After sketching possible solutions, I explored what competitors already exist and identified the attributes, characteristics, and other important aspects of competitors to the LocalGuide App.
For the visual competitive analysis, I created Pinterest boards that collected the visual interfaces of LocalGuide’s competitors. The visual competitive analysis helped me gather visual inspiration and familiarize myself with existing design trends.
Based on the sketches from the 6–8–5 exercise, I explored the ideas that were fitting for our user persona. I created a series of detailed sketches for the purpose of making it into a low-fidelity prototype. I designed the task of a user choosing a destination, choosing places to see, and adding that activity to their trip itinerary.
Paper Prototyping
After designing the user flow, I created a clickable low-fidelity prototype using the POP app. The clickable prototype is critical as it creates a platform for engaging users early in order to gain feedback and insights before going into a full build of the product.
Testing
I recruited 5 people who fit the user persona to test the prototype using POP. I asked the participants to complete the task and have them think aloud while they perform a task. When participants say something interesting or do something unique I asked follow up questions.
Key insights:
- The Floating Action Button could be more prominent. Users had a difficult time locating and interacting with the FAB.
- 3 users wanted the ability to browse the app before creating an account.
Mid- fidelity prototype
I iterated on the feedback and insight I received from testing and created a mid-fidelity wireframe using the prototyping software, Axure.
User task: Log into Local Guide or browse and choose Chicago as a destination. Add seeing Cloud Gate to your trip itinerary.
Instructions:
Email: designation@gmail.com
PW: design
Create Trip screen
‘Where are you going?’
- Type ‘Chicago’
Chicago Main screen
- Press ‘SEE’
Search Chicago Places screen
- Press ‘CLOUD GATE’
Cloud Gate screen
- Press (+) CTA button and press Apr 16 button
Chicago main with chosen date screen
- Press Apr 16 button to go to Chosen date screen
High- fidelity prototype
The following is the feedback I received for the Axure protoype:
- Use grey-scale for mid-fidelity prototypes.
- Affordances: Could do a better job showing that list items are interactable.
After iterating on the feedback, I designed the high-fidelity screens of LocalGuide using Sketch. I designed the screens for the navigation and added more screens to develop microinteractions.
After designing the screens, I created the high-fidelity prototype using the software program, Proto.io. Proto.io allowed me to create richer interactions and simulate the mobile experience. I found inspiration from the Airbnb mobile app and testing other travel apps. I tested the prototype with users and received positive feedback on the full flow and good success states when users complete the task.
Thank you!
Thanks for reading! It was a lot of fun researching, testing my ideas, iterating on feedback, and designing user flows. I’m proud of designing the LocalGuide user experience and I hope that LocalGuide can help people find information and recommendations at their next travel destination!
**Part 2 covers the process of creating the LocalGuide brand and marketing campaign — check it out!
Contact me at audreyforonda@gmail.com for any questions and feedback :)
