RESPONSIVE WEBSITE REDESIGN

THE SUCCULENT SCENE

Redesigning a small business website to refresh brand and increase engagement

OVERVIEW

ROLE

  • User Research

  • Usability Testing

  • UI Design

  • UX Strategy

TOOLS

  • Figma

  • Miro

  • Loom

  • Optimal Workshop

TIMELINE

  • 80 hours

  • 2 weeks

Background

the Succulent Scene helps you throw a fun, creative DIY Plant Party. They bring all the supplies, tools, and instructors to help your group build their own succulent terrarium.

The Succulent Scene’s website was not attracting a steady amount of activity or customers. They were very unconfident with their site and knew changes needed to be made in order to gain more business.

Problem

the Succulent Scene had a non-responsive website that was unintuitive and left customers with many questions. They needed a fresh redesign backed by user research to better explain their services and attract a larger audience.

SOLUTION

Through several research methods (user interviews, usability audits, competitive analysis, surveys) and usability testing against multiple prototypes, we arrived at this redesigned solution:

RESEARCH

Competitor Analysis

Before diving into the redesign, I explored similar businesses to research where they’re doing well, and where they could be improved.

The common strengths across the websites included thorough information, professional pictures of their products and events, and a variety of choices.

The weaknesses lied in poor accessibility like unclear buttons, lack of dividers and organization, and high price points.

From these insights, I took note of the Succulent Scene’s current strengths over their competitors that we needed to highlight:

  • Competitive price point

  • Unique product characteristics

  • Past history of partners and events

User Interviews & Usability Audits

After gaining an understanding of the competitive space, I conducted 7 in-person interviews and usability audits to hear first-hand perspectives and feedback on the old website. I interviewed people experienced in planning events/activities or working with vendors.

My objective was to learn what information users need when deciding to book an event/service and how to best present this information. I synthesized the insights I got from these interviews in these three buckets:

  • Upfront prices

  • Testimonials

  • Pictures of products

NEEDS

  • Lack of detailed information

  • Unorganized content

  • Prices not clear or upfront

  • Pop ups

PAINS

  • Multiple forms of contact (text, call, email, form)

  • Calendar availability

  • Professional aesthetic

WANTS

DEFINE

Persona

Based on user interview feedback and frustrations, the persona of Caitlyn was developed. Caitlyn is our target planner type of user whose responsibility is to find and book an activity for her group. With Caitlyn’s persona detailed, we could empathize with an event planner’s common challenges, like budget constraints, and motivations, like finding a memorable activity.

Sitemap

I facilitated an Open Card Sort with the interview participants to see how they would naturally categorize information regarding the Succulent Scene’s products and services.

With Caitlyn’s goals in mind plus the results of the Open Card Sort, I developed this sitemap with 5 primary pages to provide user’s with a clear understanding of what the business provides, who they are, and how to inquire more.

I built this sitemap as a flow of answers to users’ most frequently asked questions.

DESIGN

Low Fidelity Wireframes

When drafting these low fi wireframes, I wanted to keep the strengths the Succulent Scene already had (How it Works breakdown, event type examples, Prices page, etc.) while adding on what the research revealed they were missing:

  • More info describing what they offer

  • Real pictures of their products and events

  • Responsive layout

UI Style Guide

BEFORE

Users associate succulents with nature so we wanted to match this feeling in the style of the website. The client initially approved this earthy color palette.

CHALLENGE:

High Fidelity Prototypes were created with this aesthetic. Just before prototype testing, the client backtracked and requested a new look and additional content.

Going backwards to re-test and re-implement the new color palette and information was challenging given the time constraint for this project.

However, through testing, the changes proved to be what users liked more.

AFTER

The client decided they wanted their aesthetic to match these flower bouquets - with a more colorful, fresh, and vibrant feel.

FIRST and SECOND Iteration

In addition to aesthetic adjustments, the client requested to add in several more sections of information i.e., “WHO WE ARE”. After iterating, testing, and also sending our surveys to garner more user feedback, we received positive feedback with the changes.

These iterations extended the workload by several hours, but the project was still completed by deadline!

TEST

Prototypes & Usability Tests

After updating the wireframes, it was time to put the designs to test.

In addition to examining how users move through the product and ensuring the user experience is intuitive, we had two tasks for users to accomplish which aligned directly the Succulent Scene’s business goals:

  1. Visit Experiences page

  2. Submit inquiry form

Test Results

Task Completion

7/7

Participants successfully submitted inquiry form on Contact Us Page

6/7

Participants explored the In-Person Party or Virtual Party page

Positive Feedback

“I love the example pictures of how your products and events look like.”

“It was easy to understand the distinction between your services.”

Critical Insights

6/7 participants didn’t read through “How it Works” steps in the sub pages - just scrolled through

4/7 participants tried clicking on Terrarium cards looking to find more information

3/7 participants recommended “We’ve partied with” section should be moved to bottom

ITERATIONS

I gained a list of insightful, critical feedback from the usability tests. However, I needed to prioritize which iterations were to be made. I narrowed down the list based on what made the site most consistent, intuitive, and thorough for the users and business goals.

FINAL REDESIGN

X Unresponsive design

X Inaccessible typography

X Lack of company and package details

X Poor information architecture and flow

X No authentic company images

✔ New, vibrant, engaging website redesign

✔ Authentic, convincing image gallery

✔ Descriptive, digestible information

✔ Clear, intuitive user flow

KEY TAKEAWAYS

CHALLENGES

The client requested significant changes near the end of the project - which poured several more hours into redesigning and retesting.

What I will do next time is set clearer expectations with the client upfront to discuss the timeline, deliverables, and deadline for feedback. This communication is vital for both the client and the Product Designer.

I learned that there is education and negotiation that the Product Designer has to carry out when working with clients. This experience has certainly prepared me for future collaboration with clients.

SUCCESSES

It was rewarding to receive grateful feedback from the Succulent Scene. They really saw the value in the user research and testing and understood the reasoning behind the changes and decision making process.

FUTURE DESIGN CONSIDERATIONS

  • Include video snippets of their parties

  • Continuous testing and iteration i.e., Do people prefer to see “Who We Are” or “What We Do” first?

  • Check if any pages lack activity and iterate