Introduction
GramCity is a photo editing app that helps users create amazing photos before sharing them on social media platforms. The startup company wants to transition its service to help people find the best location to take photos anywhere.
For this project, I utilized the Google Venture Design Sprint strategy to come up with solutions.
Problem Statement
Users struggle with the overwhelming and time-consuming task of researching and planning photo opportunities. GramCity seeks to address this challenge by developing a new feature that simplifies the process of finding the perfect photo spots.
My Role
UX/UI Designer
Solution
The solution involves the development of new features within the mobile app to simplify the process of discovering outstanding photo-ops for users. This includes:
-
Incorporating a keyword-based search function to help users identify nearby photo spots
-
Implementing camera settings replication to assist users in recreating optimal camera configuration
Timeline
2 weeks (2023)
Process
Mapping
Sketch
Decide
Prototype
Test
Mapping
In this GV design sprint project, I was provided with research materials and user interviews. I started by gathering the notes from user research and analyzing their pain points and needs. Then, I created two personas that highlight their constraints.
Personas
Key insights from the users:
-
Wants to find photo-op locations without spending too much time researching (Save time)
-
Fear of missing out on good photo spots (Plan easily)
-
Wants to check out examples from other users for inspiration
​
End-to-End User Map
By mapping out the user journey, I gained valuable insights into my design approach, guiding the development of my solution from brainstorming to prototypes.
Sketch
Before I began to sketch out my design ideas, I conducted a competitor analysis to aggregate data and gain inspiration for what my prototype would include.
Competitor Research
Trover
Strength: when users search a keyword, they will see every photo and post that is tagged with the keyword.
Weakness: the website itself is very old and doesn't have detailed information about the information and location of the photo.
500px
Strength: geo-tagging, option to view other users' posts
weakness: doesn't show what places are nearby, which would be very time-consuming to plan photo-ops.
Unsplash
Strength: free access to images, able to search the images of the desired location, and can view other users' photography.
Weakness: no detail address, less information about the photo
After analyzing competitors and personas, I focused my design solutions on features that enable users to discover top-rated spots nearby, follow other users' accounts, and view related photos of specific places. I will implement features that allow users to view detailed information on photo-op locations, reviews, and camera settings.
Crazy 8
After gathering notes on users' pain points and competitors' research, I sketched out the Crazy 8, where I spent one minute on each screen to brainstorm 8 different solutions.
Three-Panel Board
Among the 8 screens I drew, I picked one as the pivotal screen (the second box below) and created the before and after screens. This idea helps users find places they want to explore seamlessly by displaying all related photos when users search a keyword. Then, users can select their favorite photo to view detailed location information and capture details.
Decide
Storyboard & User Flow
In my storyboard, I focused on three things:
1. help users find nearby photo-op locations and provide directions to the place
2. users can search the places they want to go and have the option to save the photo for later use
3. top related photos and categorization
Prototype
Wireframe
In the next step, I created wireframes based on my sketche ideas.
Initially, I intended for users to explore nearby photo-ops with the map as the first screen (top left) of my wireframe, akin to Google Maps. However, I later removed this option on my high-fi mockup as it seemed redundant for a photo-sharing/editing app to include mapping features, considering users could easily access Google Maps with a simple click.
High-Fidelity Prototype
Next, I turned the wireframes into a high-fidelity design.
Notification
Address
Home
Camera
Search
Filter
Search Location
Post Caption
Location Detail
Profile
Test
Usability Testing
For the usability test, I recruited 5 participants representing potential users in the early to mid-20s demographic and frequently use social media, particularly Instagram.
​
During the test, I asked each participant to perform the following task:
1. Show me how you would take and upload a photo
2. Show me how you would look up Taipei 101 and save the photo to your list
3. After completing the 2nd task, show me where you would go to search detail information about the photo (location, settings, etc)
The results came out surprising and are very useful to my final designs. There were both positive and negative feedback about the prototype.
"I love the design, the navigation is clear and easy"
"It'll be better if you have the option to let users see how they would upload photos on their profile"
"I like the part where you click on 'people', it shows their album and the related photos you search for"
"I won't use this app; it says nothing about the location of the photo"
Redesign
Based on the feedback and comments from the usability testing, I fixed the problems users found unhelpful and redesigned the screens.
Redesign 1
Instead of showing just the location and camera setting, I separated the two so that one feature stands out and is more straightforward for users.
Before
After
Links to Google Maps
Redesign 2
After separating the address and camera settings on the 1st step, instead of keeping the camera setting information, I added a feature enabling users to take photos with precise settings by simply clicking the camera icon.
Before
After
when users click on the new camera icon, it will lead to a camera page where they can take photos with exact settings like that of the photo they like.
Takeaway
As a travel enthusiast who is passionate about taking photos of cool architecture and food, I was very excited to dive into the redesign of the GramCity mobile app. Although this is supposed to be a 5-day design sprint, I went over the timeline because I found this design idea very intriguing and wanted to develop a full design of the app. This project taught me valuable lessons on how to think and create design solutions quickly and efficiently. Moreover, I learned the importance of usability testing in shaping future designs. Not all designs resonate with users, that's why it's crucial to actively listen to their feedback and continuously refine the designs to ensure an optimal user experience.
Next, I plan to continue testing the usability of the app's features and make improvements to enhance the user-friendly experience.