Sparkler & Facebook Tutorials Concepts
Designing a tutorial experience so that DIYers can feel confident in investing their time and resources
Responsibilities
UX/UI Design
Background
As a personal project, I completed the Google UX Design Certificate. The DIY tutorial concepts are an outcome of this certificate.
Keeping up with best practices
It's important to practice my skills and continue to learn new techniques. I decided to complete the Google UX Design Certificate program to do just that. Sparkler is one of the projects I designed. After completing the certificate, I decided to explore how the Sparkler concept might work as a Tutorials feature on Facebook.
Tutorials
Design studies
Developing my skills through education
The focus of this case study is on my project work with the Google UX Design Certificate program. However, to understand how my design skills were formed and nurtured, I've highlighted the most impactful experiences below.
I earned a Bachelors of Fine Arts in Toy Design at the Fashion Institute of Technology. The most important skillset I learned at FIT was how to give and receive effective design critiques.
As a member of the design community at IDEO, I facilitated innovation workshops with clients. Not only did I learn the design thinking process, I learned how to teach it.
After 6 years in the games industry, I attended the Tradecraft UX Design bootcamp program as a catalyst to transition into other areas of tech.
I participated in the Google UX Design program to practice my skills and learn techniques from a prominent organization. This case study focuses in my work from this program.
Getting to know the Google UX Design program
The Google UX Design Certificate program is hosted on Coursera and contains 7 courses. It walks students through the UX design process multiple times. To manage the project sizes, a selection of project prompts was provided for the students to choose from. I chose a prompt that had an audience that was easy to access and fit my interests well.
Sparkler
Project Challenge:
Design a product that enables people to find and use DIY tutorials
Defining goals of the interview process
My first step was to conduct interviews. To make sure the interviews were productive, I defined goals that were the most important to explore.
How are users getting their DIY content and how are they consuming it? What are some of the frustrations and areas of opportunities with finding or using the content?
Finding the right audience
To find participants to speak with, I joined a variety of DIY, makeup, and crafts groups on Facebook and posted a link to a screener survey. I prioritized finding people from a diverse set of backgrounds to ensure my designs were accessible and equitable.
​
Target Participant Characteristics:
-
Ages 18-55
-
People who consume tutorial content
-
People who use social media
-
Include participants of different genders
-
Include participants of different colors
-
Include participants with different abilities
Targeting demographics is important to ensure diversity and equity in designs.
Conducting user interviews
I interviewed 6 participants and asked the same list of open-ended questions to each one. After completing the interviews, I transcribed the conversations. A selection of the most significant quotes can be found below.
If it's too hard to get everything it takes to complete it then it isn't worth it.
One challenge was constantly pausing and rewinding the video to see what to do next more clearly.
I like videos in written form that show step by step with visuals for each step clearly defined.
I want to ask other people that have tried the project out themselves to verify that it works and also how the experience was for them like a review of the project.
Sometimes I don't try it because I'm not sure if it'll work out.
I've always wanted to ask the creator some questions but I've always been too embarrassed to ask, but I've had many on my mind.
Empathizing through a one-user empathy map
An empathy map is a quick way to illustrate user behaviors and attitudes. I created an empathy map for one of my interviewees so I could compile their data into one place.
Empathy maps are one of many ways to document research results
Finding focus with personas
Personas are the details of a fictitious user that help designers answer the question, "Who are we designing for?" Based on the data I gathered from the interviews, one of the personas I created was Deja. Deja represents a larger group of users with similar needs.
Deja's persona helped prevent me from veering off track and building the wrong features.
Writing user stories
User stories are fictional one-sentence stories to inspire and inform design decisions. One of the key needs uncovered in the research was the need to feel confident about the project.
As a beginner level hobbyist, I want to know that the project will come out well, so that I can decide if I want to do the project.
​
- User story for Deja
Clarifying goals with problem statements
Problem statements create clarity about user goals, identify constraints and are helpful to measure success.
Deja is a beginner level hobbyist who needs to find a project that she is confident will come out well, because she doesn't want the project to become a waste of time.
Walking through experiences with a journey map
Journey maps are a series of experiences that a user goes through as they try to achieve a goal. Walking through the tasks as if you're in the user's shoes is important to improving their experience.
Journey maps help you think about the users' emotions so you can design features that target the pain points in their experience.
Researching competitive products
Competitive audits provides insight into the market, finds gaps in meeting user needs, demonstrates the lifecycle of similar products and more. These are the 5 direct and indirect competitors I chose to research.
Michaels is a visually appealing website that features bold discount ads. They feature a projects section and highlight artists. However, most content does not have any videos and they do not offer social features.
YouTube is an online video streaming platform that hosts endless amounts of DIY videos. They also have rich commenting features and can easily be shared across other networks.
Facebook is an online social networking platform that enables users to share video, image and text content. They feature special interest groups and there are many related to DIY topics.
DIY.org is a website geared towards children 4-16 who want to be creative. The content is very structured and features online and physical projects.
Amazon is an online shopping destination with a wide variety of merchandise. They sell DIY supplies and tools and offer some videos. Amazon has a well-trusted consumer reviews feature.
Ideating with How might we?
I go in depth into my ideation process in my Painting with Ideas case study. 'How might we' questions are my go to ideation method. For brevity, here are some of the ideas I chose to move forward with.
There can be a QA section that folds up the most commonly asked questions from the creator and makers.
We can include links to the creator's recommended supplies so they know they are getting the right stuff.
We can create a commenting experience so they can ask questions that aren't in the FAQ.
There can be a show off system to let crafters share their work so users can see how it turns out with real people.
We can include videos with stopping points and comments with the ability to repeat just that section.
We can provide a feed with an algorithm based on viewing history to surface the best content for them.
Sketching paper wireframes
I started the wireframing process by exploring the tutorial homepage. I envisioned this as a social feed with short and engaging videos that the user could browse through to find a project, or just for fun.
After exploring 5 different wireframes, I chose the most promising ideas to combine and created Version 1 of the home screen.
Moving to digital wireframes
The Google course instructed us to use plain grey boxes for the content. However, a philosophy that I've used was to ensure the prototype does not distract the user from its purpose and has enough context for the user to make sense of it. I did not feel grey boxes representing craft content would provide enough context to make the round of research worthwhile. Therefore I included stills of tutorial projects.
Paper wireframe
Digital wireframe
I included pictures to give context and to prevent distraction.
Creating a low fidelity prototype
The low fidelity prototype included the screens that I felt the user would need to experience in order to feel confident in choosing to complete the project or not.
I used Figma to design and prototype the app experience.
Conducting unmoderated usability studies
I chose 5 participants to complete the study. Each participant was sent the same instructions with a link to the prototype. I had participants record their screen as they interacted with the prototype and shared their thoughts.
Having participants record their screen with a device was a simple way to gather data.
Love it! I think this is amazing, I can't wait for this to be an app because I will definitely, definitely be downloading this. It's incorporating what I already do on Instagram, Pinterest, Tik Tok and YouTube all into one place.
​
- Research Participant
Recording user study results
I used Google's templated process to record user study results. This is different than how I've done it in the past - normally I would go straight to sticky notes. However, I do like that it brings equity into the equation and I will incorporate this into my process moving forward.
Creating a column per participant ensured equity in the design.
Synthesizing and creating an affinity map
The next step was transferring the data to sticky notes and arranging them into groups to create an affinity map. The study results were very positive overall, but a few key issues did pop up.
Affinity mapping helps make sense of the data by grouping it to make it more manageable.
Updating the wireframes based on user insights
One area of confusion was that not all users realized the tools button was a button and therefore they missed the shop feature altogether. Instead of a button, I created a carousel of items to make the items accessible on the tutorial home screen.
Pre-research
Post-research
As a result of the research study, I added a tools carousel to the tutorials detail page.
Experimenting with UI mockups
I created a few rounds of mockups before choosing a direction. You'll notice two mockups are mobile web, this was a requirement by the certificate program. However, I went back and updated it to a native design since it would best for a product like this.
Mockup V1
Mockup V2
Final Mockup
I gathered inspiration from Tik Tok, YouTube and Instagram before finalizing the mockup. I named the app Sparkler since it sparks creativity.
Highlighting the stories from the community feature
One of the most popular features with the research participants was the 'Stories from the community' feature. Research participants felt seeing other people's work and experiences would help them feel confident about the project.
Tutorial info
Stories section
User's story
On the tutorial info screen, the user can access stories from the community to see other peoples' work and experiences.
Prototyping interactions with animations
The final step to complete this project in the Google UX Design Certificate program was to create a prototype with transitions and animations.
Sparkler high fidelity prototype V 1.
Completing the Google UX Specialization
A second round of usability studies was not a requirement of the program and I was awarded the certificate. At this point, I was interested in seeing how the Sparkler concept might work on an existing platform so I continued exploring.
Facebook Tutorials
Choosing the platform
When I received Google's prompt to design a tutorial product, I actually thought the feature should exist on the Amazon platform. A lot of creators use Amazon to earn affiliate fees and the platform already has a robust user rating system. However, I chose Facebook since my research participants from Sparkler wanted rich social features that Amazon doesn't already have.
Researching the platform
Since I already had the empathize and define stages completed from the Sparkler project, my first step was to research Facebook's features so I could prepare for paper wireframing.
 |
