Aikrochet Designs
Website Redesign
Overview:
I audited and redesigned the Aikrochet e-commerce web and mobile site.
Aikrochet is a local Seattle small business that wanted to rebrand and pivot the direction of the business. Aikrochet puts an emphasis on Japanese Design in handmade items and wanted to incorporate that aspect of the business into the design of the website.
For this project, I audited the current site and conducted analysis on similar sites. Based on that, I redesigned the site. I continue to manage and maintain the site.
Business Goals:
With COVID-19 cancelling many in-person selling opportunities, many small businesses have taken to selling handcrafted items online. This is the same for Aikrochet.
With the redesign, the site will help drive customers to shop and create a simple and easy experience for users.
The Problem:
The previous site didn’t align with the mission and branding of Aikrochet and provided and clunky and overwhelming experience for users.
The previous site was inconsistent, difficult to read, and unpolished. The home page didn’t draw users to shop and the information architecture made the experience more confusing.
Previous Home Page
The Solution:
To help mitigate these issues, I redesigned the branding, flow, and design of the site.
To better showcase the style of Aikrochet and to provide a more cohesive experience, I rebranded and redesigned the site.
Process:
Competitive Analysis
Brainstorm & Sketch
Design & Implement
Competitive Analysis
First, I took a look at other site and businesses that have similar values and that are similar sizes to Aikrochet. I analyzed the following:
From the analysis I compiled the following insights and recommendations:
Insights:
Clear direction and Calls to Action help funnel users towards the shop or new items.
Small, dense text is easy for users to skip.
Large images that take up the entire screen create an overwhelming experience and make it harder for users to view the hierarchy of the page.
Item listings or related items that are consistently sized make it easier for users to look through products and find the information they are looking for.
Clicking through product pages often creates friction for the user to the point that they may leave the site without looking through all products.
Recommendations:
Simplify screens to direct users to the products
Add spacing, bolded font, or lists to help break up text and make it easier to read
Incorporate smaller images or galleries to keep with the flow of the screen
Create consistent layout or blocks for items, and include flags to quickly show users important information
Include anchors for users to jump, and reduce clicks needed for the user to see products
Brainstorm and Sketch
Based on the insights gathered and recommendations made from the Competitive Analysis, I started assessing the user flow and sketching different options for the screens
User Flow
In the previous design, the hierarchy of the site was mostly flat, with a couple pages to click through in order to shop. These extra clicks added friction for the user to see the items available.
I also wanted to change the home page to more of a landing page to help funnel users to the information they visited the site for. This led to simplifying the home page
Original Flow
Redesigned Flow
Sketches
As I sketched possible designs, I wanted to reduce as much friction as possible by designing pages that would allow users to see the hierarchy and information available.
Home Page
Shop Page
Contact Page
Blog Page
About Page
Design and Implement
Based on these sketches and insights from the Competitive Analysis of other local Asian-Owned Small Businesses, I redesigned the screens of the Aikrochet Site to be simpler and more concise, and to be easily digestible by users. I also added a background depicting the traditional Japanese pattern of tortoise shells (hexagons) to better immerse visitors in the Japanese inspired designs.
Previous Home Page
Redesigned Home Page
Home Screen
One of the main changes to the home screen was removing sections. This was in order to funnel users toward the shop. The gallery of items highlights some of the work from Aikrochet, sparking users to shop.
Other changes include:
Simplifying the header and footer
Adding negative space
Reduce scrolling and clicks needed to navigate
Widening the amount of screen used to provide better visual balance
Previous About and Contact Page
Redesigned Aikrochet About Page
Redesigned Aikrochet Contact Page
Contact & About Pages
In the initial version, the contact and about pages were combined. This created a very dense page with small font, and may add to users’ confusion when navigating the site
In the redesigned version, I split the two screens. I also:
Added more images to break up the text
Broke up sections for clearer information hierarchy
Original Shop Home Page
Original Shop All Page
Shop Pages
In the original design, the user flow gave users the option of visiting the Shop Home page or the Shop All page.
The Shop Home page hosted only a gallery, with no interactive elements for the user, while requiring them to click to get to this page, then not adding value to their experience.
The new hierarchy is flat, allowing users to click once to see the items available to shop. There is a menu within the shop page for users to easily view all items, and then automatically scroll to the section they’re interested in.
In the original Shop All page - the grid consisted of four by two blocks - keeping the layout consistent. For the new page, I increased the columns to five so users could see more products without scrolling, and widened the margins to allow the images to be easily viewed.
In addition to the page changed, I revised the typography to a sans serif font to make it easier to read, and to create a cleaner experience.
Redesigned Aikroceht Shop Page