Jasmin Plouffe

 
 

How to find the perfect places for insta worthy pics?

 

I love taking photos especially when I travel. But how many times have I missed that one place that is notorious to take photos at. I figured if I had this problem then other photographers and tourists must have it too.

Therefore, I created Gram City an iOS (native) mobile app that lets users find the best places to take a photo in any city. The app features various points of interest including architecture, art, bars, restaurants and pop culture landmarks that will get you likes on your Instagram posts.

 
 
 
 
 
 
 
jasmin-plouffe-designer-gram-city-31.jpg

Project:

Independent Project


Role:

UX/UI Designer


Deliverables:

Competitive Analysis
Feature Prioritization
User Flows
Sketches
Wireframing
Prototyping
User Testing


 

Challenge:

Design a map screen that lets users find landmarks near them where they can take a great photo.


Results:

Actually testing out the app proved to be the most beneficial because now it showed what a user was looking to do versus what I thought was I thought a user would like. The visual design is really the finishing touches on a product.

 
 
 
 
background-ab5aa3.png
 

How might we design a map that allows users to easily find notorious location to take photos at?


 
jasmin-plouffe-designer-gram-city-01.jpg

The Competitive Analysis

What I learned:

Upon completing the competitive analysis, I learned when a map had too much information on it, it was visually overwhelming. When a map had too little information, the user does not have enough information and has to do more work in order to decide on that particular location.

The Basic User Flow

The Sketches - Round 1

My first round of sketches were very general and simple. I wanted them to mimic the basic user flow that I came up with. This gave me a basis to expand my sketches further. I decided to add the current location pop up at the beginning. Since Gram City is an app with a map, it only made sense that the user would be able to see their current location without having to manually enter it.

 

The Sketches - Round 2

My second round of sketches detailed the user's path more clearly. I thought about how the user would interact with the map and what features would be most important (in pink on the right) to the user to get to their chosen Gram City landmark. 

 

The Inspiration

After a recent trip to Denmark, I was inspired by the simplicity of the Louisiana Museum map. Because of the two different mediums, the white map does not get lost against the white wall. I also love the simplicity of the map's features. Each wing is printed in black and the English translation is printed in grey. The hierarchy pops right off the map. Even with the information and bathroom symbols, the map is still not overwhelming and cluttered. It is very easy on the user's eye. I also was inspired by this save the date by Underwood Letterpress. The abstract city guide says so much with so little detail.

 

Museum map of the Lousiana Museum in Denmark.

Save the date by Underwood Letterpress via Instagram.

The Wireframes 

Visually, I wanted to keep the map clean and simple. Like my inspiration, I wanted the map to be as concise as possible. Give the user enough information to get to their desired location without being inundated with information. I drew the map very linear, keeping it in white and grey to allow for the more important information to pop right off the page.  The street names are in black not to get lost against the grey and not to fight with the color coded landmarks. Each color coded landmark really grabs the user's eye to the specific type of location they are looking for.

Just like the map, the info box is also very clean and simple. I kept it white so the photos will pop when the user selects the desired location. I also made the info box a bit larger than the other apps I analyzed. I wanted more breathability and white space so the information is not too confined in the space.

 

The Visual Design 

Because of the number of repeating motifs in Gram City, I created a symbols library to keep everything organized and consistent. It was easier to drop in each motif instead of creating a new one for every screen.

 
 

One change that I decided to make was revise the info box. During the wireframes, I wanted the emphasis to be on the photos. I really wanted them to pop against the white background. However, as I was adding the actual photos to the info box, the box itself seemed lacking. It blended into the actual map too much and the user would not be able to see much of a difference when it popped up. So I added a pop color to grab the user's attention. I also revised the actual layout of the info box. It seemed unbalanced. Because the goal is to show the popularity of the Gram City landmark, I increased the size of the Instagram photos at the bottom. I added one more image so it felt grounded and even. I also made the name of the landmark and verbiage "on Instagram" bolder to emphasis their importance over the other elements in the info box.

The User Testing

I tested my initial prototype on 3 users. I found conducting the user testing was more beneficial than I expected it to be. I learned that the 67% of users felt lost initially after opening the app. I need to examine the onboarding process more to make the user wants to continue to explore Gram City. Seeing users interact with the app was also really good to see too because it showed me what was their natural gestures were.

 

The Conclusion

My First Attempt To Address The Challenge:

provided valuable information. By conducting user testing, I learned what a user was looking to do versus what I thought was I thought a user would like.


The Major Challenge:

If I was to continue designing Gram City, I would concentrate on the onboarding process. The app seemed more intuitive for younger users but more confusing for older ones.


I Realized I Didn’t Understand:

that the visual design is really the finishing touches of a product. Picking colors was the least of my worries.