Google-Hobbies-thumbnail.jpg

Google Hobbies

 
 
 

Have you ever tried to learn a new skill online? It sucks.

You might search around and watch a few tutorials, practice for a week or so, but ultimately you abandon your training. And then you feel like a quitter.

Wouldn’t it be awesome if Google could coach you through your training, so that you were given the exact lesson you needed for your skill level? Wouldn’t it be great if Google could keep you accountable, and reward you for practicing?

I wanted to see this, so I made a prototype. Here it is:

 
 

Please feel free to play around with the prototype here: http://bit.ly/1KnBVgZ

 
 

Problem Statement:

People face a seemingly insurmountable number of considerations to learn a new skill / hobby.

Techniques Implemented: (to stay on top of the project):

The Pomodoro Technique (thanks Chris), Ryan Holiday’s Notecard Method, Meditation and Morning Pages.

Platform:

Desktop

Time:

6 weeks

Tools:

Sketch 3, Omingraffle, Framejs, Sticky notes, Google, Google Forms, Google Sheets and Google Docs.

Team:

Just me. My trainer Stacey Sarris played a crucial part in keeping me accountable and making sure I was following the right UX practices.

The Solution:

A system which simplifies the problem by aggregating the best content for the users for learning more about their skill based hobby and developing their skills. The content would be aggregated by using an algorithm which curates the videos and articles pertaining to the hobbies based on Google Analytics, user reviews + feedback and recommendations from the professionals/experts in the field.

This product is called Google Hobbies and it will present itself as a card along with the search results and a standalone product in itself (like Google Calendar). It is a Learning Management System that keeps track of the user’s learning journey, enables them add friends, track their own progress, earn experience points (which can be traded for buying discount coupons on their favorite hobby related items) and more.

The Process:

1. Survey:


I created this survey and shared it on Facebook to find people who were passionate about learning about their hobbies and were not using it as a profession. 

It was no surprise that most people used Google to find this information.
The main goal of the survey was to find people who are hobbyists and use Google to search for information pertaining to their hobby.
This survey was intentionally kept simple so it didn’t take too much time for the people to fill out and I could easily select the people I want to interview.
Responses Received: 28

2. Interview Questions:

While ideating the user interview questions I wanted to learn what their motivation was, how and when they used Google to search for the information, what their behavior was like revolving this activity and what their pains and pleasures were while they searched for this information.

Asking them when was the last time they performed an activity was a good way to find out what their behavior was like and how they managed learning more about their hobbies while managing their schedule.

It was also crucial to find out what made them trust the information since that would help the users take the content more seriously and lead to taking action in the form of practice.

3. User Interviews:

 
 

Most of the interviews were done over the phone as most users preferred this option because of their busy schedules.

I interviewed 14 people and got many insights after talking to them. All of them were very passionate about their hobbies and a common trend of finding not enough time to commit to their hobbies was definitely noticeable.

I also wanted to interview a wider age demographic since I knew many kids also participate in various hobbies. I reached out to my personal contacts and got the permission to interview 3 kids at a Sikh school in Glen Cove, NY.

4. Interview Analysis:

It was really interesting to find that research showed most users not only searched for the info online but also learned it from their peers and usually trusted that information more than a random internet video or an article unless it was from a well know expert in the field. They also had some pre-existing knowledge before getting into the search phase which helped them weed out the irrelevant information and did further research by reading user comments and reviews to gain more knowledge about the content and generate trust before committing to it.

It was surprising to find out that the research not only showed users having issues relating to searching for information but also the learning process in itself.

So instead of this product just being limited to simplifying search, I realized that it has to cover the learning aspect of this process and improve upon it.
This changed the course of the project dramatically.

5. Competitive and Comparative Analysis

I did a Competitive Analysis with 10 different websites which helped users learn skill based hobbies. The intention was to learn the best practices involved and gain a general awareness of what type of learning systems are out there and what are the best practices used. It was also a good way to find out what not to do and how some features for our product may or may not be included.


Most websites, unlike Google, had their KPIs set around number of subscriptions and forced users to login to be able to access the content. They also had a very limited scope of courses they offered.


This is a great opportunity for Google since it has a bigger range of topics it can cover than all of these websites and is not limited to a particular field, subject or a demographic. Google also does not rely on users being logged-in in order to generate revenue off of ads which is a plus.


For Comparative Analysis, I focused on the process of learning itself. I researched how a particular website handles the Learning Process making it easier for the user to understand the content better.

As a part of this research, I signed up for Learning How to Learn course offered by Coursera to learn more about human memory and what are the best practices involved when it comes to learning. It not only helped me learn more about the best practices involved, but also an in-depth knowledge about how memory works, what the different types of memory are (short term and long term), why we procrastinate, why it is important to have a quiz at the end of a chapter, focused and diffused mode of learning, the importance of breaking down information into chunks, and much more.

The first principle is that you must not fool yourself and you are the easiet person to fool.
— Richard Feynman

