Swan Street Sales website
case study
Project Background
Swan Street Sales is a local furniture company that has been neatly nestled within the Richmond community in Melbourne. Their current website is kind of outdated and not visually appealing.
Project duration
March 2022– June 2022
tool
Adobe XD
Objectives and Goal
Redesign both mobile and desktop versions of the website and mainly focus on the homepage, product page, product listing page, shopping cart, and checkout page.
target audience
Swan Street Sales has been selling furniture at a competitive price to the local community for over 50 years and has approached their customers through traditional ways for a long time before shifting to online business. Therefore, it would imply that their target audience includes elders and middle-aged people. However, in order to expand the range of audience, it is necessary to integrate some elements to attract younger people around 20-30.
inspiration board
.jpg)
current site
Homepage
1
2
Product List
3
Product Details
4
Shopping Cart
5
Checkout
6
The observations made for the current site included pages not being intuitive, too much information to read through, no clear CTA buttons, images, texts on top of homepages are lack of consistency, and overuse of grids and outlines, which makes it hard for users to obtain the key information.
my process-sketches
my process-comparison
After exploring different design styles of homepage and product listing pages. I landed on versions 1,3 and 4-1 wireframe as shown above and version 2 below.
Version 1
In the design ver.1, I added more saturation to the brand color so that it looks less intense.
​
I also centralized all headings and introduced the style of pointing to the specific product as well as an asymmetrical grid of cards that I was inspired by the inspiration board.
​
The design uses Roboto as the only typeface. Chosen for its geometric sans-serif typeface to balance and soften the boxy style of the whole design.
Version 2
In the design ver.2, I used a carousel banner on top and a symmetrical grid of cards to present products in a consistent way.
​
The design used the New York typeface, which is easy to read, and reasonably modern with its own personality, to present the picture info and extinguish the category. And Monsterrat is used as the primary typeface, mainly because it is basically the one that can suit all and create trust. Both of these two typefaces are aligned with modern and clean.
​
Green, as a primary color, creates an atmosphere of cleanliness, freshness, and calmness, which perfectly aligns with the product's nature.
Version 3
In the design ver.3, more carousel designs were used to present multiple pieces of photos to occupy a single and converted space.
​
In terms of color choice, I tried to change the whole image from a cold color tone to a warm-natural tone. Beige color-often is used in interior design and it can accommodate a lot of other colors as well as make the design airy and spacious.
​
I also integrated the social media feed into the design as it meets the need of the modern site.
my process-user flow
After running the first usability test, I highlighted some areas in red that need to be improved later.
style guide
my process-key mobile hi-fi wireframes
Homepage
1
Product
Listing
%20ver2.png)
2
Product Details
3
Shopping
Cart
4
Checkout
5
Confirmation
6
my process-key desktop hi-fi wireframes
Full view of homepage
Web view of original homepage
Web view of new homepage
The issues circled in the original design have been solved in the new design.
​
1. Phone number has been moved to the “contact” button in the footer.
2. The extra line above the menu bar has been removed.
3. "Carpet.Rug.Vinyl" has been changed to "Carpet/Rug/Vinyl".
4. The drop-down menu has been well aligned to the left with bolding the selected item.
5. Login/wish list /cart has been changed to icons in order to keep the look clean.
6. Subscribe button has been moved to the footer with well aligning with other
elements.
mobile website prototype
reflection
The layout is simple but effective, there is a light green background color for the top notification, menu bar, and footer. The consistent color theme that matches the logo which looks professional, solves the previous issue that the original design failed to create a beautiful and concise interface and atmosphere.
​
Using New York and Montserrat typefaces to diversify the look of the website, can help drag users’ eye direction to where the company wants it to be.
​
Some alignment problems have been well solved in the new design.
​
However, the cart page could have been better improved by adding delivery/pick-up details and delivery calculations.
Overall, the new design helped the company change the image to a fresh look, but there are still some areas that need to be better refined.