Redeye
Period
Mar 2020 - Jul 2020
Individual Project
E- Commerce Website Redesign
My Role
UI Analysis | Prototyping | Frontend Devevelopment
Project Overview
This design project was undertaken as part of my bachelor's studies. I selected an e-commerce site called Redeye Records and revamped its user interfaces for both desktop and mobile versions. Red Eye Records is a UK-based retailer specialising in vinyl and CDs, with a rapidly expanding e-commerce platform.
Analyse
User research was carried out to gain a deeper understanding of the user's perception of the current site's initial impact, graphic design, usability, and mobile experience.
4 participants were invited to navigate the website freely while vocalising their thoughts. Post-exploration interviews were conducted, providing valuable insights that guided the website improvement process.
First Impression
The design appears unskilled and amateurish. It's unclear at first glance what the site's purpose is and where to navigate next.
"Where am I? All I see are black boxes... Oh, is this a music site?"
Graphic Design
The website employs grids but lacks adequate white space, leading to dense information per page. The font choice, Roboto, ensures high readability, and the colour scheme is both simple and refreshing.
"The layout is quite uncomfortable. However, I do appreciate the bold use of green in the design."
Website Usability
The information architecture and navigation do not align with users' mental models. Repetitive menus add confusion.
"Why does the menu display the same content as the homepage? What do these terms even mean?"
Mobile Experience
The layout has been rearranged, with less information on each page, making it more readable.
"The mobile version actually provides a better experience! The text is large enough to read!"
Redesign
Sketch
UI Elements
Colour Palette
Gunmetal
#28363D
Steel Teal
#6D9197
Spanish Grey
#9B9B9B
Royal Blue
#0069FF
Russian Green
#658B6F
Typography
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Impact
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Leelawadee UI
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
0123456789
!@#$%^&*()
Leelawadee UI / 50pt / Bold
Article Title
Leelawadee UI / 25pt / Regular
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.
Button
Input Form
Implement
Homepage
Products Listing
Product Details
Checkout
Checkout Information
Contact
Support
About Us
Reflection
This project compelled me to acquire proficiency in UI prototyping software (Adobe XD) and new coding skills (HTML/CSS/JavaScript) within a short timeframe. While my redesign represents an enhancement over the initial site, the primary focus was on acquiring new skills. Consequently, user experience research, evaluation, and iteration took a back seat.
However, this project provided valuable learning experiences. I had limited exposure to Adobe XD initially, but by the project's end, I felt confident in my ability to use it proficiently. This motivated me to further enhance my skills. Additionally, I learned how to apply visual design elements to graphical user interfaces and gained fundamental knowledge of HTML, CSS, and JavaScript, enhancing my understanding of front-end development.
Although there is room for improvement in this redesign, the project significantly enriched my knowledge and provided a clearer insight into user interface development.