Vintage Electronics Store - A UI Case Study
Tags: UI exploration, Vintage design, Case study
Deliverables: Landing page
Tools: Figma
Overview
Have you ever found yourself drawn to old-school gadgets? You know, the ones that bring back memories or make you go, “Wow, remember when?” Well, that’s what Vintage Electronics Store is all about.
It’s a place, both online and in-store, where you can find all kinds of vintage electronics. Maybe it’s for the stories they hold or just because they’re cool. Whether you’re into showing off classic gadgets to the kids or just love collecting tech treasures, we’ve got you covered!
💡 Let’s dive into the process behind this design exploration and take a trip down memory lane together.
Why? 🤔
You might be curious about how and why I came up with this idea. Well, there’s a little story behind it. It all started when my friend introduced me to the Relume Design League series on YouTube. It’s this cool live event where professional designers go head-to-head, creating designs on a given theme in just 30 minutes.
During one of the battles, the challenge was to make a landing page for a drink company. I was impressed by Niccolo’s design approach. His wireframe for the hero section looked like it would be perfect for a vintage store and that’s how the idea for Vintage Electronics Store was born.
Moodboard
Niccolo’s design was my main inspiration for the mood board, while other influences included vintage images such as TVs, and newspapers, among others.
~ Niccolo’s Design 👇🏼
Persona POV:
As I’ve grown older, I’ve noticed that many of the old electronics from my childhood are nowhere to be found. While I didn’t encounter most of them, I do remember things like the old TV, lantern, radio, and typewriter. Sometimes I feel a strong wave of nostalgia, wishing I could relive those memories in real time. However, finding those old electronics isn’t easy.
The Problem & Proposed Solution
The challenge lies in the limited accessibility of vintage electronics for those who seek them. As I mentioned earlier, my search for similar services yielded minimal results. Furthermore, there’s a notable absence of online platforms that facilitate auctions or bidding for these items.
Solution:
To address this gap, the implementation of an online marketplace is crucial where anyone can easily browse and bid on electronics from the convenience of any location. By providing such accessibility, vintage tech lovers can find what they’re looking for without the hassle.
Research and My Thought Process
Once I had a clear idea of what I wanted to achieve, I started by looking for similar websites to gather inspiration. Unfortunately, I didn’t find many effective results — just a few like “My 60s TV”. Despite this, I decided to stick with the original vision I had.
Next, I searched for various vintage electronics and downloaded images that I thought could be helpful. Since this was a quick design exploration, I didn’t conduct any user interviews or surveys. Instead, I focused on understanding how vintage stores operated.
As for the transaction process, I opted for an auction-style bidding system. I figured this would generate more interest and discussions, potentially attracting more users to the website. After all, people love a bit of competition and the chance to win something, which auctions can offer.
Design Breakdown
💡 Colour Usage
I primarily employed black and white as the two dominant colors in my design.
🖋️ Typography
I utilized “Bebas Neue” for the headings to capture the exact ambiance I sought to convey on the page; its aesthetic perfectly aligns with the theme. Complementing this, “Sentient” was chosen for the body text for its readability, and it still maintained that vintage style. In the review section, I opted for “Chomsky” for the heading “Vintage electronics store” to evoke a classic newspaper aesthetic, aligning seamlessly with the overall design.
1. The hero section
In this section, you’ll spot a Vintage TV taking center stage on the page. Zoomed in to highlight its intricate details, it’s surrounded by a vintage background to evoke a nostalgic tone.
Navigating the site is easy with links in the navigation bar. The hero section is crucial because it’s the first thing that grabs the user’s attention. The TV was chosen because it’s a familiar symbol of vintage electronics and brings back fond memories for many. It’s like a warm welcome, inviting users to dive into what we have to offer.
2. Explore our curated collection
The next section showcases other vintage collections, with the CTA inviting users to “Discover all.” This encourages users to explore a variety of available electronics, similar to how seeing one shirt design on a website or at a store might prompt you to check out more options.
3. Discover Our Legacy
In this section, I shared the story behind the business to create a connection with the visitors on a personal level.
4. Turn Your Old Items into Cash
Most visitors might be curious about how they can convert their old electronics into cash, this section provides a 3-step method on how to achieve that.
Here, I wanted the users/visitors to know that it’s not just about spending money; and that they can also make money by selling their vintage collection. This makes the website a platform for both buyers and sellers.
5. Visit Our Physical Stores
Visitors get to find out the physical locations of the stores so they can visit.
I wanted the visitors to see images of the physical stores located across the country for easy recognition. I also provided their locations so visitors can drop by and browse through the vintage collections in person.
6. Hear from Our Customers
This section shows customer reviews.
To maintain that authentic vintage vibe, I designed the customer reviews section to look like an old-school newspaper. It’s a throwback to the 20th century, adding to the nostalgic experience. Even though newspapers have evolved and are more digital and colorful, I wanted to transport the users back to the good old days with the reviews appearing in the form of a monochrome newspaper.
I also highlighted a part of the review so visitors could get the main idea of the review if they chose not to read the text.
7. Footer
The landing page concludes with a footer section that directs the viewer to quick links for easy navigation. These quick links include business information, and locations which are provided just in case visitors miss them while browsing the page.
Iteration
Before settling on the final design, I underwent numerous iterations. Initially, I leaned toward this particular design, …
…finding it visually appealing. However, upon further exploration, I realized that it did not effectively communicate one of the primary objectives of the website. In contrast to the newspaper concept, where the initial impression might not convey the nature of the business, the current hero section signifies an old electronics store. While a newspaper might evoke a sense of nostalgia, it may not immediately convey the nature of the business which might be potentially confusing. This realization prompted the decision to feature the TV as the hero image, ensuring clarity and coherence in communicating the website’s purpose.
Final look
The overall appearance of the compiled designs.
Conclusion/Reflection
I’m excited to explore more designs like this one. After sharing it with several people, I received a lot of feedback and critique, which I’ve used to make adjustments. I’m even considering creating additional pages for a complete website, transforming it into a comprehensive case study.
One thing I’ll do differently next time is to conduct interviews with at least 2–3 people. This will enable me to move beyond secondary research and avoid letting my UX bias overly influence the design.
I’m also still weighing the idea of whether to make the transaction process an auction-bidding platform instead of a straightforward buying and selling system This is an aspect I’ll continue to explore as I hone my design approach.
Thank you for taking the time to read this. Feel free to leave your comments and feedback below.
Thank you!
