GramCity Design Sprint
ux design | prototyping | usability testing
Role: UX Researcher, Designer and Usability Tester
Duration: 1 Week
Tools: Competitive Research, Hand Sketching, Marvel App, Usability Interviews
Project Summary
GramCity is an app that lets users apply fun and artistic filters to their photos before uploading them on social media.
GramCity wants to design a feature to easily help users find locations to take awesome photos near them. They decided to run a one week design sprint to quickly test out a possible solution.
I spent one week mapping out the problem, sketching possible solutions, deciding on the best route and then building a quick prototype.
After getting their hands on the prototype, 5 test users determined they loved the feature and would definitely love to use a product like this in the future.
The Challenge
GramCity laid out the following design constraints.
The solution should be designed as a feature within the GramCity mobile app.
GramCity wants to help users find physical places and locations.
GramCity wants to create an active community of users who find and share their favorite locations
Day 1: Map
I spent the first day mapping out the problem space. I gathered as much info as I could from potential users of the product.
• Users have said they would like to find a good mix of ‘touristy’ spots and also lesser known spots.
• Some users just want options by them and others would go all over the city to find the best spots like on a treasure hunt.
• One guy plans his day by looking on Instagram for the most popular pictures in an area (can we get data from an API or something on where people spend time or where is the most photo location data?)
• Francesca doesn't want to walk past a spot without realizing it. (Notifications while walking)
• Dara plans out all her photos before the trip.
• Elise likes historic spots or where movies were filmed.
• Nick explores and wants the best pics but doesn’t want to research. He is always worried about missing things or not taking enough photos.
• Sara travels a lot for work with not a lot of time in each city so she needs to make the most of her time.
• She will feel like time was wasted if she travels for a spot and its not what she expected (Rating system? Multiple people post to the same spot, higher rated photos to the top?)
• Sara wants to easily find locations and see the best examples of the locations from different peoples perspectives.
Day 2: Sketch
Day two would normally start with the team presenting lightning demos but since I am a team of one for this project I began with a competitive analysis of a few apps in the same space. I checked out PhotoHound.co and the iOS apps of Explorist and Fotospot to get a feel for what was and was not working before I began to sketch some solutions. After my competitors report I did a crazy 8's sketch to rev up my ideation.
After sketching my crazy 8's I chose my best solution and drew out a possible 3 panel storyboard for this critical screen. The user would choose whether they want to find a location or post a location for others. They would then see the map, choose a pin and see all the details for that photo location.
Day 3: Decide
On day three everyone on my team would have pitched their ideas and we would have decided together on the best one. I didn't have a team however so I used the third day to flesh out my storyboard as if they had picked my solution!
I sketched out these 8 most important screens to use as guides for my next step, prototyping on day 4.
Day 4: Prototype
I spent day four creating a simple prototype on MarvelApp.com. Using my sketches from the day before and Marvel's pre-made UI elements I was able to create realistic looking pages for my product with clickable and scrollable elements to make it feel as real as possible for the user without being the real thing.
Day 5: Test
On day five I tested my prototype with my five test users. All five users loved the feature and said they would definitely use this product if it came to fruition in the future. All five testers said they loved the ease of use. Some things were not working for many people so I was able to iterate through my designs to make the product more user friendly.
1) Users couldn't immediately find their location on the map so I adjusted their position dot to look more inline with iOS and Android systems. I also changed the shape and color of the pins as the previous ones weren't testing well either.
2) All five users where confused by the left tab being called search. Multiple people thought 'Explore' made more sense.
3) All 5 test users were confused by the plus button and how the 'add a spot' tool worked. I changed the button to read 'Add a spot' and wrote a little headline on the page explaining that these spots are added for everyone.
4) I increased the size of the action buttons on both pages to make them feel more proportionate to the rest of the page and easier for the users to touch.
5) Users wanted an easier way to get more locations right away so I added a default 'All Spots' filter.
6) The original rating filter defaulted to 1 star, users thought it should default to the highest rated and then they could filter down from there. The previous upper range of 20 miles for the distance filter was way too high for most users so I lowered it to 5 miles.
7) I changed the detail page to a card so that the X to close the page would never blend in with the photo.
8) Users were confused by the stars. They didn't know if that was the locations rating or where they give their rating. I added the rating for the location under the title of the location.
9) I added the thumbs up on the community photos, because people weren't sure where the heading photo came from. The top photo is the top rated from users voting for the community photos.
Check Out the Prototype
Results
From the results of this week's design sprint, I would say GramCity should definitely move along with their plans to add this feature. It was really well received with my test users and with a little more thought, ideation and testing, this would be a great added feature for Gramcity's users!
%201.png){kind=small}
