Case study: Google Keep
Ironhack project-3: propose a feature
For this individual project, I was needed to study & analyze an already existing app and incorporate a new feature into the existing product. I chose Google Keep app as I use it in my everyday life. The main focus of this project is on UI design.
Project: Add a feature
Duration: 3 part-time weeks
Device: Mobile app for an Android version
App: Google Keep
Design Challenge
How might I help Google Keep users make notes in a more structured way to better organize their travel information?
What is Google Keep?
Google Keep is a note-taking service included as part of the free, web-based Google Docs Editors suite offered by Google. It is available as a web application as well as a mobile app for Android and iOS, with a total of +1B users across the world.
The interface of the app is similar to a bulletin board with post-it notes. It is used for making different notes, lists such as grocery lists, books to read, movies to watch, things to pack for travel, etc.
The thought behind the Idea
The idea behind the new feature came in the picture when I wanted to plan my next trip to Paris. As a regular user of Google Keep, I started making notes of the information/suggestions I got from friends & colleagues on it and struggled to make a cohesive one. Also, it was difficult to find & edit the required note every time there was any new edition/suggestion.
To check if my idea stands the ground, I did the feature comparison with 3 other such apps, to understand the functionality of note-taking apps, their features, and to locate the area of improvement for Google Keep.
I did 5 user interviews to understand the people who use Google Keep, for what purpose they use it, what features they miss in it, and if they would like to use the new feature I was proposing.
Here’s the excerpts of the interviews:
Based on the response I got from conducting the interviews, I could clearly see the need for Google Keep to be able to offer wider possibilities, where users can use its simple yet more diverse application for purposes such as planning a trip, planning an event, reading lists etc.
For my proposed feature, I narrowed down the requirements & made my goal clear to draft my proto persona, Travel enthusiast Tyler.
User journey
From the user journey of Tyler, we could see that he started getting information from all different sorts of sources regarding planning his next trip. As a routine user of Google Keep, he starts to jot down the information in Google Keep in a random manner. Someone who likes to have his things managed more systematically, struggles to find ways to manage his notes/information put with more structure in the current Google Keep app. Apart from structuring the information, he has to keep checking the weather separately on the weather app for his travel dates.
This journey revealed the opportunities we have to design some solutions that would help Tyler make different notes/lists efficiently. Like most of the young people of his generation, he likes to plan travel, small events, meetings with friends and family in advance, and this can be a tool he could use to plan his travel better. Working through the user journey helped me understand the situation in-depth and derive the problem statement.
Problem Statement
Travel enthusiasts need to find an organized way to manage their travel informations on finger tips because they want to plan better & not waste their time.
Ideation
Based on the information I gathered about the possible solutions, here’s the new feature for Google Keep I want to introduce to all of you. It’s called ‘Travel Template’.
As an existing user of Google Keep, travel enthusiast Tyler makes notes/reminders about booking for the flight/ hotel booking/ things to pack etc. So, the new feature comes in as soon as Tyler uses any of the trigger words and prompts him to use the new Travel template for Google Keep.
Before moving forward with the design, I made a user flow for Tyler to follow him from opening the app to adding the different notes/lists needed to plan his travel.
Lo-fi sketches
Usability testing
Before I started creating my Hi-fi prototype, I conducted usability tests for Mid-fi prototype with 3 users to see if they see the new feature as part of the existing app & the flow and how they interact with the new feature to manage their travel information. I got useful feedback which I incorporated into the design and worked towards making Hi-fi screens.
“The first look of the travel template is a bit new to me. It doesn’t give me a clear flow.”
“The weather information is confusing. Is it the current weather or for the travel dates?”
“Why there are ‘more buttons’ on every note?”
Design System
“Design always loves constraints”
For this project, thinking about the feature, how to implement it with an existing brand, its design guidelines are more important. Reading through the brand guidelines, values gave me a clear base to come up with the design that feels native to the existing app. Breaking down the app into smaller pieces helped me understand the rules behind it.
Based on the theory coined by Brad frost, I could understand the importance of having an inventory to build a consistent design through the whole website/app.
Here are some of the components I made along the way I was creating the screens for the new feature.
Evolution of a screen
This is an example of how I developed a screen from Lo-fi to Hi-fi, with many design iterations, based on intuitions & insights I got from the user tests I did. Designing the Add button for the proposed feature, to make it visible yet not on-your-face, readable, while following the brand guidelines gave me a real sneak peek into how a UI designer works and has an impact on the users & their behavior.
Hi-fi prototype
Once I completed all the screens, I created the Hi-fi prototype in Figma. The tasks for the prototype are:
- Add a reminder to Google Keep, about booking tickets for the Paris trip
- Once the new feature pops up, add destination & travel dates
- Add ‘ Things to pack ’ list to the travel template
- Add ‘ travel articles ’ note to the travel template
So, this is how it works:
Once the user adds the reminder in the existing app with any of the trigger words, the new app asks if the user is planning for a trip and wants to use the new feature- Travel template?
Upon clicking on the ‘ Try now’ button, the user gets the search field to enter the travel destination & gets the calendar to add the travel dates respectively.
Once filling up this information, the user gets the Travel template- with the destination as a title of the template, along with the travel dates mentioned. The user can also find the updated Google weather as part of the template.
The user can find the reminder which he/she made, through which the new feature appeared, as part of this template.
The template allows the user to directly access Google Maps & add the favorite/ want to visit places to it & have them updated in the Google Keep app as well.
The user can start adding lists/notes with the ‘+’ button, where there are new features to upload a photo, embed a video, add text & save a link. This allows the user to make a note where a text can be added along with the photo or a video.
Likewise, the user can keep on adding information to plan for the upcoming/next travel & be assured of having all the recommendations/ suggestions gathered from friends to be found at one place in Google Keep.
Please feel free to try the Travel template here! :)
Next steps
I feel that I was successful in adapting to the existing design system of Google Keep. What I would like to do is to test more users with the current Hi-fi prototype & gather more feedback regarding its functionality.
Also, due to the limitation of time, I narrowed down the requirement to travel information, but it would be great to design all different kinds of templates to help users manage their notes more efficiently & easily.
Learnings
This project being an individual project, it was challenging to manage the work & deliver the product on time. Sometimes, I was too much focused on the smaller aspect of the project, discussing with other designers & teachers helped me move forward and think for the larger picture. Along the way, I learned the best practices and how to work smartly with components & variants.
I loved working on the UI design and especially working within the constraints always intrigue me to put my efforts more to reach for the better. Google is well-known for its design, I could learn a lot.
Thanks for reading :)
