Designing an Engaging Social Media Platform for Photo Enthusiasts
Designing an Engaging Social Media Platform for Photo Enthusiasts
Embedded Files
Timeline
Timeline
February 1 - 7, 2024
1 week
My Role
My Role
UX Designer
UI Designer
Deliverables
Deliverables
Usability Report
Prototype
Tools
Tools
Figma
Google Suite
Zoom
THE WALKTHROUGH
The App in Action
The App in Action
GramCity is an Instagram locator heaven, that allows users to find the most instagramable hot spots within the city they are in or are traveling to. It offers reviews from GramCity members, itinerary planning, and GPS navigation.
PROBLEM
GramCity would like to test new features that help users find incredible photo opportunities to photograph nearby, in real time, and before traveling.
SOLUTION
The solution should be designed as a fully functional iOS mobile app that does the following:
01
Saves users time from researching destinations and traveling out of their way to find them.
02
Helps users find high-quality examples of photo ops at destinations, filtering repetitive or poorly-captured photos.
03
Integrates a community aspect to increase engagement.
04
Helps users map their itineraries around photo-ops before their trip, during their trip, and in real time.
- Searching a New Location, Selecting a Photo-op Spot, Creating an Itinerary
Users can search for specific locations and see photo opportunities in a grid view for quick, visual access. Photos are sorted by the best shots from users. Users can click on a photo for more details about the spot, where they can browse through more photos for accuracy.
From here, users can navigate to the spots, mark them as favorites, or add them to an itinerary. Adding spots to their itinerary maps out a route for them.
2. Navigating from an Itinerary
2. Navigating from an Itinerary
GPS navigation from the itinerary page notifies users once they've arrived to their location and prompts them to add a photo immediately and review the location. The reviewed photo shows up on the map.
3. In-app GPS Navigation
3. In-app GPS Navigation
Users have the option to use an in-app GPS that allows them to regularly navigate to a destination while also providing photo - ops along the way that they can add.
4. Nearby Location Notification
4. Nearby Location Notification
Nearby photo-op notifications take users directly to the photo-op page and allows them to either create an itinerary on the spot or navigate to it immediately.
CONTEXT
GramCity Design Sprint
I was brought onboard to lead a design sprint and evaluate a potential solution to GramCity’s user’s needs in just 5 days! Utilizing a five - day Google Ventures design sprint format, I rapidly brainstormed ideas, developed a prototype, and conducted testing.
The Timeline
DAY 1
Understand & Mapping
On the first day of my design sprint, I spent time going through the challenge brief, doing research, and looking over user interviews to understand the scope of the problem and user pain points.
I was provided with user research such as personas, and user interview data.
Interview Question:
"Tell us about how you find great new places to take a photo"
Quotes from User Interviews
Personas
Affinity Map
Based off of user interviews and the personas, I created an affinity map to document and organize common themes.
Key Findings:
01
Users want to know when there is a photo-op nearby in real time quickly and easily
02
Users want to make sure the location is accurate and visually appealing
03
Users want to be able to decipher the type of photo-op location they’d like
04
The app can be a tool to help them plan out their trips
How Might We:
Now that I had an idea of the problembegan space, I began to draft "How Might We" statements to define the problem based on user painpoints.
How might we help users find the perfect photo spots nearby, in real-time, or before travel without wasting time scrolling or going too far out of their planned route?
How might we make it easy for users to choose the kinds of photo spots they want to see?
How might we encourage more users to engage?
How might we ensure users never miss great photo opportunities?
End-to End User Map:
After learning about the users that I was designing fo I then created an end- to- end user story map for the Gramcity App, envisioning how users might interact with it. Through creating this map, I was able to think about the process of using the app from the user’s perspective and begin outlining some of the conceptual elements the solution would need to include.
DAY 2
Sketch My Solutions
Before diving into day two- the sketching phase, I researched competitors and examined products tackling similar challenges. I also conducted individual assessments of lighting demonstrations within various apps, drawing inspiration for potential interfaces and ideas to explore.
Instagram:
- Uses a grid view system of photos- GramCity is derived from Instagram.
- Allows users to explore tagged locations, see top liked and recent photos for a place.
- Users can add location stories for real-time, accuracy of locations.
Google Maps:
- Lets you add multiple points to a route and make itineraries.
- Offers in-app navigation with different transportation options.
- Features community-based photo reviews and a search filter.
Yelp:
- Lets users sort and filter photos.
- Shows nearby locations and their details.
- Users can upload photos and explore location information.
Crazy 8 Ideation
After going back and reviewing my personas, I decided the screen that would be the most crucial in the design would be the search results page. This screen plays a significant role in both Nick and Sarah's experiences, serving as the browsing point for locations.
Once I gathered inspiration and narrowed down my design goals, I conducted what's called a "crazy 8" exercise, where I rapidly sketched eight unique screens within eight minutes. Some ideas came to me pretty easily, but I hit a bit of a wall with a few. In the end, I ended up combining some of the earlier sketches, and surprisingly, those turned out to be the ones I liked the most.
Solution Sketch:
After ideating from my crazy 8 exercise, I chose the screen on the far right of the second row. It was the fourth sketch, blending the strongest parts from earlier ones. I then made a three-panel board with the screen before and after my main one
- The homepage allows users to "use" a GPS, start a new itinerary, or search a location. There's also a map showing nearby pins and suggested spots based on algorithms.
- The details page allows the user to view searched spots on the map. They can check out photos in a grid and even sort them too.
- The next page pops up when you click on a location for more details. Here, users can save the location, add it to an itinerary, or go there now. Users can also check out reviews and photos, filter the photos they want to see, and even upload their own photo if they've been there to facilitate user engagement.
3 Panel Story Board
Once I decided on my main screen, to prepare myself for the next storyboarding phase of the sprint, I went ahead and created a 3 Panel Storyboard, quickly sketching the screens that come before and after my crazy 8 selection.
DAY 3
Create a Storyboard
Using my three-panel solution sketches, I sketched out my entire storyboard It helped me plan out all the screens I'd make for the prototype on day four of our design sprint. I made sure users could search a spot, pick it, add it to their plans, start their trip, snap a picture, and rate the place once they got there.
DAY 4
Build a Prototype
After completing the storyboard, I moved on to crafting a prototype. I carefully considered the needs of our personas, Sarah and Nick, as depicted in the comic strip storyboard, as I developed the high-fidelity features for the GramCity Prototype.
I chose to stick with the colors provided by Gram City, incorporating lighter accent shades, reserving different hues for alerts and user messages. I opted for an interface font “Inter”, familiar to users and in line with iOS guidelines.
To maintain visual consistency, I created a brief style guide. This ensured a clean and cohesive user interface with straightforward buttons and icons, allowing the images and maps to take center stage within the app
Emphasizing the visual appeal of locations, I leaned in on heavy use of photos to aid users in quickly finding what they seek.
First High Round of Fidelity Mocks
Searching a New Location, Selecting a Photo-op Spot, Creating an Itinerary
Users can search for specific locations and see photo opportunities in a grid view for quick, visual access. Like Instagram, this helps users scan a large amount of photos without scrolling. Photos are automatically sorted by recommended spots. This ensures the most relevant spots to the user are being shown first. However, users have multiple ways to filter the spots shown. Users can click on a photo for more details about the spot, where they can browse through more photos for accuracy. From here, users can navigate to the spots, mark them as favorites, or add them to an itinerary. Adding spots to their itinerary maps out a route for them that they can access at any time in the "plan" tab.
Navigating from an Itinerary
GPS navigation from the itinerary page notifies users once they've arrived to their location and prompts them to add a photo immediately and review the location. The reviewed photo shows up on the map. This gets users to engage with the app and community.
In-app GPS Navigation
Users have the option to use an in-app GPS that allows them to regularly navigate to a destination while also providing photo- ops along the way that they can add. This solves the user pain point of the user not having to go out of their way to find an Instagram spot as they can plug their destination in, and the app will recommend spots along the way. It also solves the problem of not having to search for a spot. The user also does not have to spend time copying and pasting an address into a navigation app answering the problem of saving users time.
Nearby Location Notification
Nearby photo-op notifications take users directly to the photo-op page and allows them to either create an itinerary on the spot or navigate to it immediately. Solution answers the problem of users never missing an opportunity nearby.
DAY 5
Validating My Solution
On the final day of the design sprint, I conducted usability tests with five people to gather feedback on my prototype. I targeted photo enthusiasts who love snapping pictures while they travel. Each participant tackled the same set of tasks and after completing them, I interviewed each participant to gather further insights and identify areas for improvement. By the end of the usability tests, I hoped to understand user pain points and use feedback to improve the app.
We conducted five usability tests via zoom and in person.
Questions to be answered through the User Test:
01
Can participants easily search for photo-ops?
02
Can participants find nearby photo-ops?
03
Can users intuitively use the GPS navigation and find spots along their route?
04
Can this app be used for both trip planning and in the moment circumstances?
Task 1: Search for a spot, create and navigate an itinerary and leave a review
“You are visiting a new city and want to find photo opportunities in the area- how would you go about finding a photo opportunity, adding it to an itinerary, beginning the itinerary and leaving a review of the spot once you’ve arrived? ”
Task 2: Use the GPS and add instagrammable spots along the way
“Imagine you’re going to the outlet mall near you and want to use the GPS to navigate to this location but also want to locate and add multiple instagramable spots along the way. How would you accomplish this?"
Task 3: Navigate to a nearby photo opportunity
“Imagine you’re downtown in a city and you want to navigate to a nearby photo opportunity immediately. How would you go about doing this from this notification page?”
What could be improved?
Main feedback:
Confusion on how to exit the navigation
Confusion on how to use the GPS feature
A hard time locating the search bar
Button labels should use more words and the labels be more consistent
User Test 1 Findings
Search Bar Visibility and GPS Button Confusion
Issue
Issue
A) Users had a hard time locating the search bar
B) Users had a hard time identifying the GPS feature
Solution
Solution
A) Create an outline in a drop shadow and change the text with a search bar
B) Users suggested the wording be changed on the GPS button
Navigation Button Visibility, Trouble Ending Navigation
Issue
Issue
C) Confusion on how to end the route because of the ”X” on the pink bar
D) Could not see the button to expand navigation details
Solution
Solution
C) Delete the X on the pink bar and add the end route button both locations- when enlarging the route dropdown, and when viewing the map details
D) Make the button contrast more with the background
Inconsistent Button Labels
Issue
Issue
E) Users had a hard time with the inconsistent labeling of the buttons
Solution
Solution
E) Keep the button label language consistent
Revisions Based on user feedback
Based off of user feedback, I addressed the most common pain points in my screen revisions.
More consistent language for button labels
More consistent language for button labels
- I changed all of the "Go" buttons to "Begin". Users gave the feedback that this language is more clear and more consistent.
Before
After
Clearly defined and labeled buttons and search bar
Clearly defined and labeled buttons and search bar
- I darkened the color of the search and filter icon and text and added a drop shadow because it was not visible to users
- I used clearer language for the GPS button so users would not get confused about its function
Before
After
Remove the “x” and make the buttons more visible
Remove the “x” and make the buttons more visible
- Deleted the "x" on the bottom pink bar to reduce confusion as to where to end the route
- Increased the contrast for the dropdown button to make it visible for users
Before
After
Add an “end route” button
Add an “end route” button
- Adding another way for users to access the "end route" button on the page where they can edit their route so users have more than one way to exit
Before
After
Conclusion
5 out of 5 participants said they would use this app for their future travels.
"I would use this app in real life because it's extremely easy to use and gives an accurate idea of what you're getting into which saves a lot of time!"
-Alyssa
High Fidelity Screens
Home Page
Home Page
Search Results
Search Results
Instragrammable Spot Information
Instragrammable Spot Information
My Itinerary
My Itinerary
Along your Route
Along your Route
If I Had More Time:
If I had more time there are a few features I would incorporate:
Live stories from locations- this was included in the ideation phase, but I did not have enough time to mock it.
Enable users to follow other GramCity members.
Reflections:
The design sprint was a hit! Most folks liked the GPS feature for adding photo spots along an in progress route. If we greenlight this, next up is testing the updated screens with users and tweaking it further based on their feedback.
Overall, the sprint was amazing and flew by. I loved working on it and testing my skills in just five days. Since I was the lone designer, I ran a modified GV sprint. But I'm eager for a full one with a bigger team.
Page updated
Google Sites
Report abuse