GramCity
UX / UI DESIGN
The Challenge
GramCity is a photo editing app that helps users make their photos look their best before sharing them on instagram or other social media.
GramCity wants to expand their product by creating a new feature which helps people find the best locations to take a photos in any city. The company wants to explore how we can help users find these cool photo spots and create an active community for users to share their favorite locations with others.
*prompt provided by Springboard
The Solution
I used a modified Google Ventures Design Sprint method to research, design and test in the span of 5 days to help GramCity users find the best photo locations and share across a network of photographers.
Role
UX Designer, UI Designer
Tools
Figma, Pen & Paper
Scope
5 Days
Day 1 – Understanding
and Mapping
Research
The company provided with me with research data from multiple interviewees that fit the target audience. This gives insights about their process of finding photo locations and their photography style.
We came up with a wide variety of frustrations, and goals that will help us get a structured idea of our target user and create personas.
Research Synthesis
Using the research highlights, personas, and interviews findings, I discovered that:
- People want an easy way to find photo opportunities
- People have different priorities and preferences when it comes to their photography style
- People want to find what is nearby
- Some are willing to go the distance for their shot
- Users want to see what other people have to say about the spot
I used How Might We Questions to determine the most important features that I would be building into my prototype. A map for a possible end-to-end user experience grew from these questions:
- HMW make finding photo opportunities easier?
- HMW show users photo op locations nearby them?
- HMW let the user research locations with other user’s reviews and comments?
- HMW create a list of locations the user wants to visit?
- HMW compare locations with unique profiles?
- HMW reduce the time it takes to find and research photo locations?
- HMW let users see each others photos and location visits?
Mapping for Solutions
I took what I discovered from the research analysis and created a map for the ideal end-to-end user experience through the new app feature. This process includes these steps:
- A user is looking for a location to take photos
- They can either look at the map, or a list of places nearby
- Browse locations on the map select one to visit
- Scan the location profile page, read ratings and reviews, determine if they want to visit
- Add location to their list of places they want to visit
- Get the fastest and easiest route to location
- Arrive at location, take pictures
- Open your profile and select the location on your list
- Add pictures, make ratings, and add a review
- Add location to your profile
Day 2 – Sketch Solutions
Modified Lightning Demos
In order to see what competitors are doing, I did some quick demo runs through similar apps to check for some strengths and weaknesses.
Really Good Photo Spots is an app for scouting and researching locations for photo ops. They allow you to save spots for offline use, as well as some additional search and filtering options.
Design Takeaways:
- Poor visual hierarchy
- Unclear flow and hard to navigate
- Clear system of comments and ratings
Shutterspots is an and it’s an interactive database of popular places to capture great photos.
Design Takeaways:
- Good UI, navigation is clear, simple
- Add to favorites feature
- No photo thumbnails
- No ratings, comments
- Extremely limited on spots
- No interaction for community/social
Crazy 8 Sketches
Solution sketches
After the lightning demos, I did a quick sketching session to create eight UI ideas of the most critical page I’d be building for my prototype.
I chose to sketch the primary location details page, which would show you the spot profile with average ratings and user reviews. It is from my sketches that I chose #7 for the foundation of my UI design.
For the next part of the process, I sketched out my critical screen that I previously chose from the Crazy-8’s, along with the screen that comes immediately before it and the screen that comes immediately after it.
I decided to utilize Maps/Google Maps to give the user the quickest route for transportation.
Day 3 – Storyboarding
To validate my solution I created a storyboard that illustrates the process a user will take to:
- find a location,
- add it to their list
- go there and take photos
- rate and review
- and add it to their profile
This solution does not stop when they find the spot they want to visit, but the app directly takes them to maps/google maps for the fastest and easiest route to streamline the experience.
Once they are at the spot they can take pictures, give ratings, and comment which adds to their profile as well as a database for other users to interact with. Other user’s will see the ratings on specific details of the location to determine if it will be worth the trip there. The user’s experience on the app will accumulate as they visit spots and add their reviews to their profile.
Day 4 – Prototyping
I took a day to create my storyboard sketches into wireframes that act as my prototype. I had to reflect all my ideas from start to end for my design to be complete, but also didn’t include every single detail for time’s sake in the Design Sprint challenge.
So in the prototype you’ll find the main pathway a user must take in order to find a location, add to their list, go there, take photos, and add it to their profile. Here are some screenshots of the main screens, but not all.
Day 5 – User Testing
To validate my solution, I tested 5 different participants with moderated tasks. The users all have experience scouting photo opportunities and posting photos to instagram, so they were familiar with the concept of the product.
The tests generally went smoothly, although I did find some areas where the users struggled:
Main Insights:
- Users skipped “add to list” on the location profile page, went straight to “get route”
- The 2 choices next to each other seem like you have to choose from one or the other, although you are supposed to add to your list then get the routes
- Users were confused after it takes them to google maps, it is unclear from the prototype that they would have to open the app again and get to their profile to add locations
- confusion around the “my list” button in the profile and the “list” icon in the bottom navigation menu
I determined that the main pain point of the user testing was the verbiage around the “list” functions. It was confusing because there was the “my list” section in the user profile, as well as the “list” icon in the bottom navigation. I decided to change the bottom navigation to “spots” to distinguish the two.
Final Prototype
To complete the user journey after they take photos and add their reviews, they press the “Add to Visited” button which adds to “Visited” section in their profile, and removes it from “My list.”
Reflection
The Design Sprint was a new and challenging concept for me. The fast paced energy kept me on my feet and taught me to not dwell on the little details. You just have to be confident that your design ideas are on the right track, as you have less time to mull over all the possibilities. I learned to keep minimal design in mind, and focus on the main functions that will affect the user’s experience with the new feature. Over all I’m pleased with how the GramCity design sprint turned out, considering the short time frame and concise parameters.
OTHER PROJECTS
ZWENDE
BACKBANK
SPOX