Lightbox
Lightbox is a hypothetical art tutorial search site for artists of all skills and mediums that provides features to find, save, share, and upload art tutorials. I designed the responsive website for Lightbox from conception to delivery while completing the Google UX Design Certificate. Throughout this project, I was responsible for conducting competitor audits, interviews, paper and digital wireframing, low and high-fidelity prototyping, conducting usability studies, accounting for accessibility, responsive web UI designs, and iterating on designs.
Background
Artists have many go-to websites to access tutorials to improve their art (Youtube, DeviantArt, Pinterest, Twitter...) for many different types of tutorials (animation, realism, comic art, sculpting) but no one-stop-shop for all tutorial needs.
The Problem
Artists searching for tutorials online need a centralized platform to find and save the tutorials they wish to reference in their work.
The Goal
Design a responsive website that allows users to search, save, and upload art tutorials.
Project Overview
🙋🏻♀️
My Role
User research
Brainstorming
Wireframing
Lo/hi fi prototyping
User testing
🕚
timing/efforts
March 2022
🤔
the problem
Artists searching for tutorials online need a centralized platform to find and save the tutorials they wish to reference in their work
🏆
the goal
Design a responsive website that allows users to search, save, and upload art tutorials.
User research
I conducted interviews and created empathy maps to understand the user I’m designing for and their needs. I discovered that many artists regularly search for art tutorials to better their work. However, they don’t have 1 go-to place for sourcing art tutorials, nor an efficient way of saving them in one location. This makes it difficult to find a tutorial they found several months ago, and also to access different media tutorials from one place.
Painpoints
1️⃣
Filters
Websites with art tutorials don’t usually have ways to filter results by more than genre
2️⃣
Saving
Websites don’t have a way to quickly save a tutorial to reference for later
3️⃣
Formatting
Art tutorials are all uploaded and formatted differently, and require a user learning-curve to understand how to navigate and read the tutorial
4️⃣
Discovery
It’s hard to come across a tutorial in the internet wilds that is of interest to the user if they weren’t already searching for it
Persona: Maggie
Maggie is a hobbyist digital artist who needs easy search and save features because she wants a quick and easy way to reference art tutorials she likes.
User journey map
I created a user journey map of Maggie’s experience searching for art tutorials online to help identify possible pain points and improvement opportunities.
Findings
Currently, Maggie has to screenshot tutorials she finds on her phone to send to her desktop, and right click > save as tutorials she finds on her desktop because none of the websites she finds her tutorials on have an easy way to sort and collect them. It’s also hard for her to sort tutorials by her needs; maybe she’s looking for a reference on drawing trees, but all the tutorials are for a skill level far beyond her own. The process is so long and frustrating that sometimes she’d prefer to just learn on her own rather than find a tutorial.
How might we’s and crazy eights
With the user’s pain points and problem statement, I started a How Might We exercise to begin thinking of ideas to solve Maggie’s issues.
How might we…
Prioritize the core functions?
Provide a niche service?
Highlight to Maggie tutorials of interest to her before she even has to search?
After this, I completed the Crazy Eights exercise with Maggie’s issues and the How Might We questions in mind, where I dedicate 1 minute to sketching a layout idea for 8 ideas.
Sitemap
Next, I needed to make strategic information architecture decisions that would improve overall website navigation. This pass would guide me to what kinds of pages users would need to navigate to from the Home, as well as help me visualize the types of paths that could be taken in navigating the site.
Paper wireframes
Next, I sketched out paper wireframe options for the home screen of my app, keeping the pain point of discovery in mind. I wanted it to be the primary opportunity to discover relevant and topical tutorials. Stars were used to mark the elements of each sketch that would be used in the initial digital wireframe.
Paper Wireframes Screen Size Variation
Because users search for art tutorials on a variety of different devices, I started to work on designs for additional screen sizes to make sure the site would be fully responsive.
Digital wireframes
Moving from paper to digital wireframes made it easy to understand how the redesign could help address user pain points and improve the user experience.
Some decisions include stretching the search bar across the top navigation to allow easy access to immediately begin tutorial search, and updating navigation- like the addition of a hamburger menu- on the mobile version to make optimized use of the available screen real estate.
Lo-fi Prototype
Usability study
Parameters
Study type: Moderated usability study
Location: United States, remote (users will go through the usability study in their own homes)
Participants: 5 participants
Length: 30 minutes
Findings
1️⃣
sharing
Users didn’t see a way to share tutorials they liked within the site or with their networks on social media.
2️⃣
Recommendations
Users wanted to see a section of suggested tutorials based on their profiles
2️⃣
Crowd
Users wanted to see more image and less text on search results pages
Based on the insights from the usability study, I made changes to improve the site’s search results. One of the changes I made was to create space by moving the view of the tutorial title and author when covering over the tutorial thumbnail.
To allow users to see tutorials recommended to them based on their profiles, I replaced the “Trending Topics” section on the homepage with a “Recommended for you” section algorithmically populated based on recent searches, likes, saves, and profile settings. Users would still be able to see a featured section above the recommended.
Mockups
Design system
Key mockups
Hi-fi Prototype
Accessibility
1️⃣
Text hierarchy system
I used headings with different sized text for clear visual hierarchy
2️⃣
color contrast ratios
All primary website colors pass WCAG AA and AAA contrast ratios
3️⃣
accessibility labels
Pages are designed with label text and iconography for screen readers to describe what fields and buttons are for
Takeaways
The study participants validated that the site features the core functionalities they desired in an art tutorial search site while being easy to navigate with a visually cohesive and pleasing UI.
No one knows what user what to see better than the users themselves, and the significance of adding one feature or even something as small as one icon can totally shift the tone of their experience.
Next Steps
1️⃣
Conduct follow-up usability testing on the new website
2️⃣
Identify any additional areas of need and ideate on new features
3️⃣
Review and audit site elements and identify additional areas for accessibility improvements