Designed to help people find instagram-able places
GramCity
A Design Sprint Challenge
Introduction
The GramCity App Project is a 5-day design sprint challenge, created by Bitesize UX, as a part of my UX/UI Design Program at Springboard. The client is a new startup company that wants to take the GramCity App to the next level. It is a simulation of a real-world project with all the initial research results, goals, and client requirements.
Problem
GramCity is a new startup that wants to help people find the most Instagram-able locations to take a photo in any city. In this design sprint we are trying to solve an endless supply of great photogenic locations that are somehow tracked and accurately shown to users based off their nearby location. Users want to be given photographic ideas so they don’t have to collect the research themselves to inspire ideas while on their trips. Some users base their entire trips itinerary around locations of where to take photos.
Solution
By providing recommended locations for taking photos and combining with trip planning features, the GramCity app will become a more powerful app than a typical photo editing app. With the trip planning, users will interactive with the app before, during, and after their trips. By incorporating community sharing and review features, we will help GramCity to create an active community.
Expertise
UX Design and Interaction
Context
Modified Google Ventures, Design Sprint, and Solo Project
Tools
Pen & Paper, Figma, and Marvel
Duration
1 Week
Day 1: Understand
The GramCity client provided me with research insights up front. This included notable user quotes, user interviews, and personas. I was able to synthesize this research to help inform my design decisions.
““If I am in a new place, I like to find the ‘must-have’ photo ops, even if they are a little touristy. Sometimes, I look on Instagram for the most popular photos in the area and plan out my day from there.” ”
Research Highlights
Users may want to plan out their trips and determine the destinations based on where they want to take great photos.
Besides popular destinations, people often want to find lesser know places and share with others later.
The photo suggestions can be specific to the user’s interest and the app can provide more personalized places and photos to users.
User Mapping
During this initial stage, through quick user mapping, I draft out possible end-to-end experience a user might have with the GramCity app. With the user’s goal and frustration in mind, I seek to solve the problem by laying out each step a user could take.
My reasoning
As a photo editing app, GramCity’s new feature should provide stunning and eye-catching photo suggestions to users. We want to encourage users to get inspired and want to take similar photos. Thus, the featured photos should be curated and with high value information about the location. The trip planning feature will help users map out the recommended routes if they have several locations saved within a city.
Goal
GramCity client wants to explore how they can help their users find great photo-ops near them. Whether it is a tourist attraction, a building, or natural landscape, users can get inspired and take a great photo.
Constraints
The design solution should be done as a feature of the existing GramCity mobile app. That means I will need to keep the photo editing function and create additional tabs under the home screen.
The client wants to cultivate an active community of users who find and share their favorite locations.
The client wants to help users find physical places and locations.
Day 2: Sketch
On the second day of the sprint, I drew inspiration from designs in related fields and created sketches to brainstorm possible solutions.
Lightening Demo
The Lightening Demo process is about making initial references to the existing product and solutions. I researched existing app such as Instagram, Pinterest, Airbnb, and Snapchat. By studying competitor apps, I can quickly gain knowledge of solutions for features that can be used for the GramCity app.
Crazy 8 sketches
Through rapid idea generation and rough sketches, I began experimenting with different solution ideas using the "crazy 8 sketches" method. I made 8 sketches in a row, spending one minute on each, aiming for unique and imaginative ideas. Below are the sketches. This exercise will help solidify my thoughts and support my decision-making process in the next stage.
Solution Sketches
3 critical sketches will inform the rest of the screens and UI design. As creating a trip/travel plan is essential in providing solutions to the problem, the trip screen will be main focus of the red route design.
Day 3: Storyboard
During the third day of the design sprint, I started to create a storyboard based on the solution sketches. After testing out a few hand drawn wireframes, I landed on the solution below. With the key UI elements included in the sketches, I began to think about the screen flow and layout. With hand sketches, I can be loose and not bound by the limitations of digital design software.
Style Guide
Day 4: Prototyping
On the fourth day of the sprint, I started to build a prototype in Figma. In a design sprint, a prototype aims to include only critical paths and essential screens. Keeping this in mind, I stayed focused on initial goals of helping users to discover and determine “Instagram-able” places for their trips. Then, I started to develop and polish the final visual designs of the red routes with the UI Kit and critical screens from Day 3. In the meantime, as I continue to iterate on the design, I also updated the style guides to better reflect the final design of the product.
Thoughts
While working on a solo version of a GV design sprint, building the prototype can be daunting and tough. On the other hand, it gives me the opportunity to be decisive and focus on only critical part of the user flow. In a regular design sprint, a team divides the work at this stage. But in my solo sprint, I had to build the whole prototype on my own.
Prototype
Day 5: Testing & Validating
I performed 5 usability tests by pulling from a pool of participants in the UX field and my own social circle. Tests were performed over Zoom with screen share, and in person using my phone running the Figma prototype.
User Tasks
Search for specific locations
Add desired photo locations to trips.
Create a new trip
Determine the trip plan via map feature
Findings
With user feedbacks, I revised the UI of high fidelity design and reconsidered some of the user flows.
What I’d do next
I would further develop the filter feature to enable more effective photo browsing experience. I also want to develop the community sharing and rating features, so that users will come back to the app more. There could be new features such as new location notification and nearby place recommendations for power users while they are exploring the place they planned for.
Conclusion
I gained tremendous insights through this design sprint project. Similar to concept design in architecture, the design sprint requires the designers to quickly come up with solutions and do rapid testing. It does get used a lot in the real world practice for design teams. Within such a tight schedule, designers can often come up with creative solutions which may inform a more in-depth design later on.
