Website Redesign

Reckless Records

Designing the perfect UI, design system, and Website.

Overview

Reckless Records is a longstanding record store in Chicago, IL. The website details new releases, used products, and events at each location. I undertook a redesign to enhance competitiveness and maximize site engagement with patrons.

Approach

I performed user testing, conducted a heuristic evaluation, and undertook a competitive review. Identifying relevant competitors and testing users provided valuable insights into design implications.

Heuristic evaluation

I initiated the process with a brief heuristic evaluation to identify standout aspects of the site requiring improvement. Adhering to Nielsen’s general principles, I pinpointed issues related to clarity and relevance.

competitive analysis

I researched Reckless Records’ competitors to explore industry standards and analyze the differences and similarities among various websites.

Mind Map

usability tests

To identify user difficulties, I conducted usability tests with three Chicago residents, having them interact with the original site. Participants were guided through three representative tasks: searching for music, making a purchase, and finding information on selling music.

During the usability tests, participants expressed confusion with the homepage, citing information overload. Additionally, they perceived non-clickable elements as clickable, leading to navigation challenges and unintended paths. Participants generally favored an alternative layout over the current homepage design.

site map

I constructed a sitemap based on the current structure of Reckless Records' website.

I wanted to streamline the main elements and consolidate similar paths by focusing on the core tasks of the website (buying, browsing and selling music).

Current Architecture
Updated Architecture

Logo design

Wireframes

Lo-fi prototype

first round testing

Mid-Fi prototype

second round testing

Hi-Fi Prototype

I designed Hi-Fi prototypes based on my initial wireframes and updated sitemap.

Homepage
Product Page

Next Steps

  • It’s essential to design prototypes for interactions across various devices, ensuring responsiveness for each viewport size.
  • Conduct user testing to gather feedback on the hi-fi version and smaller viewport sizes.
Next Project

Low Shoulder