top of page

DC Happy Hours Website Redesign

CLICK HERE TO VIEW FINAL PROTOTYPE

(BEST VIEWED ON DESKTOP)

WEBSITE REDESIGN - UX/UI DESIGN - DESKTOP BROWSER

I embarked on a 2-day design sprint to redesign the dchappyhours.com website to make it more enjoyable to use.

Team

​

Me (Solo Project)

Roles

​

  • Research

  • UX/UI Design Lead

  • Wireframing

  • Prototyping

Tools

​

  • Figma

  • FigJam

Duration​

 

2 days

Sebastian (M/30)

About:

  • Occupation - Financial Economist

  • Goes to HHs at least once a week

  • Usually likes to spend as little as possible

  • Gets frustrated if something doesn’t work

  • Goal: Would like to have an easier time getting notified of happy hours

​

Observations and Pain Points about DCHH website

  • Likes the filter by neighborhood feature

  • Notes that going between listings is hard to see like the layout is meant for mobile

Ellie (F/30)

About:

  • Occupation - Designer

  • Goes to HHs at least once every other week

  • Prefers to spend $30 or less on drinks AND food

  • Likes to figure things out

  • Goal: Wants to find more places that offer food specials

​

Observations and Pain Points about DCHH website

  • Likes the Near Me filter

  • Thinks the copy at the top (both front page & listings) should be replaced by a Hero Image

  • CTA button isn’t prominent

  • Doesn’t feel drawn to any particular feature

  • Site aesthetics needs to be updated

Observational Interviews

I conducted observational interviews to quickly gain insight into regular users' goals and the website's pain points through other users.

THE CHALLENGE

Let's face it. DC Happy Hours website looks out of date. Today, when users want to find a happy hour on a dedicated local HH website, they have to navigate the website in a way that isn’t familiar to them nor enjoyable to look at.

This is unacceptable because it should be easy to find businesses that have HH and also enjoy using the site. I envision a website that merges a tailored design with the capabilities of a detailed search and we will accomplish this through competitive research and well-designed visuals.

1. Visibility of system status / Issue Severity: 3
6. Recognition rather than recall / Issue Severity: 4

Issue: When searching for HH Near Me (and Right Now, Near Me Right Now) page doesn’t explicitly say that we’re searching for HHs near me. Only gives the list of businesses.
Recommendation: Indicate what criteria we’re looking at if clicked.

  • Show location mini-map with option to expand to map mode

  • A headline that says Near Me etc.

1. Visibility of system status / Issue Severity: 4

Issue: Clicking on a listing on a map doesn’t give me a snippet of info for the business
Recommendation: Show snippet of info for each business clicked

  • Show 1-3 businesses info that’s within the map area, like Yelp

  • Opportunity to highlight new happy hour specials with special location icon

8. Aesthetic and minimalist design / Issue Severity: 4

Issues:

  • UI feels cluttered

  • Intro copy is too long

  • Need to prioritize how people prefer to search for HHs

  • Needs more colorful visuals and white space

Recommendation:

  • Redo info hierarchy on listings

  • Filters column could be smaller

8.Aesthetic and minimalist design / Issue Severity: 4

Issues:

  • Ads are in weird places and take away from important info

  • Ads blend in with the site

  • “You may also like” should be at the bottom 

Recommendation:

  • Place ads at the bottom of the page

4. Consistency and standards / Issue Severity: 4

Issues:

  • Info may not be updated consistently since info is crowd-sourced

Recommendation:

  • Form a dedicated team or AI script to update info weekly or on-demand

Heuristic Evaluation

I did a heuristic evaluation to zero in on particular pain points that hinder a user from using this website consistently.

THE SOLUTION

I embarked on a 2-day design spring to create visuals that are modern and follow today's design standards. The website should draw users to use the website, be well-designed and

aesthetically pleasing, and ease navigation. There will be clear pictures of the restaurants, a stronger typographic hierarchy, and a less cluttered interface. 

Holiday Recipe App

THE BACKGROUND

DC is widely known for it's happy hours. After working 8 hours a day 5 days a week at a federal job, one of the ways you can let loose is having a drink right after work. 

That's where DC Happy Hours.com comes in! It is an aggregator for all things happy hour in the DC area. It has great search filters and a wide data base, however, the design looks a bit...ehhhh.

THE PROCESS

Discover

  • Observational Interviews

  • Heuristic Evaluation

Define

  • Personas

  • Competitive Analysis

Ideate

  • How Might We...

  • Prioritization Matrix

  • Information Hierarchy

​Prototype

  • Wireframing

  • Hi-Fi Designs

Test

  • User Testing

Proto-Personas

I synthesized the data I gathered from the observational interviews and basic demographics from the DC area to create these initial personas.

What works well

  • Hero image

  • CTA is front and center

  • Popular filters below

What works well

  • Listing and map are shown together

  • Filters take up ample space and are stickied on the page as you scroll

  • Search bar has a minimalistic and functional design

What works well

  • Hero image and gallery

  • Shows menus

  • Opp to auto view HH menu below if they have one

  • Order Now option

  • Opp to redirect to order/payment site

Mi Vida Yelp Page

Competitive Analysis

I did a competitive analysis to take note of what works well for other websites that also have the ability to search for happy hours.

THE IDEATION

Here I use the How Might We method of ideation to come up with solutions to the issues at hand.

Then I used a Prioritization Matrix to prioritize which ideas I wanted to focus on for the sprint.

THE INFO HIERARCHY

I quickly sketched out how I wanted the information to be presented. It needed to reflect the users' needs and also

consider aesthetics and readability. Here I used simple blocks to map out where each component will be.

THE WIREFRAMING

Here I created wireframes to more accurately portray what the site could look like. I also incorporated the use of color to experiment with branding.

I also made 2 versions of the card listing on the landing page to see what format worked the best.

 ✔ Landing Page A ✔

X Landing Page B X

 ✔ Listing Page ✔

 ✔ Drop Down Filter Menu ✔

THE HI-FI DESIGN

After finalizing details from the wireframes, I made high fidelity designs of the landing page and 1 listing page to 

test out. I elected to use a local nearby restaurant to show basic information I think should be required in a listing.

THE OUTCOME

After testing the hi-fi prototype, participants rated the new site 4.8 out of 5 in terms of satisfaction.

Compared to the rating of 3 out of 5 the participants rated the original site, this was a major improvement.

bottom of page