Dead Dog Records Website Redesign

Web Design
black cat project logo on stock image of young girl and black cat
ROLE
Web Design
CLIENT
Dead Dog Records
SOFTWARE USED
Adobe XD, Adobe Illustrator
PROJECT DESCRIPTION
The website redesign of Dead Dog Records includes three sample pages: a landing page, a product page and a checkout page on both mobile and desktop.
Orange right arrow
black cat project logo white on black backgroundblack cat project logo black on white backgroundblack cat project symbol on white backgroundblack cat project symbol outline on black background
three street posters mockup for black cat project
billboard poster for black cat project
bus stop poster for black cat project

Background

Dead Dog Records is a local Toronto record store that opened in 2014. This project is a redesign of their current website.decided to redesign their website as I believed it had the potential to go from a neglected looking site to something that would match the cool, minimalistic feeling of Dead Dog Records' current branding. The goal was to improve on the typography, hierarchy/layout and create a unified design system.

Dead Dog records mood board
MOOD BOARD
Rough sketches in a sketchbook
SKETCHES
Dead Dog Records Website style tile
STYLE TILE
Multiple website screens layered on top of each other

Website Pages - Mobile + Desktop

Landing Page

Dead Dog Records Website Redesign mobile landing pageDead Dog Records Website Redesign desktop landing page

PRODUCT PAGE

Dead Dog Records Website Redesign mobile product pageDead Dog Records Website Redesign desktop product page

CHECKOUT PAGE

Dead Dog Records Website Redesign mobile checkout pageDead Dog Records Website Redesign desktop checkout page

Background

Castaways Bar & Grill is a fictional family friendly restaurant located next to a harbour in Beaufort, South Carolina. It specializes in seafood but has a little bit of everything as well.

Mood board for Castaways Bar & Grill
MOOD BOARD
Castaways Bar & Grill logo sketches
LOGO SKETCHES
Castaways Bar & Grill Style Tile
Castaways Bar & Grill menu front page on an orange background
Castaways Bar & Grill menu front pageCastaways Bar & Grill menu back page
Castaways Bar & Grill menu front and back mock up

Digital Menu Screens

Background

Understanding how to properly manage waste is a common struggle for the average person for a number of reasons. It has become an overly complicated process and leaves the average person confused more times than not. If done properly however it is a tangible way that one person can help fight the current climate crisis that we are in. The goal of this project was to create a digital experience that educates and guides a user through the process of recycling based on their location.

Sketches + Wireflow

I decided to sketch some lo-fidelity screens for a recycling app. This helped me decide what I wanted to include and how elements would be laid out. I started with my sketchbook before moving to my laptop to digitize and organize these sketches into a basic wire flow. As the app became more developed, it was likely more screens would be added.

recycle key app wireflow
Recycle Key screens mockup

App Screens

Onboarding

These onboarding screens are shown when the user first accesses the app and are a brief guide as to how to use the app. These screens can be accessed later on through settings.

Recycle Key mobile app four onboarding screens side by side mockup on transparent background

Main

The main screen is where users can search what they want to recycle or choose a generic recycling category.

Recycle Key main mobile app screen mockup on transparent background

Category + Item SPECIFIED

When a category is chosen from the main screen, the user is brought to this screen where they can scroll through items/materials within that category.

When an item is chosen, the user is informed where and how it can be recycled.

Recycle Key category and item screen side by side mock up on transparent background

SCANNER + Item IDENTIFIED

When the scan has been completed, the item is identified for the user.

Three Recycle Key scanning feature screens mockup on transparent background

SCHEDULE

The schedule page informs the user of the recycling schedule based on their location. The location can always be changed or updated as needed.

Recycle Key schedule screen mockup on transparent background

SettingS

The settings screen has a number of options for the user to choose from. This includes an about section, app feedback, help, location, notifications, onboarding and the ability to report any issues.

Recycle Key settings screen mock up on transparent background
Recycle key mobile app screens side by side on light blue background

Other Projects