TOWN

Website Redesign

Improving the user experience of an e-commerce website

A mockup of the TOWN website shown on Macbook

TOWN is an independent gift shop in Toronto. They offer unique cards and various gifts. As a store customer, I wanted to work on their website to make it more accessible and user-friendly. For this project, I focused mainly on the landing and product page.

Project Type

Personal Project

Tools Used

Photoshop

Milanote

Skills Used

Target audience, design audit, type trial, mood board, accessibility, user experience, user interface, web design, style tile, wireframe, mockup

🔎 Design Audit

I conducted a markup design audit to identify the exact problem areas that the website had.

📝 Problem

The existing website had accessibility and navigation issues such as insufficient colour contrast and confusing button placement. Not only that it could affect customer satisfaction, but it would also affect SEO. Additionally, I found that the same typeface was used for the logo and the website’s body text. To make the logo stand out, the typography needed adjustments.

💡 Design Solutions

I started the design process with a type trial to determine the typeface that would be used for the website. I chose a pair that was easy to read and went well with the logo. I also added a few colours after creating a mood board based on the existing colours to ensure the colour contrast between the text and background colour. The style guide included the colour palette, typography, icons, and button elements to maintain a cohesive design throughout the project.

✏️ Wireframe

Landing Page

The announcement bar at the very top previously had a login/sign-in, cart, and search button. I separated the elements from the bar and included them in the top menu. I also made the newsletter form full-width and placed it right after the store info to increase the engagement rate.

Product Page

I ensured the element hierarchy was maintained. For example, I used the primary colour for the “Add to Cart” and the cart button to make them distinguishable in the composite. To reduce the cognitive strain on users, I switched the quantity field to an easy-to-control quantity input button.

Checkout Page

A less important element the “update cart” button has been removed from the bottom and placed next to “Your Cart” to make the transaction smooth and less confusing for users.