Role + Impact

• Conducting Research
• Adding to an Empathy Map
• Creating Personas
• Depicting a User Journey
• Carrying out a Competitive Analysis
• Performing a Content Inventory and Audit
• Delivering a Card Sorting Analysis
• Profiling the Site Map
• Outlining the User Flow
• Composing Storyboards
• Drawing Sketches
• Designing Wireframes
• Updating Mockups
• Building Prototypes
• Establishing a Design System
• Conducting Usability Testing

Problem Statement

Design a website that helps customers:

Know Wiener Waggin’ and what sets them apart

Feel confident enough to book the event

Book the event easily and quickly

Not doing so would mean less profit with fewer customers navigating to, staying on, and booking events through the website.

Given that the owner already had a lot of in-depth knowledge of their target audience, I did not need to start from scratch with foundational research such as interviews.

Initial Research

Did secondary research

Created a survey for past customers

Read through reviews

Perused social media posts looking for caterer recommendations

Spoke informally with people looking for caterers

Problem

We ran into some issues getting a response from some past customers on the survey.

Solution

I remained flexible by using the available data and proceeded with the rest of the research

Empathy Map

Women in Late 20’s - Early 50’s

Household income 100k+

Has expensive tastes

Pays for other services

Another insight I gleamed from my foundational research: users are looking for ways to confirm that their expectations will be met. I wanted to keep that need in mind when ideating and designing the website.

Personas

User Wants + Needs

Affordable

Users want services to fit their budget

CONVENIENT

Users want to save time and effort

Friendly

Users want service with a warm smile

Unique

Users want something fun and different

User Journey

Translating the user’s journey into actionable steps:

Competitive Analysis

By comparing competitor websites to Wiener Waggin’ Catering’s current website, I could quickly get an idea of lacking areas, such as not listing a service area, packages, event calendar, recognitions, etc., while also seeing what works best for others.

Content Inventory + Audit

Looking at existing pages in depth and comparing them against criteria helped me determine which areas were lacking and which pages to keep.

Insights

Keep

• Plain language
• Tone of voice
• Testimonials
• Pictures
• Get Quote button
• Contact button

Edit

• Formatting
• Unclear headings
• Align content goal
• Old coupons
• Social media location
• Menu items

Add

• Metadata
• Service areas
• Owner Information
• Additional contact
• More review links
• Picture headings

Performance metrics such as page views, revenue, and qualitative insights also helped guide our decisions to ensure we updated the correct information.

Closed Card Sort Analysis

My goal was to test the clarity of the website’s distinction between the company’s catering and hot dog stand services. To do this, I conducted two card sorting studies with users.

• Packages
• Past Events
• Find Us
• Contact

Findings

Users were most unclear on the following after study #1

Recognizing a trend that users were categorizing information into 3 main categories (Catering, Public Events, and About), I ran a second card sorting study with the adjusted categories.

Card sorting #2 with the new categories showed more consensus among users. This informed the website’s information architecture and revealed users’ mental models.

Site Map

Packages & Past Events

Catering

Find Us

Public Events

Contact

About

User Flow

Visualizing the user flow as I organized the website helped me ensure it will meet user needs and goals.

Storyboards

Overall, we wanted to ensure that the user can meet their ultimate goal: booking an event with Wiener Waggin’. Giving users what they need to feel confident and an easy way to do this will ensure success.

Sketches

I used a number of techniques to come up with ideas quickly, such as Crazy 8’s and How Might We’s. Drawing out ideas in different formats helped me decide which I preferred to incorporate into the wireframes.

Wireframes

With sections and headers, users can easily see what makes Wiener Waggin’ unique.

My goal was to help users grasp information in a simple and fast way, so I strategically placed key details on each page and split remaining information into small chunks.

Mockups

The goal of adding details to the website mockups was to convince users that the company provides reliable, warm, and low-cost service.

Prototype

Problem

The owner had a hectic schedule and could only spare a few minutes on a sporadic basis to check the website’s details.

Solution

I added notes connecting the research to the website design choice. The owner and I could then leave comments throughout the document to discuss, and we met virtually when we could.

Design System

A design system helped me maintain consistency in the designs and makes it easier for the company to modify and expand the website design in the future.

Usability Study

Unmoderated

10-15 minutes

18-55 year old

Findings + Pain Points

The website was easy to navigate for users, who made few errors and completed their tasks quickly.

Users were curious about the “hot dog stand” tab and wondered what it contained, but they understood it clearly once they clicked on it.

Users had about a 1 second delay to spot the contact details and the “Get Quote” button on the top navigation.

I analyzed the results of the usability study and prioritized improvements that should be made to the website. After making the changes, I conducted another usability study before updating the website and going live.

Final Design