top of page
JoZhou :
Role:
Content design, Prototyping, Producing style guide, Coding
Duration:
2020 Dec - Nov, 3 weeks
Team:
Amy Guo, Hannah Lenh, Jo Zhou
Tool:
Figma, GitKaren, Html5, CSS3, Javascript
Design overview :
This website is the official sales website of a record/album company. The company sells records and albums including CDs and vinyls, and offers online shopping and delivery services. The main potential customers of this company are music lovers, including fans of singers or idols and vinyl collectors. The company aims to provide consumers with the most complete selection of goods and satisfy their demand for music as much as possible.
Process Analysis:
Basic Branding Ideas
At the beginning of this project, I first needed to understand the stakeholder of our design project and its users. So we conducted research to summarize and analyze some album vending stores and finally determined the uniqueness of Gamut Record's service and what their corresponding users would want. As shown in the image, the company sells records and albums including CDs and pieces of vinyl and offers online shopping and delivery services. The main potential customers of this company are music lovers, including fans of singers or idols and vinyl collectors. The company aims to provide consumers with the most complete selection of goods and satisfy their demand for music as much as possible.
Illustrate Layout
Based on the image of the brand and the younger user group, I drew a mock-up for the site using ai as shown below. Using wireframe mockups to create a basic layout for each page, which is helpful in generating the overall concept of the whole website in a simple and easy-to-change way. It also allows the specific functions that need to be designed later to be organized and grouped together. Mock-ups have low fidelity and therefore require a low cost of time investment, which makes it easier to give feedback and make changes.
Style Guide
Since this was a group project, we created a style guide with code (HTML5, CSS3 and Javascript) through GitKaren. As shown below, a style guide can set the color scheme and all the element styles for creating this web in the future. It also helps showcase the style of the brand and ensures that multiple contributors work in a cohesive way to keep the brand consistent. During the developing process, I keep updating the style guide in order to keep everyone on the same track. While picking the color I decide to use color that has high contrast. High contrast color can increase the text readability that services for accessibility.
Create Web Page
After confirming the functionality and visual effect of the web page, I started to build this actual website with text and images using code. As shown in Figure 4, when I tried to use it after the first draft was completed, I found that many details related to user experience were not well thought out. For example, on the home page, we found it contain too many texts and did not show the hierarchy of the content; The product list only has one button to add items to the shopping cart, but missing a fast pass. checkout; the checkout page seems messy and hard to read. However, most of these issues will only become apparent after test use, so don't be afraid to produce a planned piece and improve it with feedback.
Finalize Web Page
Finally, I polished the site by making changes based on the deficiencies I found before. As shown below, I add more images to balance the content and use icons to help users understand; I add a button to provide users with a shortcut, increase users’ freedom of interaction; and reorganize the checkout page for an easier reading layout. At the same time, adjusted the responsive settings so that the site can be effectively displayed and used on different devices as well as screen sizes.
Reflection:
CHALLENGE & SOLUTION
During the process, I found it challenging to make elements such as buttons and font sizes look pleasant and harmonious on screens of different devices. Therefore, I find the best way to design a responsive web page is to modularize it. Just as a chemical substance can be broken down into atoms, a web page can be broken down into HTML elements. These elements can be combined to create different web pages, and these basic atoms are the building blocks of the design system. Defining the design style, and method of use for each of the base atoms allows it to be a sample. And these elements will appear on the page more than once, so we can keep the overall look consistent with the reuse of these elements.
Functional and Responsive Design
When creating a website, it is important that it has an attractive look and feel, but it is also important that it is functional and adaptable to various operating systems. It is essential to create a universal and responsive design that takes into the diversity of users and their different needs. In another word, we have to provide a website that can respond and function on all different platforms.
bottom of page