|---|
 |
 |
 |
 |
 |
 |
 |
I gathered a variety of screenshots from the features on Facebook.
Wireframing on paper
I tackled the most important screen first, the tutorial info screen. In the Sparkler app, I had the tutorial navigation tabs at the top of the screen. This placement did not seem to fit Facebook's design language so I explored other options.
As I sketched the wireframes, I was excited about the idea of thumbnails for the video tabs. A thumbnail picture would be much easier to remember.
Low fidelity wireframes
For this round, I decided to keep the fidelity low and not include pictures like I did with the Sparkler project. I wanted to explore the difference in the research results between the two levels of fidelity.
Paper wireframe
Digital wireframe
Unlike Sparkler, I did not include any visuals in the digital wireframes.
Low fidelity prototype
For the Facebook Tutorials usability study, I felt it was important to include a newsfeed card and a separate tutorials feed so I could check the user's confidence in finding a project.
The low fidelity prototype includes the screens I believed the users would need to feel confident to find and complete tutorials.
Conducting unmoderated usability studies
Just like in the Sparkler project, I chose 5 participants to complete the study. Each participant was sent the same instructions with a link to the prototype. I had participants record their screen as they interacted with the prototype and shared their thoughts.
Having participants record their screen with a device was a simple way to gather data.
I'm not sure what the community posts is about... Oh, ok. I see what it is. Yeah, this would be useful because sometimes people tweak things. Like to see how a left-handed person would do it.
​
- Research Participant
Synthesizing and creating an affinity map
I received a surprising amount of insights from this round of research. With Sparkler, I included pictures in the low fidelity prototype to give participants context. With the Facebook feature, I only showed grey boxes. I found that almost all users mentioned wanting pictures of the final product as the most important thing missing - this, obviously, was not a concern with the Sparkler study. I was confident this need would be fulfilled with videos and a separate pictures feature would not be necessary. All in all, it was a worthwhile usability study and I don't regret not including the pictures.
.jpg)
The affinity map included 11 groups and lots of insights to explore.
Addressing a high priority issue
One user became lost when trying to go back to details on the tutorial info screen. Since the navigation of the feature is so critical to its success, I needed to design a more intuitive way for users to navigate back to the tutorial info screen.
​
I revisited Facebook to draw further inspiration and found that the tab navigation used in the groups feature might work well to solve this need.
Pre-research
Post-research
Adding the sliding tab navigation provided another option to navigate home.
Maintaining consistency with the platform
Most users were not immediately sure what the community posts feature was but all but one found it useful. Therefore I needed to design a more intuitive way for users to know that they can post and view other's posts about the tutorial content.
​
The tabbed navigation slider from the Facebook groups feature already included a tab for discussions. Even though it wasn't exactly what I had envisioned in the first place, for consistencies sake, it made the most sense to replicate it in Tutorials.
Pre-research
Post-research
Removing the community posts section and adding the discussion tab maintained consistency with the Facebook site.
Preparing the high fidelity prototype for research
Beyond the two examples above, I made a few other revisions. I created the mockups, added the tutorial animations and made sure the screen transition animations were aligned with the Facebook platform.
Components make building complex navigational flows much more efficient.
Conducting unmoderated usability studies
Just like in the Sparkler project, I chose 5 participants to complete the study. Each participant was sent the same instructions with a link to the prototype. I had participants record their screen as they interacted with the prototype and shared their thoughts.
Having participants record their screen with a device was a simple way to gather data.
I actually really do like this set up, this is very nice. That's the annoying part about using tutorials on YouTube is having to go back 2 seconds and forward 2 seconds, Having the timepoints in these buttons, I actually very much do appreciate that.
​
- Research Participant
Synthesizing and creating an affinity map
A surprising theme of this round of research was that most users immediately wanted to know the difficulty level, time estimate and cost of materials. This wasn't the case in the prior round - I believe this is because the users now had an image of an elaborate painting project that gave them the context they needed to think things through.
The affinity map included much different themes than the prior round.
Updating the prototype based on themes
Since most users asked for a time estimate to complete the project and some users asked for a difficulty rating, I needed to design a way for users to see a time estimate and a difficulty rating on the tutorial home page. I referenced UI I found from the events feature and added it as a details section at the top of the tutorial home page.
​
In addition, all users immediately wanted to see a supplies/cost list. Therefore I needed to make the supplies feature easier to access on the tutorial home page. I added a carousel that includes the shop items just below the details section.
Pre-research
Post-research
Adding the details box and supplies at the top should be a better way to meet users' needs.
Finalizing the prototype
To complete my work on the Facebook Tutorials project, I finished updating the prototype based on the feedback from the usability study.
Facebook Tutorials high fidelity prototype V 2.