"Do It Yourself Darlin'" (DIYD) is a local business in Cincinnati, Ohio with a mission to support and empower individuals to learn valuable home improvement skills. I worked with the founder to understand how people are currently experiencing the site and how we might improve the user experience through a site redesign to meet the business' goals of expanding their local reach.

👀 At a glance

PROBLEM

Signing up for DIYD workshops was a confusing disjointed experience with users struggling to find the information they needed to commit to signing up for a workshop, leading to decreased trust & value in the actual DIYD site and sign-up hesitancy among potential workshop participants.

‍

SOLUTION

The redesigned site involved evaluating and restructuring site content to better align with user expectations, as well as rebranding to better reflect the core values of the business through the website.

My role

Self-directed UX/UI Designer (Researcher, UX Design, Visual Design) working alongside founder of business.

Research Methodologies

User Interviews, Competitive Analysis, Usability Testing

Tools

Figma/Figjam, Wix, Canva

Constraints

120 hour project timeline, working within the constraints of DIYD's preferred platform (Wix)

Delivered

High-fidelity desktop and mobile prototype of newly designed responsive website

Impact

The recommendations DIYD implemented have led to increased newsletter subscriptions and increased average workshop sign-ups. (DIYD has not adapted the full redesign due to time constraints and small staff.)

Assessing areas of friction

HEURISTIC EVALUATION

Following Jakob Nielson's 10 Usability Heuristics, I started this project by conducting a heuristic evaluation. This helped become quickly acquainted with the site, identifying areas that might be causing usability issues.

🚩 Aesthetic & Minimalistic Design

The use of moving photos, a moving banner, and high-contrast colors on busy backgrounds creates visual clutter. A lack of clear hierarchy on pages makes it difficult for users to focus or find important content.

🚩 Recognition Rather Than Recall

Key workshop details are currently buried on workshop Eventbrite pages, making it difficult for users to find important information and increasing cognitive load as they go through the process of booking a workshop.

🚩 Visibility of System Status

Clicking workshop cards directs users immediately to Eventbrite with no warning. This has the potential to cause confusion for users as they aim to understand where they are in the context of the site and where to go for valuable information.

🚩 Help & Documentation

Important details related to the workshop are not housed on the DIYD site, but require users to be directed to the Eventbrite site.

Defining success with the stakeholder

DISCOVERY SESSION

To kick off my collaboration with the client, we held a discovery session to understand the goals of the business and what success would look like for this project.

goal 1

Increase the conversions in workshop bookings and newsletter signups

With plans to increase offerings, DIYD wants to present workshop content in a more organized way.

goal 2

Increase awareness on the site of ways to get involved

There are 3 different touch points of engaging with DIYD: workshop attendees, teachers, or a sponsors.

goal 3

Better align visual design with core values of the business

DIYD wants to do a better job at conveying their core values of inclusivity & non-judgment through the site's visual design.

As a small business, DIYD's workshop signups primarily rely on word of mouth. With their offerings expanding, they expect increased website traffic from individuals unfamiliar with DIYD. Success for DIYD in this project entails gaining insights into the current website experience to inform a redesign that aligns with their business objectives more effectively.

CONSTRAINTS

Keeping the site on their preferred platform, Wix, as well as keeping workshop booking on Eventbrite were 2 constraints to acknowledge for this project.

‍

While I anticipated these constraints directing some design decisions that may not be preferred, it was necessary to provide a relevant and useful end product to DIYD.

RESEARCH GOAL

I want to understand people's experience with 'do-it-yourself' projects and how that informs what they need and expect out of the DIYD website so that we can better meet business and user goals.

USER INTERVIEWS & USABILITY TESTING

In mix methods session combining user interviews & usability testing, I was able to uncover 3 core areas of frustration.

🤯 Redirection to Eventbrite leads to cognitive overload while decreasing value of the DIYD site.

When a user clicks on a workshop card, it immediately directs them to Eventbrite, opening a new tab. Users found themselves going back & forth between the two platforms, ending up with an overwhelming number of tabs as they tried to find the information they needed.

DIYD does not have a favicon for their tab browser, making it even more difficult to return back to the DIYD page!

