Mountain Biking
City from Below
City from Below
City from Below

GramCity

A mobile app that helps people find

locations where they can take beautiful

pictures on Instagram

Artboard – 3.png
Artboard – 5.png

The Problem

People crave the idea of capturing pictures of places in cities they like, and they want to waste no time finding those places and going there. I have been hired by GramCity, a mobile app that provides services of helping people find locations where they can take beautiful pictures on Instagram, as a senior UI/UX Designer. I need to explore, study, and do thorough research on is how certain features on GramCity can provide a comprehensive geo-location functionality that allows users to find places for pictures near them based on their preferences. Further, the app will have built-in features that help users share pictures on social media for their friends to check out

The Solution

GramCity needs to present various types of places near users where they can take beautiful pictures to share on Instagram to share, and the process of discovering places has to be quick and efficient. It should not prevent them from spending too much time on the app itself but instead encourage them to get to the actual places to enjoy a live experience. Further, the app needs to incorporate navigation functionality and show more stunning visuals than words

Landscape Photography
Sunset Photography

Personas

Young generation, millennials mostly, who enjoy taking pictures of hidden places in cities. Some of them are photographers who like to share their work with others on social media, and some of them are genuinely interested in finding homes that they have never been to and telling their friends and family about them. All of them are interested in taking beautiful pictures, and they do not wish to spend much time on the app trying to find locations; they would rather spend more time on the actual sites

Persona 1.png
Persona 2.png

Site Map

For the site map, I have designed a basic layout of how the users will be able to navigate through the app from the Account page. The users will have a choice to check out the Homepage, where they can see recommended places and saved history, and if they want to be more specific for their search, they can go to the Find category and type in keywords to receive more narowed down result. Then, they can always go back to their accounts to see what other people say about the places they have recommended and take care of other security issues

Design Sprint.jpg

Secondary Research

For this project, I conducted a Competitor’s Analysis Research, exploring what other companies incorporate and utilizing to make the experience wholesome and enjoyable for the users. There are three features that I need to compare and contrast: Geographic Location Finder, Tailored Result based on Preferences, and Shared Photos and Reviews. The three apps that I selected, Around Me, Google Maps, and Apple Maps have all three of these features in a certain way, but some are not highlighted and fully functional. Thus, I have decided to accentuate what the navigating app can provide for users and incorporate the sharing photos mechanism into GramCity

AroundMe-on-the-App-Store-on-iTunes.png
ShowLocation.png
12915-7220-navigation_hero_2x-xl.jpg
Design Sprint (1).jpg

UI Elements

Image 1.PNG
Instagram.jpg
pexels-mohamed-almari-368893.jpg

For UI elements, I wanted to choose a color palette, "Retro Punch," because it has the color ingredients of Chili Peppers and Pink can be a mixed combination as a linear color. The color gesture of Instagram can also give the app an exuberance of resemblance and familiarity to users since the majority of the population in the USA knows and uses Instagram. Furthermore, the usage of high-quality pictures of places, especially landscape photos, will highlight the essence of the app and the core features it provides

Sketches

Out of these eight screens that make up the crucial flow of the app, the three most important screens are the 1) Selected Place 2) Gallery 3) Navigation. The GramCity needs to provide a complete result on where people want to visit based on their preferences, and it needs to show them how to get there. In addition, the app needs to include screens of photographic showcases, which can entice the users to check out the place even more

Sketches.jpg

Low Fidelity
Wireframes

I want to make sure that the app is quick and efficient, so the user can find the place where they like to take pictures of and enjoy the actual live experience on the spot, not on the app. I prioritize finding places based on preferences and distance, different visuals instead of words, and reviews to validate the legitimacy of the place’s fame are all critical factors in creating a comprehensive storyboard

Frame 3.png

Initial High
Fidelity

Here are the high-fidelity mockups that I have created based on the wireframes. The color that I pick is Pink, and I apply a linear gradient to it to make it look more attractive than a solid color. Also, I choose the Roboto font to make it look standard; I do not want to give the wrong impression to users that this is some sort of a gaming app with childish fonts. I structure the design to be picture-centered and the rest of the contents below the pictures. The Top Reviews are categorized by 5-Star Ratings first, and they will showcase what people say about the place. The last screen will allow users to share the pictures that they take on social media

Artboard – 13.png

Initial Usability Test

Usability Test.jpg

Five Users: They work Full-Time in different industries, and all five of them spend a significant amount of time on social media, particularly Instagram. They like taking pictures and posting them on Instagram, and they want to travel, especially to unknown and hidden places. They find Google Maps to be efficient in navigation, but its lack of photographic presentation makes it hard for them to be interested in those places. They all want to explore their cities as well, and this is the perfect type of app that they are willing to be tested on

Usability Testing: I explained to my users first that this is just a prototype, and more functionalities will be available if the app gets developed. The five users can navigate through the app without any issues since this is just one flow, and they can find which places are offered and how the app can help them get there


 

Revised High Fidelity & Prototype

Mockups 2.png
Mockups 3.png

Here are the high-fidelity mockups that I have created based on the wireframes. The color that I pick is Pink, and I apply a linear gradient to it to make it look more attractive than a solid color. Also, I choose the Roboto font to make it look standard; I do not want to give the wrong impression to users that this is some sort of a gaming app with childish fonts. I structure the design to be picture-centered and the rest of the contents below the pictures. The Top Reviews are categorized by 5-Star Ratings first, and they will showcase what people say about the place. The last screen will allow users to share the pictures that they take on social media

Validation & Improvements

Experience: The nature of this prototype is established on the notion that its purpose is to help people find places near them where they can take beautiful pictures in a fast and efficient way, and the process of testing selected users is communicated and executed very successfully. Every user can navigate through the app and understand each functionality. Still, they express their concern about missing out on critical information about places they pick and focusing too much on visuals. I consider this concern and explain to them that this prototype is made for this 5-day design challenge. One of the goals that the app is trying to accomplish is to make the app quick and easy to use, so the targeted user can find the location that he likes and spend more time experiencing the place in real life than online. Overall, my testing users can complete every task without issues, and I consider their feedback

Validation: After a week of drawing and understanding the problem and the solution, designing wireframes and high-fidelity mockups, and testing the prototype with users, I realized that the problem is solved, and the initial explanation that I provided can work with some technical changes. The users can find places based on their preferences, and they can go to the site using GramCity navigation

Improvements: I believe the app can improve with a more concrete navigating mechanism. It incorporates Google Maps as a source of navigation, and while it is the best navigation app in the world right now, GramCity needs to create its version of the navigation to stand out. Also, some of the categories can be more tailored down to “Hidden Places,” right now, they are very general categories that can be applied to pretty much any place in the world. If they can be more specific towards the users’ preferences, they will produce better results in the end

Next: Adobe