GramCity App
Case Study
A Design Sprint
GramCity helps people find the most Instagram-able places in any city they visit.
PROJECT OVERVIEW
GramCity project is a five-day design sprint where a design need was identified, and through prototyping and user testing, a determination on the validity of the proposed solution is concluded. This fast-paced process requires focus, prioritization, and efficient time management.
MY ROLE
UX|UI Design
Research Synthesis
Prototyping
Usability Testing
THE PROBLEM
Nick and Sarah, the two primary participants in the study, both enjoy taking photographs when traveling to memorable locations and cities. Neither likes to spend much time researching places or moving about looking for the perfect spot. They are looking for that perfect Instagram-able location.
Mentor:
Noemi Selisker (Springboard)
THE SOLUTION
Based on the users' needs and pain points, GramCity must provide the
following solutions:​
-
The ability to compile a list of Instagram-able places according to user preferences and locations.
-
Scalability of easy to use search filters to create either general or specific results.
-
The ability to help users customize and create an Instagram-able travel plan/itinerary.
THE PROCESS
DAY 1
UNDERSTAND
(1/2 day)
DAY 2
DIVERGE
(1/2 day)
DAY 3
DECIDE
(1/2 day)
DAY 4
PROTOTYPE
(1 day)
DAY 5
VALIDATE&LEARN
(1 day)
DAY 1 - UNDERSTAND
Study Research Highlights
As step one, all user interview highlights were reviewed, with notes made regarding each person’s wants and needs and the resulting pain. With this more in-depth understanding of the two primary personas, Nick and Sarah, we can easily identify common denominators, compare differences, surmise a problem space, and plot a potential user journey map.
Identify Common Goals and Differences
- Doesn't like to plan
- Plans trips ahead
- Doesn't like to search
- Prefers to walk around
- Takes photos to remember trips
Good photos
Good Locations
Social Media
- Doesn't mind search
- Follows trip plans
- Photographer
- Wants locations nearby
- Olay to travel but needs to be worth the effort
Sarah
The Well Organized
Nick
The Spontaneous
Challenge Highlight
Find photo-worthy locations
Satisfy both users:
one who likes to plan and one who prefers not to plan
The Problem Space
How might we build a list of the most Instagram-able locations in a city?
How might we set up parameters of locations so users can decide if the place is most Instagram-able for them?
How might we help users to find nearby most Instagram-able locations?
How might we accommodate Nick’s spontaneity and also Sarah’s need for planning?
How might help users by providing photography tips so even the less known locations can be the most Instagram-able?
How might we help users to save time in searching for Instagram-able locations nearby?
How might we help users to create travel routes of great locations for photos so they can save time?
Create User Journey Map
Possible end-to-end experiences a user might have with the app
DAY 2 - DIVERGE
Lighting Demo - Competitive Research
Many of the goals and pains to be addressed by GramCity mirror elements in travel apps. As a result, much research was focused on popular travel apps such as Airbnb and TripIt, providing valuable knowledge in possible approaches to setting up filters and search criteria. Additionally, fashion apps such as Zara were examined to better understand the filter processing utilized in these apps.
airbnb
Zara
TripIt
Crazy 8s
Based on the research findings, the primary goal of each
user is to receive location suggestions according to their
photography needs, and then receive a travel plan tailored
to the individual's planning and travel habits.
To generate ideas, the "Crazy 8s" exercise - eight one-minute sketch to create eight versions of the critical screen - was utilized to conceptualize possible solutions.
Three Panel Board
After completing the Crazy 8 exercise, the screen that appears to present the best solution was selected. Based on this selection, a three-panel board was created, including:
(1) the screen that comes before the critical screen,
(2) the critical screen itself
(3) the screen that comes after the critical screen
DAY 3 - DECIDE
Decide and Sketch Storyboard
With an idea for a solution, various screens, depicted through storyboards (11), were created to demonstrate possible user interactions. Each screen includes the necessary UI elements for building a prototype. In this design sprint phase, the focus was given to only those screens with critical routes.
Search
Result in Categories
Select a Categories
Location Info
Location Info
Location Info
Location Info
Location Info
Location Info
Itinerary
Location Info
DAY 4 - PROTOTYPING
Sketch 5-15 Panel Storyboard
The lo-fi storyboards provide a good blueprint for building the hi-fi wireframes. These screens focus on the crucial route to accomplish each task. Extra screens were added to make the interaction more real. Certain functions, such as date pickers, have been excluded for this exercise.
Next: Build the interactive prototype in Invision.
DAY 5 - VALIDATE & LEARN
Usability Testing
On day five, five moderated usability tests were conducted. Each participant offered valuable input. In the interim between usability tests, the prototype was updated with a new iteration of the design based on user feedback. [Note: new iterations of design in conjunction with user testing may not be "by the book." However, it worked for me, and I noted that each subsequent participant went through the app more easily than the previous one.]
Test 1 - Highlight
Participant: Daniel
-
Insert “generate an itinerary” instead of after the trip.
-
Change category names into more Instagram/social media related
-
Condense the information on the location page.
Test 3 - Highlight
Participant: Christina
-
Want to be able to select “all” at My list screen
-
Suggested to change a few words
Test 5 - Highlight
Participant: Brett
Add the “starting time: and “end time” in Set Up Itinerary screen.
Test 2 - Highlight
Participant: Siv
-
Wished the prototype to be fully functional to have a real app feeling.
-
Was confused, as a new user, to see two other trips already on the app.
Test 4 - Highlight
Participant: Rick
-
Add location photos in the itinerary.
-
Suggest using iPhone Wallet UI for the itinerary screen.
-
Add a “Add to Calendar” link at the itinerary confirmation screen.
-
Suggest location icon size changes according to selections in search pages.
Iteration
Based on the testing feedback, the mentioned screens were redesigned, and additional functionalities were added. Below are examples of a few of the final screens.
Task Analysis
1. Find the Most Instagram-able Locations
Categorization of search content based on the photography needs.
Most Popular
Places we think you will like
Landmarks
Create your amazing visual stories
Best Selfie Locations
All it miss is you
Local Lifestyle
Eat drink shop like the locals
Best Street Scenes
Find best shops for your photo
2. Satisfy Both Type of Users Who Like to Plan and Those Who Don’t Want to plan
Functional search
adopts to both users
Allow quick decision as
well as in-depth search
Route and itinerary planning saves time for users.
Prototype
GramCity Prototype Video Clip
Conclusion
All usability participants were positive in their appreciation of an app that identifies the most Instagram-able locations in any city. As iterations of the app progressed, participants expressed appreciation for the ease of use in the prototype and expressed desire to use an app like this. This feedback validates the solution idea.
As a result of this design sprint, a new trust in the process has been garnered. There is deep gratitude for the feedback of the test participants, and their contribution to the success of this project.