👀 Important information is not easily discoverable

The Eventbrite page is a wall of text users are faced with as they try to find important bits of information related to the workshop. As users strategically scanned these pages, some users dropped off saying they would not sign up because it is too much work to sift through the paragraphs.

Some information was hidden and eventually found, but there were other bits of information that were not included at all which would need to be considered in the redesign.

🌈 Inaccessible text & distracting visuals cause uncertainty

Once users understand what DIYD is offering, they are very excited - DIYD's offerings are clearly meeting a unique need among DIY-ers. The website is currently acting as a barrier to communicating what product is being offered due to moving elements and inaccessible text.

How might we provide users with the information they need, when they need it, so that they are more likely to sign up for a workshop?

Targeting core user needs

PERSONA

The persona created from the research findings led to creating Casey, a resourceful, curious, & ambitious individual seeking to understand how things work in her home so she can fix things without relying on others. When Casey arrives on the DIYD website, she is looking to easily find workshop details for upcoming and past classes, gain a sense of the environment of classes, understand the class size and how much one-on-one instruction she might receive, & receive updates on newly released classes.

‍

_{User Persona (click to enlarge image)}

Establishing core focuses for the redesign

focus 1

Restructuring content to increase value of the DIYD

Restructuring and reorganizing content to increase chance of users discovering all DIYD has to offer.

focus 2

Ability to filter & sort workshop offerings

Making it more simple for users who are looking for a workshop targeting a specific skill.

focus 3

Improving overall accessibility

Removing any obstacle that causes users to strain to consume the information on the screen.

focus 4

Increase likelihood of users exploring ways to get involved

DIYD wants users to not only sign up for a workshop, but to also explore other ways to get involved.

Laying the foundation for a more intuitive structure

INFORMATION ARCHITECTURE

The current content structure does not align with users' expectations and goals. After a single click on DIYD, users are redirected to Eventbrite, which diminishes the value of the DIYD site, and requires users to navigate through a text-heavy page to find essential information. It is important to organization content strategically to ease the cognitive load and present users with only the information they need, at the moment that they need it, and in a format that’s easy to read.

‍

The new site design will still house workshop cards on the landing page but will also direct users to a 'Workshop' page with more details will help people view all pertinent workshop information in one spot versus going back & forth from DIYD to Eventbrite. The new structure also incorporates a page dedicated to Casa Colina, the iconic building where most workshops are held.

1. Workshop page

People expect to find key workshop info on the DIYD site and not just on Eventbrite. Listing an overview of workshop info on the landing page and then directing users to the “Workshop” page of the site will inform while still meeting users’ navigation expectations.

2. Staying connected

People want a way to stay connected with DIYD beyond following on social media. Calling out on the home page an opportunity to be notified of upcoming workshops will help people feel more connected and in the loop.
‍

3. Instagram feed

The existing photos on the site helped paint of picture of what DIYD is to potential workshop attendees. Connecting DIYD’s instagram content to the site will help to display DIYD’s brand identity on the site.

4. Ways to support

People were not always sure how “Make a Donation” was different from “Sponsor a Workshop”. Creating a CTA to easily direct people to give to DIYD would help to direct users to this option.

5. Workshop sponsors

Calling out sponsors on the main page brings attention to what kinds of businesses have the potential to be involved with DIYD through sponsoring workshops

6. Contact page

People felt like a message sent via fillable form may never reach an actual human. Including an email address, phone #, & physical address in addition to OR instead of a fillable form better communicates a physical presence.

7. Landing page content

The landing page has the potential of highlighting key info about DIYD with the goal of establishing the mission of DIYD without requiring users to dig. After scrolling down to the workshop content, most of the participants did not (on their own) go back to learn more about DIYD. This could be a way to make DIYD’s mission & values more apparent.

8. Casa Colina

People were interested in where the workshops take place. Even if not all workshops take place at Casa Colina, if it is a part of the identity of DIYD, it might be worth mentioning under “About”

9. Testimonials

People later expressed the desire to read testimonial content, but they did not end up finding the content on the site without guiding them to it.

Sketching out solutions

LOW-FI WIREFRAMES

