GramCity
Creating for the creative
A 5 day design sprint challenge to create a product that helps all types of users find that 'instagram-able' spot near them.
Information
The Goal:
GramCity is a new startup that wants to help people find the most instagram-able locations to take a photo in any city
The Problem:
GramCity wants to create an active community of users who find and share their favorite locations
Design Constraints:
-
This was an addition to a pre-existing app: GramCity
-
Create features that help promote an active community within the app to share users' favorite "instagram-able" spots around them
Research & Personas
Research was provided by GramCity. These were some of the research highlights provided:
"I usually look for places that will catch someone's eye - visually stimulating, bold colors, or an interesting composition usually makes for an awesome photo." - Anna
"If I find a great photo op, I'll hop on a train and go there, even if it's far away! For me, it's fun to go hunting for that one photo that you want." - Alex
"Nothing worse than walking past a great photo op and finding out about it later! I want to know the good spots near me while I'm actually there!" -Francesca
Personas were also provided:
Nick
24 Years Old
Video Editor
Los Angeles, CA
Behavior:
-
Nick takes road trips to new cities at least 5 times a year. He loves traveling, documenting his trips, and sharing his photos - either on social media, or in a group chat with his friends.
-
When in a new city, Nick likes to make the most of his time there - he'll walk and explore for most of the day, and doesn't have a strict plan or itinerary
Frustrations:
-
Nick always regrets when he doesn't take enough pictures, but he also feels like he's missing out on the travel experience if he's constantly on his phone taking photos.
-
Nick tries to snap a few photos of the different htings he's doing, but he feels like he may have missed out on some good photo ops that were already near him.
Goals:
-
Nick wants to find great places to take photos to document his trips, but doesn't want to spend time researching or traveling out of the way to find them.
Sarah
27 Years Old
Event Production Manager
Chicago, IL
Behavior:
-
Sarah travels a lot for her work, and spend a lot of time in new cities with time to spare between the events she's working on.
-
Sarah spends most of her free time taking photos, after taking a photography class a few years ago.
-
Before visiting a new place, Sarah spends some time looking up photos on instagram, pinterest, and other social media sites to get inspiration for photos she wants to take on her trip.
-
Sarah thinks about the photos she wants to take, and plans her day around that.
Frustrations:
-
Sarah doesn't spend a lot fo time in one city, so she wants to get the best possible photos when she's there. She doesn't mind spending time traveling to the places for a great photo - but if the place isn't what she expected, she feels like she wasted her time.
-
Sarah has to spend lots of time looking through other peoples photos to find palces she wants to go. If it's a lesser known place, finding the address or details on the location can take a lot of time to research.
-
Sarah likes to see the different ways people take photos of the same place, but it's time consuming to scroll through lots of "average" photos to find a few good ones.
Goals:
-
Sarah wants to easily find locations and examples of the best photo ops in a city before planning out her day around visiting them.
Day One : Map
After analyzing all of the information that I was provided through the challenge, I envisioned what the end-to end process may look like for the user using this feature in GramCity. I mapped out a couple of different user flows and ended up with two user flows that I felt were the most thought out flows for a potential user.
As a photographer myself, I thought about the process that I go through when I book a photoshoot for clients, or when I'm simply traveling and want to get a good photo that I can share with friends and family when I return. Additionally, I asked an array of different individuals and potential users on how they felt when they went about finding a good place to take a photo and took into account how they felt about the process.
To provide more context for myself in this design sprint, I had a few individuals look over the user flow and added some additional input into the user flow in case of any areas where I might have missed initially.
Day Two : Sketch
Before I sketched anything out, I conducted a solo version of lightning demos and conducted secondary research. I researched other competitors' takes on how they went about addressing the issue that GramCity was trying to solve for their users.
From what I could conclude from further research was that there really isn't a place that easily allows users to upload and share locations that are good spots to take a good photo in.
​
The other "competitors" had a vaguely similar idea to what GramCity is trying to achieve, but the entire process is not user friendly and I personally found the experience to be challenging when looking for places to take photos near me.
The next step of the process was to finally sketch things out using all of the information I had gathered along with the provided information.
I began by referencing my user flows and deciding on one of the two user flows that I had previously narrowed down from.
​
I then performed a Crazy 8 exercise where for each minute of a total of 8 minutes, I created 8 screens and solutions to what I envisioned that this new feature for GramCity may look like when fleshed out.
​
I initially really wanted to focus on the ability to allow users to essentially look at a map and from their location choose photos/locations that were popular around them so then they could travel to that specific location if they so chose to do so.
From there, I chose the screen I felt the most secure in and fleshed out a flow of what the feature would look like with the additional screens that would come before and then follow the solution screen that I had decided on.
At this step of the design sprint, I decided that the third option (from the left) felt the most reasonable to me. I had felt at the time, seeing a list of locations aorund me with a preview of the photos from that location would be the easiest for a user to navigate and the simplest function for the intended user.
Therefore, for that screen, I created a few screens before and after that initial screen to showcase what the process might look like for the individual that were using this feature of the GramCity app.
Day Three : Decide
For the start of Day Three, I began by reviewing all of my sketches, all of the Crazy 8 possibilities and the simple user flow I had created the day before. I was still set on the solution screen I had decided on and so after deciding to double down on the solution screen I had decided on the previous day, I put together a very short and simple wireframe showcasing exactly what I had in mind to create in the high fidelity screens.
The reason why I had chosen the screens that I had was because I felt like it was more important to the potential user to input their location at the current moment that they were using this app feature.
I felt like the most important aspect for the user would be to input their location and from there choose the type of location they would want to go to, whether that is a cityscape, or something in a more natural realm of things.
Therefore, that's where a lot of my motivation for these screens came from. The process of inputing one's location first, then choosing the type of location and then from there getting more and more detailed was the process I had in mind for the user.
​
From this point on, I was pretty set on this process and this user flow that I had set out from the start.
Day Four : Prototype
I was finally at the step where I could prototype out my ideas. This step is consistently the step that continues to excite me and look forward to the most because seeing everything come together visually allows me to really see what exactly I am looking at.
I began with my first draft of high fidelity screens:
With a few slight changes from the sketches from Day 3, I kept the premise and concept of the process similar to what I had initially envisioned.
​
My first draft of high fidelity screens showcase the process that I had in mind. Starting with the most generic part of the process, the location the user would be looking in, and then the type of location they had in mind. From there the third screen would show the most popular "instagram-able" spots near the user under whatever category of location they had chosen in the previous screen.
​
From there on the user could tap on a bundle of photos available to them and have a more detailed look at the bundle of photos available to them from other users that had submitted photos to this app. From there, the could simply tap "Go to maps" and then it would take the user to a screen showing a map and how long a drive to that location would take them.
​
Aesthetically speaking, I wanted to incorporate GramCity's hot pink color that came with the design challenge. Although looking back on this first draft, it may have been a touch too much hot pink.
Day Five : Test
On day five I gathered five user testers to give me their input on the high fidelity screens. My focus was on two factors for the testing:
-
How easily do users find a photo spot
-
What other information would they like to see in the photos that they view (other than location and the photo itself)
Testing for the initial high fidelity screens went smoothly. There weren't really any confusion from the user testers. They understood what they were viewing and they all reported that navigating the app was pretty simple and easy. However, the feedback was generally that things felt a little undone and maybe even a little "too simple".
In my testing I found that users wanted to see more and know more about the photos they were looking at. And even though the users didn't have any trouble navigating the app, the flow felt a little stuffy and rigid to them.
​
They also felt a little restricted in how they were viewing the photos that were close to them. Some users felt like only having a search bar from the start was really limiting because "what if I want to plan ahead of time and look at locations that aren't near me?".
​
With all this feedback, I went back and redesigned the app one more time.
After the feedback from testing, I went back and looked over all the research, the sketches and all of the previous work from the previous days and put together an almost completely different app.
​
In my second draft of the high fidelity screens, I wanted to allow users the option to either just scroll, or search for more specific locations or types of location if they so choose.
I also wanted to include more information for the user to look at if they wanted to know more information. I wanted that aspect to be available to the individual in mind.
​
I also wanted to provide the ability to both like a photo and also save the location that the photo was taken in. On top of that, for the location, rather than doing a street and address, I opted for exact cordinates because as a photographer myself, I know that some of the best photo locations don't always have a perfect address that someone can just input into your maps app.
​
Additionally, I added an area for a description of the photo, photo credits, the distance and time it would take to get to the location from the user's current locaton, and the call-to-action button: "Go".
From there, I added more components to the app and this feature. Since one of GramCity's goals was to create a community within the app to allow users to share locations and photos within the app, I created a profile page where they could share their photos and their own saved locations that the users themsevles frequent for photos. Also, I provided users with an area where they could view saved photos and locations if they ever wanted to go back and look at the photos that they would like to also take in the future.
​
Features that still remained intact from the first draft of high fidelity screens was the ability to filter and look at locations under a certain category, but that became much more condensed rather than an entire page dedicated to it. I also kept the location search feature.
​
As for the formatting of the app, I ended up going with a different solution screen from my Crazy 8 exercise. After testing showed me that what I had chosen wasn't the most insightful for the user, I recreated an app experience that users may already be somewhat familiar with and just simply provided more information for the user.
Aesthetically, I wanted to pull away from the full hot pink look. I still wanted to incorporate GramCity's color, but wanted something a little more easily digestable for the user. Something that wasn't as harsh on the eyes as the full bright pink was. So I based the app around white and had softened the hot pink throughout the app while still keeping it's full hot pink in accents throughout the app.
Reflections
The design challenge was heavier than I had anticipated. Since the research and the 'grunt' work had been done for me, I felt like this would a be fairly easy task going in, however reflecting back on the experience, focusing on the main issues and problem solving within a specific amount of time is definitely challenging, but well worth the effort.
As challenging as testing can be sometimes, I find I produce my best work after testing. User testing helps me catch a lot of functions and even aesthetic aspects that I don't initially think in the first draft of work.
​
I tend to have my mind set pretty early on in the process of what I think something should look like, but I am learning time and time again, that, that is not the case and iterations and change is good. Otherwise, I would not have a product that I was happy with at the end of the process.
Clickable Prototype
Other Projects