Working in teams is obviously great since it avoids illusions of competence and helps you discuss your ideas with others to avoid mistakes which you may have not noticed otherwise. It not only helped me get many good ideas for my project but also a new way of looking towards learning which I can implement in everything that I learn from now on.

  • Lynda.com has small chunk-sized videos for them to be easily consumed and retained in the working memory
  • Coursera has small quizzes at the end of particular sections because recall is better than re-reading in order to cement particular concepts in mind.
  • Skillshare has % of likes, reviews and social feature to generate more trust with the learners and allowing them to share this with their friends using social media.
  • Apps like Google Primer showed average time for completing a particular lesson which helps the user commit their time to learning from it accordingly.
  • Duolingo helped users learn better by gamification of the learning process making it fun and generating a state of flow.

I also compared how many steps does it take for the user to access the learning information amongst Google’s competitors when it comes to learning material online.
Youtube had the least number of steps (6 steps) in user finding the information and not having the user login. With the introduction of the Google Hobbies cards, the steps will be cut by 2 (4 steps).

6. Personas

From this research, I made the below 3 personas as an archetype that covers our target users.

  1. Ramesh is a 38 year old Engineer who needs to find better ways to commit time to learning a new skill.

  2. Liz, 12, is seeking a local violin teacher.

  3. Ashley, a 55 year old mom, is looking for step-by-step tutorials and deals on painting supplies.

7. Features

While I was coming up with the features based on prior research, Stacey asked me, “So how will this inform the design?” it was a great question to ask while deciding which features would be most useful for the users.


It is similar to one of Luke’s favorite questions, “What will be the design implication of this?”


Both statements helped me think about how a particular feature relates to the rest of the design solution and how it fits into the puzzle. I implemented this by adding an extra column pointing to the respective research finding. It helped me avoid featuritis as well.

8. Feature Prioritization:

I condensed the features list before starting this process and along with the typical x-y axis, I chose to use a scoring system of which the cut-off point of 38. This helped me analyze to a greater detail and decide whether a particular feature would make it to the MVP or not.


I divided the columns based on the importance of the feature, how well it benefits the user (based on user research and Coursera), whether the feature is already existing in other Google products (hence reducing the dev effort), whether or not it is fun and how hard is it for the user to do the current task.

I learned a bit more about the best ways to prioritize features and more effective ways of feature prioritization by reading a few articles.
A few features that stood out to me were:

  • The level of difficulty slider — which would help the users choose their own difficulty level
  • Gamification of the learning process which will reward the users experience points which they can trade for discount coupons for shopping supplies for their hobbies — creating a win-win where users would have fun while they learn, they would also get cheaper supplies and Google can earn extra revenue via directing the sales to the sponsored stores through these discounts.

9. Minimum Viable Product:

After prioritizing the features, I decided the MVP will be a product which the users can use and interact from the search results screen. They will be able to choose their own difficulty level, watch videos, read articles and set scheduled reminders which would be synced with their Google Calendar which would give them a notification to view the content.
The design and interactions will be as per Google’s Material Design guidelines. Users will be able to visit the main Google Hobbies landing page to view what Google Hobbies would basically be like.

I set the project scope in these limits so that I was able to finish it in time in order to communicate the main idea. Upon further research and with more time, more functionality will be added to the Main Google Hobbies landing page as a whole.

How will the user interact with the product?

This is explained in detail through the swim lanes and wireframes below. A very close representation of what the final product may look and interact like can also be previewed in the final high fidelity prototype.

10. Swim Lanes

Swim Lanes helped me create a user journey with every step involved and an inventory of the features that would go on each one of those pages. The third system layer also serves as a great communication tool between the UX designer and the developers.


This enables the developers to not think about anything else but the what that would go in a particular step or a page. This way they can start developing the base foundation earlier. Every step would be scrutinized not only by the UX designers and the developers but also by the stakeholders, UI designers and everyone involved in the product development team.


This also helped me focus mainly on the flow that the user would go through and how the product would function overall. Having this as a tool and not worrying about the design helped lay the solid foundation it needed based on which the wireframes and the high fidelity prototype will be made on.

11. Design Studio and Low Fidelity Paper Prototype:

I decided to focus on sticking to the below scenarios which were most important for our personas and designed the screens accordingly. The numbering of all the screens in the swim lanes also created reference numbers based off of which the designed screens would correspond to.

  • To keep the design consistent, I made the design which was based on a single hobby — How to learn the guitar but the same screens and steps can be applied in Liz’s and Ashley’s scenarios.
  • Ramesh would utilize the scheduling functionality to view the content based on his timings.
  • In Liz’s case, for finding local trainers, Google’s location based Google Maps card will be used. I borrowed the existing design to convey that we could use the existing feature and save some time in development.
  • In Ashley’s case, she would utilize not only what most of the Google Hobbies cards offer but also can potentially click on ads if she finds any deals interesting.

A bit about scheduling and experience points:

