GramCity | Emilyray

About the Project

Not only was I very excited to perform my first Design Sprint-a 5-day long project at the end with a live prototype to test with users-but to be doing so to find a solution by creating a new feature for Gram City. Gram City is a photo editing app that helps users easily make their photos look awesome before sharing them on Instagram or other social media networks. For this project, Gram City wanted to design a feature to help users find awesome places to take photos, wherever they are.

Problem

Gram City wants to explore how (and where) they can help their users find great photo-ops near them and ultimately create a feature that helps users find the most instagrammable spots all over different cities. Because of the needs of this feature, I decided to ask myself a few HMW Q's to keep in mind throughout the week-long process:

HMW make the city’s POI/Instagrammable destinations easier to find?
HMW make mapping out users top destinations on their trips quicker and easier?
HMW we help users plan beforehand as much as the users needing the feature at the moment to find destinations they are looking for?
HMW save user’s time and energy by offering insights about specific POI's for user’s before visiting these locations?
HMW makes an easy and carefree experience for user’s to find their desired POI?

Solution

This feature will help users in a few ways to be able to have the same end goal - finding the best spots to take those perfect photos. Creating the feature using familiarity from other apps (like navigation and travel apps) to make it easier for users to search and hone in on a location no matter the moment in time.

Organzied Design Sprint
Synthesized Research
Defined Persona needs

My Role

Designed the solution
Prototyped
Tested Ideas with Potential customers

Tools Used

Illustrator
Google Docs
Adobe XD

The first day of the sprint was to gather research and begin mapping. After getting briefed about the company, its constraints and needs, I learned about user interviews already conducted. I started by pulling quotes from user interviews, taking notes on their needs, and finding similarities within those needs. Then from these interviews, two personas were created: Nick and Sarah. It was time to create a map that these personas would most likely take within the app based on the research.

User Research

Once I took notes on all the different user's it was time to synthesize my research to find frequent themes and insights. I started this by building a key of items users liked and what that feeling they were looking to create.

For Example:

James was quoted saying "If I'm in a new place, I like to find the 'must-have' photo ops, even if they're a little touristy. Sometimes I look no Instagram for the most popular photos in the area and plan out my day from there"

So James likes to:

- Use Instagram to find popular sites around him

- Check off those "must-have" photos on his list regardless of the popularity

- Plan his day around the locations he finds to fill that "must-have" feeling

James' personality is: The Gotta-Have-It user

Personas

Sarah is a planner when traveling, she does the research but still wants to cut down her time searching and filtering through the best places to visit. She doesn't want to get let down on a location and wants to see it ahead of time in different user’s variations. She wants quick and easy searching so she can spend her day heading to those locations and getting what she wants.

Possible solutions for Sarah:

Click on the pin and can see the geotag - which immediately brings you to a feed of different user’s photos in that location
Facts about the location: the best time of day to go, best angle, rating of location - if rated too low there is no need to bother going - won’t get let down

While Nick on the other hand is different, he wants to take MORE photos but he doesn't want to hinder his explorations. He wants to easily find a great place along the way and doesn’t want to feel tied down by searching for a plan. He wants minimal effort in planning a photo op but acknowledges he doesn't take as many as he would like and wants help with that.

Possible solutions for Nick:

Show a map that drops a pin in key locations
Reminders notifications they are heading towards a location people have used - nav/time it takes to get there

Mapping

The next task was to create a map for each user of possible routes they would be taking within the app's feature. Below I create 2 maps per persona following the possible solutions I came up with.

The start of Day 2 was sketching. With a map of users' actions in place and the research fresh in the forefront, it was time to do a lightning demo. For inspiration, I chose apps that had specific features I believe that could help users:

Points of Interest
Finding new and posted POI's
Plan and Map our a Trip Itinerary

My goal was to check how other apps combine these features to ultimately help users pick a location easier while defining down what they are looking for. I decided to break down inspiration from four different categories: Photography, Restaurants, Social Media, and Trave/Tourist. Out of these different categories I drew the home page of 4 different apps from these categories pulling inspiration from apps such as Seamless, Pics Art, Instagram, Tok Tok, Klook, and What's Here to name a few.

Crazy 8's

Crazy 8's is always a great exercise to get ideas flowing. I performed this brainstorming exercise after I jotted down sketches in a lightning demo inspired by apps in other industries such as:

Photography
Social Media

Tourist
Restaurant

Critical Pages

So far in my sketches, I decided to proceed with a layout stemming from one of my crazy 8 sketches. I found the exercise to really force me to put pen to paper my gut feeling about the direction based on some of my research from other apps throughout different industries.

My critical screens (and remaining screens) are a hybrid of inspiration from a few different apps. I decided to take the best features of these apps in order to meet the needs of the personas/different users of Gram City. I pulled concepts from:

Seamless = “more near you” feature on the homepage
What’s Here = map layout - including the map itself but also the features to have different groupings of POI’s organized by color with a color key - but would be categories of locations in this instance
Expedia/Klook = are both similar in the fact that they possess many different options and features for their travelers: hotels, public transportation tickets & passes, car rentals, things to do, tourist spots, what’s nearby, etc.
Instagram = always a good app to implement the UI from for a clean and easy user-friendly experience

Following the direction established from my previous sketches, it was time to reference my critical screens as well as my mapping for my personas in order to create a comic strip.

Storyboard

While sketching the comic strip, I wanted to create an outcome that resolved the answers to my HMW Q's I previously had written down and would help users accomplish the necessary results.

