The Introduction

Overview

Introducing GramCity, a photo editing mobile app that wants to help users find good places to take photos and also create a community for people to share tips and advice. Through my participation in this modified 5-day GV design sprint, I crafted intuitive and visually appealing features for this app, allowing users to find captivating photo spots and connect with a vibrant community of fellow photography enthusiasts.

Stakeholders

Throughout this project, I was collaborating with the owners of the GramCity application, who served as the primary stakeholders. And their vision was to provide users with more features that help find good photo spots and connect the users.

My Role

As the sole designer on the team, I took on the responsibility of reviewing the research resources, driving ideation, and prototyping throughout this fast-paced 5-day GV design sprint process.

Analysis

Meet Nick and Sarah

To address the need of providing better photography location options and creating a sharable community for the users, the GramCity conducted interviews and research based on their current users, along with two personas - Nick and Sarah - were provided based on their behavior, frustrations, and goals.

Based on these two personas and some of the key highlights from the research findings, I came up with these three How Might We questions, serving as a guide for addressing user needs and shaping the direction of the project.

How Might We Questions

How might we empower users to effortlessly discover nearby or location-specific photography spots for capturing memorable shots?

How might we let users find good places based on their individual preferences, whether it be visuals, historical significance, tourist attractions, etc?

How might we allow users to share their past tips and advice with the community?

Ideation

User Flow

I came up with 4 maps at first, the first 2 tailored to Nick’s persona, emphasizing real-time recommendations for users already at a location. The other 2 maps catered to Sarah’s persona, enabling users to conduct pre-travel research and apply filters based on personal preferences. To create a comprehensive user map, I merged these two flows, recognizing their compatibility and synergy. As a result, the final user map allows users to seamlessly:
‍
- Access recommendations for nearby locations using the location sensor.
- Conduct research based on personal preferences, such as seeking meaningful or touristy places.
- Review example photos, read location/direction details, and peruse user reviews.
- Share their experiences with the community.

User Maps Sketches

To design the key features for GramCity, I drew inspiration from some of the industry-leading applications like Uber Eats, Airbnb, Trip Advisor, and Wanderlog. By studying their successful elements, I incorporated valuable insights into my own design, ensuring that Gramcity offers a seamless and intuitive user experience that meets our goals.

From Paper to Figma

Crazy 8s

Various screen of ideas were generated through multiple iterations and revisions. And after several rounds of revisiting, I identified 3 critical screens - the homepage, the explore page, and the location landing page - as the main focus for this project’s design. These screens were chosen because they effectively address the previously formulated HMW questions, offering solutions that align with user needs and enhance the overall user experience.

Wireframes, Visuals, High-Fidelities

I have created a solution sketch that includes the homepage with clear nearby location recommendations, an explore page for filtering location types and browsing community photos, and a location landing page with essential information, example photographs, and a review section for user feedback. This sketch aims to meet user needs and enhance the overall experience.

Behind the Scenes

After completing making my prototype, I recruited 5 participants to assess the following in my user testing:
1. Flow: Determine if users can easily explore nearby and specific photo spots, ensuring the app’s navigation is intuitive and meets user expectations.
2. Hierarchy: Evaluate if users have access to sufficient information and if the layout is clear and suer-friendly.
3. Navigation for reviews and sharing: Observe how users navigate the app to write reviews and share posts, ensuring the relevant features are easily accessible.

Feedback 1 - Clickable Homepage Map

- 100% effectiveness successful in finding nearby locations from the homepage.
- However, it was observed that users instinctively clicked on the map first when given the task.
- Feedback from two users suggested that the typography of the distance could be more prominent compared to the location name.
- To iterate on the homepage design, the map could be made clickable and responsive to user interaction, and the distance text could be enlarged or use a different color for it to stand out more.

“My first thought was to click on the map ...” - participant 1

Feedback 2 - A More Noticeable Filter Bar

- 3 out of 5 participants found the placement of category options within the “filter” section less intuitive.
- To improve this, the category options could be moved directly under the search bar for users to choose easily.

“I would enter in the search bar initially because I didn’t see the filters.” - participant 3

Feedback 3 - Positives

- 100% effectiveness. All users expressed and demonstrated navigating to the right place to leave reviews.
‍
- Users expressed appreciation for several key features of the app, including the display of distance for nearby locations, the ability to filter based on categories, and the inclusion of reviews with pictures.

“I like how there’s a display for distance, it’s easier for me to choose based on the location.” - participant 5

Key Takeaways

Prioritizing Main Purpose

Participating in my first GV design sprint was a valuable experience, allowing me to go through the entire process from identifying key questions to designing and revising based on user feedback. I learned to prioritize essential features based on user interviews and their repeated mentions. For example, wanting to find a good photo location either nearby or for a future plan was repeatedly mentioned, thus, how I find a solution that can accommodate for both situations was something that I wanted to prioritize during my ideations process.

The revised prototype successfully addressed the initial HMW questions, as user testing demonstrated users’ ability to find nearby locations, filter based on preferences, and engage with the community through reviews and photos. Overall, the design sprint proved effective in achieving my goals.

PROJECT

Gram City

The Introduction

Problem Statement

Analysis

How Might We Questions

Ideation

From Paper to Figma

From Paper to Figma

Behind the Scenes

Key Takeaways

Thank you for stopping by!