1.

Black Cat Records

Responsive E-Commerce Design

Project Overview:
- Mobile, Tablet, Desktop E-Commerce Interfaces;   Prototypes; and a Design System
- Individual Project
- 3 Months
- 2021

Black Cat Records is a hypothetical Record + Audio store.

The Goal of this project is to demonstrate my abilities in:
- Developing a design system
- Creating Brand Identity
- Making responsive wireframes
- Creating Prototypes for Omni-channel Experiences

Link to the Figma file can be found here.

Landing Page

2.

Problem Statement

Record stores have a wide variety and styles to them, but they general are geared for similar users. Black Cat Records needed to appeal to a wide audience and provide clear information to users as they shop for music.

3.

Research

I did a small comparative analysis of different memberships and some common patterns.
The comparative sites I looked at were:
- Rough Trade
- Dualtone
- Underground Sounds
- Bandcamp

My most notable findings were:
- Large hero to announce new releases, events, and/or sales
- Colors heavily leaning into brand image (if bold brand, has bold colors/graphics; if subtle brand, has subtle colors/graphics)
- Highlights the visual aspect of music (album covers and vinyl colors)
- Targets content and features for their customers (not allowing multiple copies to be bought to stop flippers)

4.

Ideation + Design

Based on the competitive analysis, I decided on the following terms to describe the brand:
- Graphic
- Edgy
- Old-School Retro
- Graffiti

I designed the experience to be very graphic and intense, making the logo a retro-neon black cat.

I also wanted to make sure that even with its highly stylized nature, it would still pass accessibility guidelines and be easily understandable by users.

5.

Deliverables

The final deliverables were:
- Responsive wireframes for mobile, tablet, + desktop
- Prototypes for mobile, tablet, + desktop experiences
- Design System
Link to the Figma file can be found here

If you have any problems gaining access to the file,
Please contact me.

6.

Appendices

Additional photos and documents for this project. I developed a design system and responsive screens for each view.

Please contact me if you have any questions.