Using the comic strip/storyboard including the needs of both personas: Sarah and Nick. I have used these as a basis to build my high-fidelity feature for the Gram City Prototype. To help with the visual design, I decided to create a quick style guide first to keep everything consistent, as well as follow a very clean UI with simple buttons and icons and let the images and map within the app really be the driving factor to help with decisions and navigation.

Elements in Prototype

For a user like Nick who is most likely already in their destination city and looking for places in the moment. In that case, the map function might serve them best. It gives users understanding of what’s immediately around them. By clicking on the map icon, users are sent to a map of their exact location where they can either click a point on the map or filter their search by categories such as Architecture, Nature, Murals, Exhibits, etc. Another feature added to this page was a “Nearby Now” tab so users can get inspired by some top destinations directly around them and from there, be able to click and decide what their next location might be.

Once a location is chosen by the user, the location's page opens. To the right there are two actionable options for the user: To begin following directions to that location, or if planning a trip ahead, users can add this location to their current or upcoming trip’s itinerary. The location’s page also includes a brief background about the location, a few different expandable tabs, and buttons that allow users to:
- See their travel options to get to that location
- Open the location back up in the map
- Get inspired how to take a photo of that location
- See other user’s comments about the location

- Gain more insight into how they can get the perfect shot

For a user more like Sarah wanting to map out their trip beforehand, the Itinerary page would be beneficial for them. On this page, users can create a new trip and begin finding locations they’d like visit during their trip. Users can also go back to already created itineraries for their upcoming/current trips and edit them at any time to tailor their changing needs. These pages show a trip to New York City that Sarah has already created, an overview of locations she’s already saved for her days there, and an option to add more destinations. Here she can also see highlights of tops spots users have already that she has on her itinerary, a section where she can plan her transportation between locations, and a “Need More Inspiration” tab, that shows some not-so-typical photographed locations that provide that unique and effortless great shot.

If a user is stumped about what is around them, or what are some cool places in the city they will be traveling to, clicking the “Need More Inspiration” tab can be beneficial. The tab opens up to a discovery-like page where users can click the plus button in the top right of the image to immediately add that location to their itinerary, or click on the image to expand it's location’s page. On this location’s page (like shown above) users have a few options to help them do what they’d like to do next. In this scenario, Sarah would be adding this restaurant as a stop to her upcoming trip itinerary.

Sarah added Hutch and Waldo to the 4th day of her itinerary by clicking the day of the trip she wanted to add it to. Once the day is clicked, the location is automatically saved, and the user is able to see a break down of that day and all the locations that she has saved to visit. Here is where, if Sarah is content with her choices, she can click “Map Out Destinations” where she can create a mapped out version of her itinerary. This can provide insight into distance between the locations’ and provide a better understanding of transportation and distances between locations within the city that you are traveling to.

A map of all the points of interest Sarah wants to stop at on Day 4 is shown visually on the map as well as the names of these points and their addresses listed out below. The app then provides Sarah with a planned-out itinerary of all the locations in the most logical way to see all of them efficiently. When she feels comfortable with the mapping of these locations, she can click the Done button that would be below the list of these locations. A confirmation notification comes up with a purpose string letting Sarah know she can still go back and update or edit this plan at any time.

Using the map icon again, a user like Nick will probably use this function far more than mapping out a pre-planned trip itinerary. If Nick clicks a point on the map he is nearby and interested in, then he can click the directions button on the image of the location he has found. Once doing so, the app uses his current location to map out directions to the point of interest he is heading to. Like most navigation apps, here is where navigation elements are broken down such as: the time it takes to reach the destination, the distance, and listed directions including street names and the distance on that street. Everything is ready for Nick to follow to get to the location in which he wants to go.

Once Nick has used the directions to reach his location, and a notification pops up notifying him he has reached his point of interest, as well as a reminder to take a photo - since ultimately, that is the whole point of using Gram City! Then after clicking ok, a tab pops up that allows users to see how others have to choose to take their photo of this location. This could provide insight and inspiration for users finally at their destination feeling like they need some last-minute help getting that great shot.

Finally, once both types of users have reached their ideal destinations and take their perfect shot it’s time to share! Clicking the Add Photo buttons is where users can-(if they want to) share their pic on Gram City. This will help other fellow users get that perfect shot as well! While uploading their shot they can tag the location, and give more details about the overall location's experience. They can elaborate on the time of day, the angle of the shot, and the direction of the photo. There is also a section where users can keep record of their shots and their travels. Unlike social media apps, there isn’t the ability to like or have followers -since these images are geared to be shared to those apps. This is a home to store your images, say a little about yourself, and be able to keep a record of cities traveled.

Prototype

All these elements can be seen in the working prototype created using Adobe XD and Invision.

For testing, I set out these goals:

To check if it's clear what this feature does and how it helps the users.
To check if the navigation between pages is user friendly.
To check if users understand how to change locations, find points of interest and map out an itinerary
To check if there are any missing interactions in the feature.

Goals

Results

Ending Thoughts

It was a new experience for me to use Design Sprint to rapidly design and test the prototype. I watched the video series on Design Sprints as well as took a virtual workshop with Eran Dror of Remake on Meetup. I love agile UX and happy to have applied the ideology to a project.

The biggest lesson during this for me was to give myself a time limit and to allow the ideas to grow quickly and thoughtfully as rough and messy sketches. There is a beauty in the madness of quick inspiration that allowed me to step away from the need to for perfectionism. As a very detail-oriented person with strong visual design skills, I find myself always looking back to try to make things better, but in this case, it was refreshing to step back and let some things go. Which of course in a real Sprint Week or in Agile UX, is ok because iterations and updated can always be added later on.

Thank you for reading and hoped you enjoyed the experience!

Let's work together on your next project!

Send me an email