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:
Introducing: Google Hobbies: A New Way to Learn Skills
Please feel free to play around with the prototype here: http://bit.ly/1KnBVgZ
My name is Darvinder. I’m a UX designer, and I love Google.
I also love learning, especially when it comes to my side hobbies. That’s why I built this prototype: to help people learn better, and build their skill set faster.
Here’s the story behind how I made it.
Important note: This is just a mockup and not actually a Google product.
Google as we all know has not only been a platform for us to help find information faster but also a great way to find learning resources to help develop our skills for our profession and hobbies.
Being a serious hobbyist myself and a learner of new and exciting things I am grateful to have this as one of my projects that I worked on during my UX Design Immersive Course at General Assembly. I made sure I was objective about my research since I was so so close to this subject personally. It helped me empathize with the users and their problems better.
The Journey Begins:
Problem Statement: People face a seemingly insurmountable number of considerations to learn a new skill / hobby.
Tools: Sketch 3, Omingraffle, Framejs, Sticky notes, Google, Google Forms, Google Sheets and Google Docs.
Techniques Implemented: (to stay on top of the project): The Pomodoro Technique (thanks Chris), Ryan Holiday’s Notecard Method, Meditation and Morning Pages.
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.
Platform: Desktop
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. The Survey:
I created the below 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
I discovered that working in teams is 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.
- Ramesh is a 38 year old Engineer who needs to find better ways to commit time to learning a new skill.
- Liz, 12, is seeking a local violin teacher.
- 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.
(Please click on the thumbnails for a larger view)
11. Design Studio and Low Fidelity Paper Prototype:
With the initial research and time spent in taking inventory of what goes where, the boxes in the swim lanes above would work as pages/screens the user would interact with and since we already figured out what would go on each screen at every step of the process, the design studio was fairly a simple task to do. Now, I could just focus on the design and functionality aspect to bring it all together.
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.
12. Usability Test 01:
With the paper prototype, I did usability tests with 7 users. I created a usability script to make sure that all the tests were consistent so that they generated objective consistent data.
Initial Setup
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
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
- The friends section on the Google Hobbies landing page was a bit confusing to the users as they didn’t know if those were their friends from Google+ or added in the Google Hobbies module
- Users also clicked on the Hobbies subsection naturally and shared they’d like to add more hobbies to this as they pursue multiple hobbies at the same time
- The design showed overall experience points of the users as a whole in the dashboard but what I found out was that they expected to see individual points for their different hobbies
- Most users had fun interacting with the prototype and wanted more
- The experimental task yielding surprisingly good results. I thought it would be another pop-up screen for the users and they would ignore it but 5 out of the 7 users actually clicked “Add to calendar” to get the reminders for their practice times
- The copy was a bit confusing to the users. It needed some improvement especially in the initial card and the quiz questions.
Design Implications:
- The video pop-up screen will be shown in the center instead of the side to maintain user’s focus.
- The copy will be improved helping the users to engage with the product better.
13. Wireframing
The insights gathered from the paper prototype usability tests helped me decide which changes I needed to make while designing the wireframes.
Upon showing these to Stacey, she suggested I should read a bit more about the 960 grid and recommended I read Ordering Disorder by Khoi Vinh.
Reading this book and a few more articles opened up my eyes to why grid systems are so important and how they make the workflow super fast and easy. I used to think that they would be restrictive and there will be no scope for creativity but surprisingly it was the opposite.
Following a grid based system frees up your mind so you don’t have to worry about placement and alignment that works, looks and feels beautiful. You now, can concentrate on being creative with the functionality and the design of the product.
“Discipline equals freedom”— from John “Jocko” Willink’s interview on Tim Ferris’ Podcast made perfect sense and fit right into this ideology.
This helped me make a big change in my wireframes (example below).
Wireframes with annotations:
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.
“The visuals, the typography and color is just the flavor. The main functionality lies in the wireframes. You need to show how everything works and functions in wireframes before you step any further.” — Stacey
I read certain parts of Communicating Design by Dan Brown to learn about the best practices in annotating wireframes and applied them accordingly.
(Please click on the thumbnails for a larger view)
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.
References:
- When split, material can heal: http://bit.ly/1ns8AYo
- Motion provides meaning: https://youtu.be/isYZXwaP3Q4?t=14m55s
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).
With the interactions in mind, I started researching about what tool would be the best for me to achieve the same effect and interaction. I already know Invision, Hype and Principle but this project called for something more robust. With more research I found that tool to be Framer.
Framer is mainly a code based prototyping platform which uses Coffeescript to create high fidelity prototypes with custom interactions. It syncs perfectly with sketch.
This mean’t I had to learn to code from scratch in order to be able to prototype — Challenge accepted!
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. It helps the designers achieve a prototype which left very little room for confusion on how a certain element would react or how a specific interaction would be like.
I also wanted to invest my time into learning a tool which is widely used by top companies and I didn’t mind if there was a steep learning curve to it. It would be another powerful tool in my toolkit which I can use to bring a lot more value to a team I would work in for my future projects.
Since I was learning to code from scratch, it took me a while to understand these new concepts and after a lot of debugging and 2.5k lines of code I was able to achieve the v1 prototype.
As I learned more and got more experience with Framer, iterating on the prototype started becoming easier and faster.
I also joined the Facebook group for Framer which is very supportive in helping you get answers to your questions really fast. I also attended the Framer NYC event to learn more techniques, geek out with other fellow users and fix a few of the bugs my prototype had.
They gave me great feedback on my prototype. Marc, Danny and Jared for helped me get rid of many bugs in the prototype and made the code cleaner and smarter.
Interactions:
- After 2 seconds, the initial card will animate from the top asking user. This animation is intended to catch the user’s eye.
2. User initiates an interaction which is shown by the material design ripple effect.
3. Notice the slider animating towards the left to communicate that the slider is scrollable. (Ref: https://youtu.be/isYZXwaP3Q4?t=16m30s)
4. Principles of hierarchical timing and consistent choreography applied as per the Material Design principles.
5. Sub-cards popping up and expanding into videos as a part of the same system in the center (based on user research)
6. While closing, the sub-card will go back to its respective position.
7. Upon giving a correct answer to a quiz question, the experience points will animate towards ‘More on Google Hobbies’ link to convey they can learn more about this by clicking that link.
15. Usability Test #2
I performed a second usability test with this prototype with 5 users.
I used the below usability test script which was customized to cater to this prototype.
With 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
Below are the changes made to the prototype after learning from the second usability test.
Design Implications:
- Fixed the slider so it is clickable + draggable and mentioned all difficulty levels instead of just the current one. (reference: http://bit.ly/1ROcOGM)
2. Removed the header image and cleaned up the design.
4. Fixed the color of experience points to be the same on the landing page
5. Added a tip in one of the cards to educate the users more about the experience points
Version 2 of the High Fidelity Prototype:
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.
Also, I was really inspired by @KentTheHuth when he shared his story with us at General Assembly during his presentation which involved a spiral design which he visualized first with paper. He worked on his idea by coming in 10 mins early each day and finally “showing” his team the idea rather than just talking about it.
I took a stab figuring out how the Google Hobbies logo may look like with paper and playing around with light. I spent a little time doing this and it was a lot of fun. I didn’t design the final logo as it would have taken a lot more time and I’d like to dig more into it if I get a chance.
A few thoughts:
I would like to thank General Assembly for providing me with the knowledge and support I needed to learn the principles of user experience design. I specially want to thank Stacey for taking out the time from her vacation to work with me on this project to keep me accountable and in check with the UX principles. This was the best learning experience of my life and I confidently can call myself a User Experience Designer now.
Awesome people who helped me out with this:
Stacey Sarris, Luke Miller, Jay Stakelon (his tutorial on Pluralsight), Noah Levin (his tutorial on Skillshare), the framerjs facebook group and the Framer NYC meetup group, Kayla Farrell,CircularChaos and Charlie Hoehn.
Links:
LinkedIn: https://www.linkedin.com/in/dskochhar
Website: http://darvinder2.strikingly.com/
Portfolio: http://bit.ly/dskport
Join us at prototypr for more design news and prototyping tool updates.
