This project covers front-end user interface, web design and development for an eCommerce site. I was assigned to research existing online record store, and select one to work on for a web interface refresh, specifically from homepage through to its checkout process. Greville Records is a local record store in Prahran with a great collection of second-hand vinyls. The full scope of the project includes market research, wireframe iterations and drafts for web interface, web navigational flow design and finally implement the designs using HTML, CSS and JVS code.
The immediate issues noticeable on the website was its overcrowded nagivation bar, which does not stick to the top during scrolling on a very long homepage. Futhermore, the visual identities and colour palette of the site could be improved to enhance readability of text, but also to better reflect its brand image as a passionate, community-centred vintage record store.
Check out Greville Records' official site →User Interface Designs
Wireframe Ideation
The first stage of the project involved iterative sketching of a series of wireframes with varying visual hierarchies and priorities that changes the user’s overall impression and experience of the interface. This is a brainstorm of various interface solutions.
Prioritises the filter feature that helps users browse through the record collection with genre and artists. Converting the overcrowded navbar from the original website into something easier to use.
The main feature here that deferred from the other sketches was a horizontal scroll to browse on the homepage sections. It encouraged a more centre-aligned interface.
A more visually compact design using modular blocks to divide up the information in less space. This format aims to push sales onto the user, which may be more overwhelming and corporate, imitating the styles of Chemist Warehouse or JB-Hifi.
This design attempts to be more relaxing to the eye, with a full title screen to welcome the user before scrolling on to browse. The browse page leaves more room for bigger album images and labels. However, this means that the browsing process will be very slow and extended.
A balance of everything from the previous iterations. This iteration was used to go forward into the final design. It starts with a gallery, taken from the original homepage, to show the best of the local record store.
Annotated End Result
