GramCity

A photo editing app feature addition.

GramCity is a photo editing app that helps users easily make their photos look awesome before sharing them on Instagram or other social media networks.

GramCity wants to design a feature to help users find awesome places to take photos, wherever they are. I utilized the Google Venture design sprint strategy to come up with a solution for this project.

Timeline

1 Weeks

Team

Solo

Role

Lead UX Researcher, Lead UI Designer

Tools

Figma, Google Drive, Miro, Zoom

Day 1 - Map

Problem Insights

GramCity wants to expand and explore helping users find the perfect photo op.

For this project, we will be utilizing the Google Venture design sprint method. We’ll be working only on the new feature of the app without worrying about the remainder of the app. 

We will be trying to help find physical places and locations by enlisting their community of users to start socializing and sharing when they find a good photo opportunity! They want to try and find photo op inspiration in tourist attractions, architecture, art, or just even everyday things. 

Affinity Map

Understanding about how to find places to take photos was key.

From the information the company gave, they had done user interviews and I was able to see the answers to one of the questions they had asked: “Tell us about how you find great new places to take a photo.” 

I took those answers and broke them down into different key points and then reorganized them to see what were the main points I should focus on when building this feature.

User Personas

The main two different types of users: the spontaneous one and the planner.

The company had provided two user personas for me to utilize to figure out my solution for the feature.

How might we questions

What are the questions that I want answers to?

How might we…

…find photo opportunities without researching or traveling?

…find photo opportunities with photo examples and logistical information?

Product Map

Step-by-step process to figure out how to get photo.

Day 2 - Sketch

Solution thoughts

What features are needed to accomplish GramCity's goal?

Before I started to look at other apps for my solution, I started brainstorming what features I wanted for the app.

  • Location tags on edited photos
  • Be able to search for locations or see current location choices
  • Be able to save/sort places
  • Be able to favorite photos and refer back to them
  • Be able to see photo op details (Ex. address, location instructions, how many saves, tagged photos...)
  • Be able to see map view or list view

Lightning Demos

The idea was to find inspiration fast!

For inspiration for the new feature design, I looked to Instagram, Zillow, Google Maps, Pinterest, and VSCO.

Photo Editing

This app was originally created for photo editing and I wanted to keep that in mind as I added the new feature. For this portion, I got inspiration from VSCO and Instagram.

With the photo editing portion of the app, I wanted to add the option of being able to post within the app and tagging the location. Looking at how Instagram added their tags was helpful.

Search

For the search options, the solution I wanted to design would have an option for users to look up photo opportunities near their current location or they could just search up any area. 

Zillow shows a good way to display current location.

GramCity is a photo editing app first and foremost, so I wanted to incorporate in the search/discovery area a lot of photos and imagery so I got inspiration from VSCO and Pinterest.

Results - Map View

With a feature that shows location, I’ll need to have screens with map views. I took inspiration from Zillow and Google Maps. 

I wanted to make sure to include a “current location”option in my solution because people like my persona “Nick” want convenience and planners like my persona “Sarah” want to map out their travels accordingly.

Results - List/Picture View

While the map would show results on the map, I also wanted to give the option of seeing results as a list or as pictures. So I looked at how VSCO, Zillow, Pinterest, and Google Maps displayed their results.

Zillow and Google Maps offer both a map view of locations as well as list views. While VSCO and Pinterest, show their search results as pictures so people can see things visually.

Location Result

Ideally, once a user has selected a photo op, they can click into the location to find the exact address, directions to the location if there is additional travel included, see how many people have saved the location, and photos that people have taken there.

I got the inspiration for this page from Instagram and Google Maps. They have good “about” pages that display pictures as well as additional information about the locations.

Example Photos

Because GramCity is a photo editing app, the page that displays all the photos has to be well put together. So I went to VSCO and Instagram for inspiration. They both had great ways to display photos.

Solution Sketches

Figuring out the layout by sketching different designs.

