Case Study: Gramcity

User-generated map app for finding Insta-gram worthy pic spots.

The Problem

For this project, I lead efforts and acted as a UX researcher, UX designer, and UI designer. My tools included XD, Sketch, Google Suite, Zoom, Coolers Color Guide, Adobe Color Palette Generator, and several UI Accessibility Checkers. Throughout this project I learned to understand failure, success, determination, flexibility, collaboration, diligence, self-awareness, and self-reflection. By the end, I delivered sketches, user interviews, usability testing, and a high-fidelty prototype.

GramCity is a product that allows users to take interesting photos for social media and includes filters, stickers, and photo editing tools. I had 7 days to complete this Agile Sprint. Constraints included company personas, a poor but existing logo, user research limitations. Customers want to take interesting photos for social media and include filters, stickers, and photo editing tools.

I had 7 days to complete this Agile Sprint. Constraints included company personas, an poor but existing logo, user research limitations.

I created a user flow and prototype that allowed customers to create an itinerary listing nearby spots that offer great photo opportunities. Their itinerary is based on the community of instagrammers’ reviews and recommendations.

The User Journey

The Solution

Gramcity is a photo editing app that helps users prepare photos before posting them to Instagram or other social media. Gramcity to help users find locations to take pictures of interesting architecture, artwork, landmarks, etc. Constraints/guidelines included adding a feature to the pre-existing app, finding actual locations, and creating a community that helps users find and share photos.

For my prototype storyboard, I decided to both pare down and expand upon my three-panel storyboard. I focused a bit more on the heuristic of minimal and aesthetically clean screens, while removing some of the buttons and filters. Those could be added in a future version and were not part of a MVP. Additionally, I expanded upon the end to end experience and the users’ need to create an itinerary.

Along with many other features, Tripadvisor helps users create itineraries for travel. There is a large community of reviewers offering advice and ratings of the best travel plans.

Similar to Gramcity in it’s location services, AllTrails is an app to find nearby spots for outdoor sports like hiking and mountain biking. Users are able to view trails on a map or pick out spots to visit that are recommended or based on category or rating. AllTrails uses your location information, or you can plug in an area that you will be visiting in advance.

Google Maps app offers maps and directions but also, and similarly to Gramcity, offers recommendations. Google Maps only offers recommendations of nearby activities, restaurants, places to stay, and more.

Yelp is like Gramcity in that it offers reviews, written by the public. However, their reviews are on restaurants and local businesses. It also uses your location to help offer suggestions and show top rated highlights.

Usability Testing and Improvements

For my usability testing, I recruited five users via the online Slack networking groups. These users self-reported that they enjoy social media and post photos regularly. Each participant’s test results helped me see aspects of the prototype that worked well, along with opportunities for improvement. I found conducting interviews easy because I now have a lot more experience giving usability tests, as well as participating in my classmates’ tests and interviews.

A few helpful patterns emerged during testing. On a positive note, many people found the flow familiar and consistent with other apps. The magnifying glass search icon was helpful to my testers. However, the pushpin icon (which was supposed to be suggestive of pinning spots to a paper map) was too unfamiliar to users. Instead of this, a double tap on the image or location card would mimic instagram and also allow users to save and favorite locations for their itinerary. The verbiage on “Photo Ops” and “Top Ops” seemed unclear to a few of the testers.

End to End Product Life Cycle

The Results

I created my prototype in Sketch. I based my design decisions on Bitesize UX’s pre-provided personas, the user journey, and also the logo concept. During testing, I aimed to learn how users interacted with the prototype, including what they thought of the order. I also aimed to see if people would use the vertical scrolling function of my most complicated screen.

Overall, I found the design sprint process quite enjoyable. I feel like time-boxing my work and giving myself sharp deadlines really helped spur my creativity. I would really love to try this process with a team of people.

Throughout the project, I learned how a system of organization, keeping detailed notes and reflections really helped me to jump right back into the next day’s work. I also learned that it’s a process of iterations and changes, which funnel down to the final product.

For my next steps, I would iterate on my usability test findings. This includes changing the push pin style buttons to hearts. I would also integrate other features of instagram such as changing the verbiage to “Explore” so as to clarify steps for the user.

I spent a few hours tightening up the UI and iterating on the user feedback. I deleted the push pin icons and added the original heart idea.