Responsive Desktop & Mobile Site
Formakers
A video platform that gives users DIY tutorials for a wide range of projects.
Formakers is a site that provides DIY videos of all types for creatives of all kinds. Formaker’s video topics range from painting to cooking to gardening. They place an emphasis on family-friendly content, dedicating a whole section to projects for kids.
The goal for Formaker’s website design was to clearly present users with tutorials best suited to their individual interests and skill levels. I wanted to provide users with intuitive pathways to sort through and select videos that speak to them.
Responsibilities: User Research, Wireframing, Prototyping, Branding, Copywriting
Understanding the User
I conducted interviews and created empathy maps to understand the characteristics, feelings, and needs of the users I’m designing for.
Based on what I learned through the interviews, I identified three main pain points.
Trouble navigating back to previously viewed videos
Tutorials do not properly prepare users by telling them what supplies/tools they will need before starting their project
The difficulty level of projects is not properly communicated
I then created two different user personas to represent Formakers users: Jabari and Farrah. I also designed user journey maps for both personas to explore what steps they might take to accomplish their respective goals.
Jabari's Persona
Farrah's Persona
Jabari's User Journey
Farrah's User Journey
Starting the Design
After gaining a clear understanding of my target user demographic, I created a set of paper wireframes for my mobile site pages. I experimented with a number of different layout ideas until I was satisfied with my final choices. I then turned my mobile wireframes into desktop wireframes, scaling up the layout of each page so they would fit a larger screen.
Once I had a complete set of paper wireframes (both mobile and desktop), I transformed them into digital wireframes using Adobe XD. I then connected my digital wireframes to create two low-fidelity prototypes, one for the mobile experience and one for the desktop experience.
Left: Home page desktop wireframe ideas Above: Finalized home page wireframes, mobile and desktop
Digital Wireframes (Desktop & Mobile)
Usability Study
Using both of my low-fidelity prototypes, I conducted a usability study to find out how users interacted with the prototypes. I asked participants to perform a set of tasks related to finding a video on the site and following a DIY tutorial. Each participant performed the same tasks on both the desktop and mobile prototypes. I recorded their reactions, asking them questions about their experience afterwards. I then used my findings to edit the prototypes, making them more intuitive and user-friendly.
Research Questions:
How long does it take users to navigate to a pre-determined video?
What can we learn from the user flow, or steps users take to select and watch a video?
Sample size: 6 participants (3 male, 3 female)
Ages: 18-65
Main Findings:
Users want the option to save videos without having to go to the video page.
Users would like the ability to flip back and forth quickly between the different video category pages.
Mockups
After finalizing my low-fidelity prototypes, I added color, imagery, and text to create mockups resembling what the design would look like in its final form. I created one set of mockups for the desktop site and one for the mobile site. I then turned these into two high-fidelity prototypes which can be seen here:
The Editing Process
BEFORE
AFTER
➤ Color palette revamp
➤ Angular corners and shapes turned to curved ones
➤ Size of “Add to list” buttons and social media icons decreased
Aesthetic Changes
Overall, I was fairly happy with the functionality of my initial mockups, so I didn’t change much between my first mockup draft and my finished product. Most of my changes were purely aesthetic, involving color, shape, and icons. I modified my color scheme, opting for darker shades of greens and pink/reds. The original color scheme reminded me too much of Easter and Spring, and I wanted it to read as timeless. I rounded the corners of some of my shapes, such as the video boxes and “Featured Video” section, to break up the monotony of squares and rectangles. Similarly, I changed the video category images to circles. I also reduced the size of some of the icons, as I wanted to make sure the main focus of every page is the videos.
THE
BRAND
The Formaker’s logo font is reminiscent of calligraphy, representing one of the many forms of art that can be learned through a DIY tutorial on the site.
Color Palette
Logo Font: Luminari
Heading Font: Optima
Body Font: Open Sans
Thanks for tuning in!
Have thoughts or questions? Let me know!