I designed this product in a way that would help motivate the users to learn more about the favorite hobbies by experience points which they can then compare with their friends and challenge each other. It also revolves around creating a habit of practice and a sense of flow while learning these hobbies with experience points as a reward to perform the routine and the reminders would serve as cues.
The effects of interleaved practice from the Coursera course also suggests that this will result in the most effective learning experience for the user.

From Charles Duhigg’s The Power of Habit

From Charles Duhigg’s The Power of Habit

Process showing how the basic design studio sketches were then formalized into a paper prototype.

12. Usability Test 01:

With the paper prototype, I did usability tests with 7 users.

I set the scene up with the users telling them that they are a person who is interested in learning how to play the guitar. They would enter “how to learn the guitar” as keywords in the search field and upon seeing the default search results, in a few seconds they would see the initial card pop-up initiating the below tasks and scenarios to be tested.

I had set up the tasks in a way that in a short duration of time I could test the core functionality of the product and learn more about how users react to it. Upon giving a correct answer to the quiz, the users would get experience points and I wanted to test how users react to that as well.

What I did during the test:

  • I observed and took notes on their behavior and reactions to the design
  • After landing on new pages or screens, I asked the users whether that was something they expected and noted the results
  • I asked them to tell me what they see
  • For the slider, once they recognized what it was, I asked them how do they expect it to behave
 

Me performing a paper prototype usability test at General Assembly.

 

Key Takeaways:

  • Most users thought the reading article button was a list of bullet points
  • Most users knew what the function of the slider is and how they would use it
  • I had the video and the articles pop-up on the side once the users clicked on them and 4 out of 7 users told me they expected it to pop-up right in the center and not on the side
  • The experience points as a reward brought smiles to their faces and 6 out of the 7 users wanted to know where their experience points went

13. Wireframing

I annotated the final wireframes in detail to better facilitate communication with the development team and the stakeholders. I also used this opportunity to practice the 960 grid a bit more and made the annotation document accordingly.

 

Interactions

Material Design uses motion to provide more meaning to the interactions and I wanted to use it in an effective way to communicate with the users what an element behaved like. I am really inspired by the whole Material Design philosophy and my aim was to build the final high fidelity prototype based on these principles.


I explained two of the main interactions in the wireframes and I am glad I was able to show the same effects in my final prototype I made in Framer.

14. High Fidelity Prototype:

It was very important that the high fidelity prototype looked and felt like a Google product. I took a deep dive into Material Design by reading the guidelines and watching videos and it was really inspiring.


Some notes:

  • The cards will have 2dp rounded corners
  • The shadows of these cards will be in accordance to the Material Design principles and would change depending on their level of elevation (dp level)
  • The Material Design template in Sketch 3 will come in handy
  • The Google Hobbies base card and its sub-cards will behave as a part of a single system (more on this in a few).

Why Framer?

Framer is multi-platform, has a fast workflow and provides a lot more freedom when it comes designing the custom interactions which otherwise would be really hard to explain. It gives the designer the ability to specify animations in curves, use HTML and CSS and real world data to make the prototypes even more robust.

Framer also follows the method of side-by-side live coding explained in Inventing on Principle by Bret Victor which helps the designer/coder be more creative. 

After a lot of experimenting and 2.5k lines of code, I was able to make the first stable version of the prototype.

V1 of the prototype

While making the prototype, I reached out to the Framer group on Facebook and they were super helpful. I also attended their meetup in NYC where they helped me get rid of a lot of bugs and clean up the code.

 

Interactions:

15. Usability Test #2

I performed a second usability test with this prototype with 5 users by giving them these tasks.

Key Findings:

  • Most people found the slider hard to find and the placement above the transparent background made them perceive it as a Youtube play scroller
  • Most people thought the big image in the top of the base card was a video
  • Users clicked on the slider instead of dragging it
  • Most of the users mentioned the look and feel of the Google Hobbies cards is of a Google Product.
  • Users were excited on giving the correct answer and were naturally inclined to click on ‘More on Google Hobbies’ link at the bottom.
  • Users expected the experience points earned to be of the same color in the main landing page.The card behaviors were in line with user expectations
  • The initial card successfully caught their eye and they naturally interacted with it
  • Users were excited to see the experience points earned but did not fully get how they could use them
 

16. Final High Fidelity Prototype

Design Implications:

1. Fixed the slider so it is clickable + draggable and mentioned all difficulty levels instead of just the current one.

2. Removed the header image and cleaned up the design.

 

3. Fixed the color of experience points to be the same on the landing page

 

4. Added a tip in one of the cards to educate the users more about the experience points

Version 2 of the High Fidelity Prototype: Link

Areas of improvement:

  • If I had more time I would do more user testing and contextual studies with subjects trying to learn a new skill based hobby to gauge this product’s effectiveness to see what works and what doesn’t and add / remove features accordingly.
  • I would develop more cards for other hobbies if the base prototype is successful and do more user research to find newer aspects in which I can improve this product.

Link to the main Medium article.