The Framework
Learn Research, observe, get fully immersed
Define Identity goals, objectives and challenges
Design Sketching, conceptualize ideas into visuals, wires & mockups
Test Prototypes, iterate, experiment and test
Audit
Competitive
We performed an audit to gather insights and feedback from competing websites. We used heuristics as a form of criteria to bucket topics include them as using a rule of thumb such as an easy checkout and clear navigating.
Out of Category
We researched websites to find out what already exists. We found relevant websites for trends and patterns, and created heuristics that guide us towards our eventual final product. We adopted an impactful hero image and slide-out carts.
Social Listening
We looked though comment threads and conversations online in response to the questions like "Why listen to vinyl?" on Youtube and Reddit. A trending theme is people love vinyl artwork and the physicality of a holding and playing records. People want to feel nostalgia and have a physical interaction with the music they’re listening to.
Sitemap
We planned our information architecture by building a layout for the digital product through pages.
Flows
Flows are paths a user will follow in order to complete a task.
Hand drawn sketches
Sketching on paper is a fast and efficient way to bring ideas to the table. During this process, we focus on creating new ideas and approaches for our e-commerce site.
Wireframes
User Testing & Iterations
To get an assessment, we created a prototype with the existing wireframes and tested users. This is how we got feedback that helped improve the site’s navigation and usability.
After user testing of PDP V1, we realized our users were confused with the ability to choose a playlist on both A and B side of the vinyl, so we simplified it.
Moodboard
My partner and I looked at color theory for inspiration in this brief. We wanted to convey a feeling of innovation and magic for a product that some users may consider outdated.
Mockups
Evolution of the Homepage
Find a Product Flow
From our homepage, we have multiple ways to get to a product: through the hamburger menu, CTA, and the "show all" in our third module. From user testing, the most selected was the primary CTA.
Product Description Page
In the PDP, there are 4 different swirling abstract covers to choose from and the option of connecting to your favorite music provider: Spotify, Apple Music, or Amazon Music.
The heuristic: recognition rather than recall, making options visible and not hidden will reduce the need to remember where items are.
The Homepage
For a simple navigation, we used an account icon for users who want create a profile to return to their playlists and shopping bag icon for easy access to cart.
We have a clear call-to-action button to push our users through the funnel.
The font, Montserrat, is used for a simple and clean looking web design. The family font has nine styles to choose from, from thin to black. As a sans serif, it has high-readability.
According to color theory, blue represents reliability and trustworthiness. Purple represents imagination, innovation and magic. Yellow represents hope and happiness.
