Google Chrome Bookmark — UX Case Study
How I combined five days research plan and Design Sprint to redesign Chrome’s Bookmark.
Problem
I was working on a group project using cloud based apps such as Google Docs, Miro and Slack. Me and my teammates are saving the links of our project pages on Chrome’s bookmark. Then, I noticed that they are having problems with it. Some of them were confused on how to find their saved pages. I was having the same problem. I was so frustrated that I prefer to search from the search bar all over again rather than use the bookmark list. So I decided to redesign the user experience of Chrome’s bookmark.
The Challenge
Redesign the Google Chrome bookmark so that users can have a better experience when they need to recall their pages.
Process
I was learning UX Design by taking courses, watching webinars and reading books. So I became familiar with the design thinking process. In this project, I want to put my skills and knowledge into practice by combining UX Research and Design Sprint.
1. Empathize
I began the project by creating a five days research plan. Before I jump into solution, I want to dig deeper into the problem so I can solve the right problem. This research plan help me outlining the research and keep me focus on the objectives.
Objectives
To understand what the user’s feel about Chrome bookmark and how they use it.
Key questions
- What are the user’s motivations, behaviour and expectations of using bookmark?
- What are the user’s pain points and frustrations?
- How does the existing app help the user so far?
Day 1 : App Analysis
To begin my research, I want to learn more about the app first. I wanted to understand the app functionalities and the problems the current users encountered.
There are two ways to get to the saved pages, from the menu and the bookmark bar. Each of them has their own problem:
The menu button problems
- Bookmarks appeared as an overlay. While this is fast, it is hard to aim my page with the mouse (even harder with a mousepad).
- I don’t know how the list is sorted. It is not my most visited, recent or even in alphabetical order either. My guess is it is sorted by my first bookmark, which is so long ago and it does not help much.
The bookmark bar problems
- When I use the show bookmark bar feature the default sorting is also bad. I found out that I can drag and drop the list but it takes some time to figure it out.
- It makes my screen look very busy.
Day 2 : Comparative Research
Safari has a button to show a bookmark sidebar on the top left corner. In the sidebar, there is a bookmark and reading list. Inside the bookmark we can create a folder. Folders are easily created by right click and easily moved by drag and drop.
However, the add bookmark button is kind of hiding, the button only appears when we hover the mouse.
Day 3 to 5 : User Interview
To validate my hypothesis and further understand my users, I conducted a qualitative research to know the user’s behaviour, motivation and pain points. Here are some direct quotes from the users:
When I saved a new page, my newest page is on the bottom. So I have to scroll very far to find it.
I don’t really use it. Because I always get lost when I try to find my saved pages. It’s difficult to tidying it up.
When the bookmark is too much, it’s very distracting, A lot of them are too old and they make the list too long.
The bookmark list is not even on a page, it feels like it’s floating (overlay) somewhere.
2. Define
I collected the data from user interviews and synthesise the findings by creating an affinity diagram. I write every findings on sticky notes. Then I mapped them by category and subcategory.
I used color to code each participant. From the diagram, I can identify the user’s problems, motivations, needs, behaviour and insights.
Prioritizations Matrix
I like how might we format because it challenge me to think of a solution. So I turn the data from the problem category into “how might we”s. I would do a voting if I worked on a team. Since I worked alone on this project, I used the prioritizations matrix to determine the priority.
Persona
The insights and information gathered from my research allowed me to define the potential target users of my product. Meet Andre, the digital savvy art director.
User Journey Map
Then, I created Andre Journey Map to help me understand the problem better by illustrating the major step he takes, and how he was feeling in each step.
My later design decisions were based on this user’s goals, needs and pain points. They helped me define the desired experience as I developed the bookmark and its functionality.
Problem Statement
Finally after I conduct a research and gathered the data. I can define the problem statement:
Andre, a digital savvy art director need to easily recall his online resources and project pages so that he can be more productive and insightful at work.
3. Ideation
My approach from the ideation to prototype process was based on the Design Sprint book by Jake Knapp. Since I have done the research and synthesising, I started at the day two of the Sprint.
Lightning Demo
I began the ideation by creating a lightning demo. Here I put every findings into one board. Everything from my comparative research into anything related that can solve the problem. I also put a timer to keep me going, thirty minutes.
Three Step Sketches
I used my lightning demo as an inspiration board. Then I sketched any ideas that comes to mind for twenty minutes. This is the time where I really let my creativity free. I sketched any possible solutions without judging them.
I picked one of my best ideas and challenge myself to find other variations. I had to say, crazy eight is the best way to squeeze my creative juice. I fold an A4 size paper into eight and sketch on each frame for one minute.
Solution Sketch
The final step of ideation. For sixty minutes I look back through the problems, persona and ideas. Then draw a three panel solution.
4. Prototype
I started by creating a user flow. This guide me to define the wireframe I will need to create. The flow capture interactions between the user and the app to achieve the user goal.
Animated Prototype
I came up with a solution on three main interactions:
- Bookmark list button on the top right corner. This button will show the bookmark sidebar. Users can easily show or hide it by clicking the button on and off.
- Sort by button. This will allow users to change and choose the sorting and direction by name, last modified, last opened, and custom.
- The search in bookmark button to help user quickly find his pages if he remember the keywords.
If you want, you can test the prototype here https://www.figma.com/proto/ZtU4uwhI8vFceWOG5uFcL5/Untitled?node-id=1%3A2&scaling=min-zoom
5. Testing
After one week of usability testing. I was able to validate the assumptions and changes I had made. I did this by testing my clickable prototype with three new users.
Of course the first iteration will have so much to iterate. I have done it as an early learning about the user and the solution. Here is the result:
What works
- User are happy with the new sidebar instead of the overlay because it feels more tidy.
- Users easily find, show or hide the bookmark list.
- User understand they can customize the sorting by clicking the sort by button.
- Users can easily find the search in bookmark feature when they need to type in keywords.
What needs to iterate
- Two out of three users feels they don’t need to make custom sorting if they already can choose one of the sort by options.
- I need to put a button description when hovering to help users adapt to the new changes.
- Users don’t need to sort by “last modified”. They need a sorting by “last added”.
- Users need to be able to close the sidebar by clicking on the outside area, or a close button.
Notes: For future studies, I would like to spend more time iterating the prototype with the new findings. Getting a wider demographic sample for research. And, how is this received from the business side.
After Thoughts
Although I had a very short timeline for this project, I am glad to gain so much experience about UX design and UX research. I was able to create a better experience for users by making small changes. Also, it is so important to always validate my assumptions through testing.
Note: I don’t work for or represent Google. This UX study was done as a learning experience for me to explore products I frequently use and how to make it even better.
