Sound Test
Responsive Website and App E-Commerce Storefront
Remember to click any text looking like this!
EXAMPLE
Overview
As someone who enjoys music and who tends to use a combination of headphones and earphones throughout the day, I decided to work on a project that is a e-commerce store with the focus being audio peripherals.
Common digital stores UI tends to look dated and cluttered while there UX is difficult to navigate, so as a personal project I decided to research, design and mockup an example of a storefront with clean Interface and easy to navigate experience.
Understanding the Problem
Current e-commerce digital shopfront's are lacking in building a unique experience for customers; main issues are:
(1) Clunky User Experience that confuses and frustrates market.
(2) Interactions of websites are bland and offer no engagement for users.
(3) Information is thrown in without thought.
Many users tend to face these issues on a daily, a platform that does not encourage them to stay on there. How do we start by fixing this problem?
Well the first part of any project is to do some RESEARCH, the reason for this in any project is to see what's currently out there, get some background knowledge on the topic and then using what we learned to build a solution to the problem (In our case a digital platform for audio goods).
Conducting questioners' to Identify problems then Interviews to figure out how to solve them was the first part of this project, to ensure we can figure out how our users think and behave I construct a PERSONA and an EMPATHY MAP to use a a reference when It came to building the User flow and Wireframe and everything else following that.
Developing the Solution
After conducting research and using that data to build a profile on the users, the next step is ideating and working on either a USERFLOW, site maps, journey maps, WIREFRAMES or all to figure out how each window on a screen is going to flow. Card sorting and Information architecture are crucial, especially when working with many windows and setting, helping to categorise information.
Establishing the Brand
Creating a distinct style guide to ensure Sound Test stands out amongst it’s competitors and others digital storefronts selling similar goods.
Aa
Century Gothic
Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
#272727
#EFEFEF
SOUND TEST
Designing the Concept
Initially I didn’t want to take any Inspiration from e-commerce sites as I wanted to create something brand new. However having that familiarity between the user and the new platform was the best route to go towards.
From an evolution perspective familiarity breeds likability, and things that are familiar are safer; So taking that idea to design the website by having similar artefacts in mind was key to ensuring users were not automatically against exploring the website/app.
Scroll down to Reveal more of the High Fidelity Mock Up!
Prototype
The Final design of a product page was designed to minimise as much information as much as possible to ensure an easy to navigate experience that does not overwhelm users.
Navigating Menus
Example of Interface navigating through the menus and showcasing the Information Presented in a clean and organised format to ensure users don’t get confused or overwhelmed by the Information.
Simplifying Menus
Reduced as much Information on the screen to prevent over-stimulation which can occur if there is too much information spread throughout the page. Overall this design choice was established at the start through conducting Interviews to understand the issues with working on a smaller aspect ratio.
Website Interface
While mobile aspect ratio was the main focus of this project as the idea was to create something for users not inside at their desk but on the go, It was still important to ensure the desktop site was designed carefully and didn’t fall behind the mobile space.
Checkout Page
The checkout page was something I wanted to play around with, do something that excited people to finish their transaction and witness the fun but simple animation at the end of the presentation.
Conclusion
The project overall was a success, the creation of a digital platform that creates an easier experience for users while being easy to read and follow along with what a product is about. There are some aspects which I believed could of been improved such as the Animation at the checkout, but due to time constraints and abilities at the time of this projects development, I was not as experienced as I am now with motion design.
Other Projects
Check them out!
Contact Me
Want to get in touch?
Send me a message!
