Website Redesign
redesigning a music e-commerce website for mobile and web
Outline
1.0 Introduction
This project involved the redesign of an e-commerce site for musical instruments informed by analysis of the original design. For the redesign, I focused on integrating the original design’s thematic concerns and unique brand ethos with a more modern minimalist standards of design. This served to improve usability and visual balance while remaining sincere to the brand’s identity and recognisable to current customers.
2.0 Research
research
The e-commerce business related to the original design is exclusively online store focused on selling second hand retro audio equipment to share knowledge of the “wonderful electric instruments exist in the world”. This passion is something I admired and wished to preserve and express in the redesign.I conducted a critical visual analysis of the original design focusing on: the homepage page, the list of products, a selected product page, and the shopping cart or checkout process. The analysis revealed several critical issues and features.
2.1 Critical Analysis
3.0 Ideation
ideation
3.1 Sketches
3.2 Wireframes
Homepage
The wireframes use a consistent visual system of iconographic navigation, rounded edges and text styling to create visual unity and balance.
The homepage wireframes develop a keyboard style navigation - a thematic signifier consistent with company ethos - to include icons rather than photos; icons are more uniform and adhere better to minimalist modern design styles.
Product Page
The wireframes use a consistent visual system of iconographic navigation, rounded edges and text styling to create visual unity and balance.
The homepage wireframes develop a keyboard style navigation - a thematic signifier consistent with company ethos - to include icons rather than photos; icons are more uniform and adhere better to minimalist modern design styles.
Error Pages
The wireframes use a consistent visual system of iconographic navigation, rounded edges and text styling to create visual unity and balance.
The homepage wireframes develop a keyboard style navigation - a thematic signifier consistent with company ethos - to include icons rather than photos; icons are more uniform and adhere better to minimalist modern design styles.
3.3 Visual System
I experimented with several visual styles during ideation based on the final wireframes.
The design below examines the effect of a different navigation method on visual composition, leveraging external inconsistency to construct a more memorable interface
Designs exploring different aesthetics to the original design
Designs exploring different aesthetics to the original design
The retro designs combined external standards of retro style and unique features of the original design to comply with specific discourses of retro design: Art Nouveau, American Kitsch and Bauhaus.
The designs, specifically integrated components from the original design - keyboard navigation with product-specific colours - to retain brand ethos and remain recognisable with key brand components.
I also explored design styles that deviated from the original design to facilitate the exploration of a wider range of design styles outside the initial design scope: maintaining the original design style. Different design styles are explored through the format of content and typeface.
4.0 Prototype
prototype
4.1 Final Design
4.2 Mobile Interface
4.3 Web Interface
5.0 Implementation
implementation
link to implementation ↗︎
This stage of the project focused on the technical implementation of the design from an interactive prototype to functional page using HTML, CSS and Javascript. The implementation of the design assessed it’s technical feasibility and required critical consideration of alternative design solutions.
5.1 Changes
Change 1
The cart model assumed a background overlay to focus the user gaze on the cart content by leveraging Gestalt, as the additional content otherwise proved distracting to users during brief user feedback.
Design
Implementation
Change 2
The search Input was removed from navigation bar in the web interface and only displayed on relevant search page to reduce content redundancy
Design
Implementation
Change 3
Request and Inquire buttons were not have fixed as users indicated the buttons were too clicked accidentally too easily frustrating users. The product type icon is not highlighted as the highlight inferred the icon was active inferring a completed interaction causing users to miss the icon’s functionality and become frustrated.
Design
Implementation
%201.png)
Change 4
Design
Implementation
%201.png)
System error messages were used instead of custom error messages as they were more familiar and readable due to the contrast.
6.0 Evaluation
evaluation
Was the project a success?
The project can be considered a success by measures of the initial project goals.
- The implementation realises solutions for issues concerning the original design: responsive design, content redundancy and external consistency
- Key visual components relating to the original design visual discourse are successfully preserved and noted by users for their consistency with the original design as a positive aspect.
- The implementation facilitated greater visual consistency and expression of retro and musical discourse through greater customisation
How could it be improved?
- Implementation of specifically complex functionality and greater scope would both improve the interaction flow and user evaluation.
- More custom animation to fit with the retro themes