I utilized the Crazy 8s method in order to try and find the best design for this screen and then I focused on the best solution and created a flow. Before I began my sketching process I listed out all of the features that I would want on this page:

  • Search Bar
  • Current Location Option
  • Top Saved Locations Suggestions
  • Photo Examples

Day 3 - Decide

Storyboard sketches

A visual pathway for the new addition to the app.

By sketching a storyboard, I was able to make sure that my solution fulfilled all of my goals.

My next step was to clean up my sketches by making them into wireframes on Figma. I wanted to make low-fidelity wireframes because I felt that my sketches were limiting the full potential of what I wanted to show for the new feature. As I was working, I ended up adding more screens because I found I wanted to add more things for my working prototype.

Day 4 - Prototype

Prototyping

Creating a model app to confirm feature functionality.

I wanted to make a realistic prototype so that the user can feel immersed in the experience so I made high-fidelity versions of each screen.

I had two main goals for users to be able to complete. The first goal was for people to be able to conveniently locate photo opportunities near them. The second goal was to make it so that people who wanted to plan out their trips could look up spots and save them. 

I also had some secondary goals that I was able to achieve. I wanted to be able to have users look up popular photos for inspiration at the spot they wanted to go to and also be able to favorite the photo. I wanted for users to also have the ability to look up keywords for photo opportunities they wanted. And lastly I wanted for users to have the ability to look back at their saved spots and favorite photos.

Day 5 - Test

Usability Testing

What are the main pathways of the feature?

The goal for testing was to see if I was able to achieve the company goal to make a feature that not only caters to our first user persona "Nick" who wants to be able to go to photo spots of convenience but also to help out "Sarah" who plans her trips and is willing to travel for that good photo.

What's near me?

This flow displays the ideal path for user "Nick". He would be able to look at photo spots near his location whether as a list or as a map.

Can I look back at this later?

I wanted to differentiate saving a general photo spot and favoriting photos to show the difference between wanting to go to a certain photo spot for pictures and being inspired by a particular picture.

How can I find my favorite type of photos?

All photographers have preferences about what type of photos they like to take, so rather than just limiting users to only look up spots by location, I also added the ability to tag photos with different characteristics.

Usability Test Results

The general opinion after testing was good!

The overall result was that most of the tasks were fairly easy to get through and the experience was positive.

Conclusion

Future Iterations

Here are some suggestions for improvements.

Current Location

Almost all of the users struggled with finding the current location. It was unclear if this was due to the fact that the task was for users to find the current location and then to find the map. It is a user experience problem because although you can click on the “current location” icon from this screen, users still choose to try and click the map button. I would try to improve this step and make it easier for users to know how to utilize the “current location” icon.

Current Location - Map View

For this page, some of the users commented that this page was a little hard to see what the pins were. I would show that this screen is zoomable and you would be able to enlarge the pins to be able to see the top photo of the spot better. You would also be able to scroll around on the screen to look at other locations nearby.

Final takeaways

I learned so much from doing this quick design sprint.

Design Sprint Process

This was my first design sprint and I learned so much from it. This method is so powerful in order to figure out a solution in a shorter amount of time. To be able to go over the information, look at examples of solutions, design, prototype, and test all in a span of five days. I wouldn’t have thought it was possible to do everything so quickly and still be able to produce a working product.

Crazy 8s

Sketching different versions of the same screen under a time limit was difficult but I was able to discover so many different solutions that I wouldn’t have considered. Although I didn’t end up using any of the screens that I had sketched out, I was able to take different parts of different screens and put them together for my final solution.

Time Constraints

Although I was able to produce a high fidelity prototype within the week’s time, I definitely worked over the hours that were recommended to focus on the project. In the future, it would definitely burn me out if I were to do this for every project. Looking back, I definitely think I need to stop trying to focus on minor details so much and focus on the overall process more.

More Projects

Website Redesign
Brian BLack Tea
See More →
APP Redesign
Zencey
See More →
Additional Work
All Projects
See More →

Let's Connect!

If you like what you see and want to work together, get in touch!