Moving into sketching, I moved back and forth between Figma & Wix to double-check that my design decisions would work within the preferred platform of Wix. With the site structure revised, I wanted to design each screen so that the content was relevant to what the user is looking for on that screen, and easier to view.

_{Low-fi sketches (click to enlarge image)}

Making it empowering, inclusive, & fun

BRANDING

In addition to improving the usability of the site through reorganizing and restructuring of content, we worked together to create a mood board to establish a new brand direction for the site. We settled on the core values of empowering, inclusive, & fun to be expressed through the visual design, content, and copy. We wanted to go in a more minimalistic direction with the mood board to achieve a more simplistic site aesthetic.

My goal for usability testing was to uncover pain points, frustrations, and barriers with the newly designed DIYD website. I tested out the following flows with 3 participants:

Sign up for an upcoming workshop
Find past workshops
Find how to connect with DIYD
Find FAQ's
Find out how to sponsor a workshop

What went well

Actionable copy such as the "Explore Workshops" CTA prompts users to click. Additonally, all participants commented on the visual design being friendly and inviting.

‍

What needs work

On the workshop page, the workshop cards displayed on the left in 'grid view' with the 'list view' on the right, caused confusion as it appeared to participants as if the list could be additional content.

It was not clear to some participants where 'Support DIYD' would lead them. One participant wondered aloud about renaming it to 'Get Involved,' aligning with the original DIYD design. This feedback indicates an opportunity for refining the language to better convey the intended action. Once on the 'Sponsor a workshop' page, it took participants a while to process what kind of business would sponsor a workshop, but once they saw the sponsor logos at the bottom of the page, it was clarified for them. The cards detailing sponsorship levels were text heavy and not easily skimmable.

Based on these results, I identified high-impact/low-medium effort revisions to address for the MVP:

High priority: Redesigning grid view/list view toggle to give users the option to choose their preferred view.
High priority: Move sponsor logos higher on the 'Sponsor a workshop' page to provide clarity as to who would sponsor.
High priority: Change copy from 'Support DIYD' back to original copy, 'Get Involved'
High priority: Redesign sponsorship level cards to make easier to read at-a-glance

Incorporating the high priority iterations to finalize the MVP

FINAL DESIGN

✨ Content organized in line with user expectations, ability to filter/sort workshop search

Users are directed to a 'Workshops' page before they are directed to Eventbrite, where they can receive more information about workshops before signing up. Users can also search for Workshops by class type, and duration (Single day vs. Multi day).

✨ Improved accessibility, improved visual hierarchy

The new design has improved accessibility for reading text by placing text in front of solid backgrounds or backgrounds will adjusted opacity. Content and visual elements were placed throughout the pages to help the eye move from one item to the next in a more visually satisfying way.

✨ Reordering of content

The information previously housed under "Get Involved" is now organized in a way that is easier to digest at-a-glance, and the 'Sponsor a workshop' page lists the Sponsorship levels in a way that does not require the user to scroll through paragraphs of text.

✨ Mobile responsiveness

The new design was translated to mobile, ensuring all pages were responsive and easily to view on a smaller device for on-to-go DIY-ers.

Final Prototype

With the usability test complete, I implemented the changes into the final prototype. Due to business constraints, the client incorporated select recommendations into the website versus implementing the full redesign.

The recommendations the client implemented directly impacted an increase of newsletter and workshop signups.

Impact

For the scope of this project, I wasn't able to work with the client to implement the final design. As a small staff, they are putting on the back burner the process of implementing the final design in Wix, but they have implemented a few changes that have led to:

Increased newsletter sign-ups
Increased workshop sign-ups

What I learned

Tight timeline = tight scope

With just 6 weeks to work on this project, recruiting users for interviews, usability testing, and implementing a new brand direction was a lot to pack into our schedule. This was a huge lesson in defining a realistic scope for the project, especially if I am working on a self-led project without much support. Embracing constraints and adopting the 'less is more' policy is useful for everyone in the end!
‍

Do It Yourself Darlin'

Redesigning a local business' website for a more intuitive and accessible experience.
‍

PROBLEM

SOLUTION

To kick off my collaboration with the client, we held a discovery session to understand the goals of the business and what success would look like for this project.