GramCity Design Sprint

UX/UI, Mobile, Android
Gram City main screens

Project overview

About the Project

Kids Can Cook was inspired by my interest in healthy diet and how to raise happy and healthy kids. We all want to protect children from being overweight or obese, diabetes, artery disease and cancer. Unfortunately, 34% of all kids between ages 2 and 19 eat fast food (read this study), which sets them up to have diseases and a long list of medications in their adulthood.

The Problem

There are not many options for kids to find healthy and fun recipes online. The limited number of recipe websites or apps that offer some recipes for kids have poor navigation and are not geared towards the kids. The design challenge for me was to build a solution with an incentive for kids to cook, to learn what kids need to know when they cook, and to design the best way to discover recipes that are kid-friendly and easy to make.

Solutions

Based on my research with children and their parents, I narrowed down the main factors that play in choosing the recipes and how they cook. The focus was to build a mobile app for easy access.

Role

Owned the UX and UI part of the design: finding the problem, researching, interviewing users, creating solutions in the form of user stories, task analysis, wireframes, visual design, usability testing and iterating

About the Project

I always wanted to try Design Sprint, a five-day process for creating a quick solution through design, prototyping, and testing ideas with customers. GramCity is a new startup that wants to help people find the most instagram-able locations to take photo in any city.

The Problem

GramCity wants to explore how and where they can help their users find great photo-ops near them. A solution should be designed as a feature for the GramCity mobile app.

Solutions

This feature will help users find physical places and locations. It will also help create an active community of users who find and share their favorite locations.

Role

Organized Design Sprint synthesizing research, designing the solution and testing ideas with potential customers.

User Research Findings

I had three main questions when researching the problem of how to help users find new photo-ops near them.

What kind of places GramCity users would like to find?
  • Unique places - hidden treasures
  • Interesting places with historic value
  • Movie sets
  • Bold colors, visually stimulating
  • Touristy places, must-have photo-ops
Building photo
  • Unique places - hidden treasures
  • Interesting places with historic value
  • Movie sets
  • Bold colors, visually stimulating
  • Touristy places, must-have photo-ops
Mickie Mouse graffiti photo
Bright colors graffiti
Brandenburg Gate photo
Do users prefer planning or no planning when they travel and want to take a picture at the interesting place?
Don't want to spend time looking for a place when in a new city.
VS.
No planning beforehand. Just want to find a place nearby.
Planning beforehand.
It's worth going out of the way for that one great photo.
How do users decide on photographing?
  • Users check Instagram for the most popular photos in the area.
  • Users check different photo angles of the same place.
Personas

There are two personas of users: Sarah who likes planning and researching and her goal is to find locations and examples of the best photo ops in a city; Nick who doesn't want to spend time researching or traveling out of the way to find places and his goal is to find great places to document his trips.

Planner personaNon-planner persona
Flow Map
A photo of a flow map
Lightning Demo

For inspiration, I chose apps that show results on the map. My goal was to check how other apps combine map view with a list view and how a user can quickly go through results and get a quick view of the place. These are examples from AirBnB, Lyft, TripAdvisor, Yelp and Zenly.

Airbnb screenshotAirbnb results screenshotZenly screenshotLyft screenshotLyft trip screenshotYelp screenshotTripAdvisor screenshotTripAdvisor screenshotYelp map screenshot
Crazy 8

I used Crazy 8 method to quickly go through some of the ideas for the main screen - show results on a map since this is a primary activity.

A photo of crazy 8 sketches

My three-panel board includes a screen that comes before the critical screen, the critical screen and a screen that comes after the critical screen. The critical screen for this app is the map with results. The previous screen is the page where users enter what the search criteria and the screen after is the detail page of the selected pin on the map.

A photo of three-panel board

Day 3: Decide & create storyboard

Sketches
Sketches
The screens in my sketch are:
  • What kind of a place are you looking for?
  • Where do you want to find a photo-op?
  • Map with results
  • Results Details in the bottom of the screen - short version
  • Results Details open - long version
  • Results Details Photos
  • Recommendations/Suggestions
A photo of main screens sketches

Day 4: Prototype

ScreensPrototype
Screens

For the visual design, I chose to follow Material Design principles and designed this app for Android OS. During prototyping, I decided to change the flow from my initial sketches and removed a feature for leaving suggestions.

What would you like to photograph?

This page contains different types of categories that users can select. Multiple categories can be selected. When at least one category is selected, there is a button Search in the bottom of the screen.

Main screen with categories
Map and list views for results

The default results view is the map view where a user can enter a location. The user can toggle between a map view and a list view by clicking map or list icon and pulling the tab with results up or down.

Map screen
Photos

One of the most important feature is to view photos of the place so that a user can make a decision. In MVP my suggestion is to pull the photos from Instagram based on the location.

Since GramCity also wants to build a community, I also added a number of how many times this location was saved by GramCity users.

Pin and photos screen
Prototype in Figma
A screenshot of a prototype

Day 5: Test & Validate

Usability testing GoalsResults
Usability Testing Goals

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 location.
  • To check if there are any missing interactions in the feature.
Results
The label for Search button turned out to be confusing. To make next steps clear the button needs to be labeled Next or Show Results.
It is not clear that the points of interest are around user's current location. I need to add a location field that users can tap and edit.
Home page screen
Users would like to have an option to edit their search on this page. So I need to add a new flow how to change both location and a category from this page. I can follow Yelp example when on tap a new page with 2 fields for location and a category opens.
Map page screen

Learnings and reflections

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 Sprint and actually got hooked up on their podcast "Product Breakfast Club" with Jake Knapp and Jonathan Courtney.

I also learned about difference designing for Android OS vs iOs, e.g. the back button is provided by firmware in Android phones so there is one  thing less to include in design.

The biggest lesson for me was to give myself a time limit and to move on beyond perfectionism. I am a detail oriented person and I always have this question in the back of my mind "How can I make it better?". In the case of Design Sprint, I had a lesson on letting some things go.

Thank you for reading!