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

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.

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

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.

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.

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.

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).

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.

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.

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.

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.

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

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.

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. 

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

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