Herman Miller
E-Commerce Site
Herman Miller is an American company that produces office furniture, equipment, and home furnishings. Originally, their products were available through dealers and retailers, but they didn’t have their website. They had a strong consumer base and wanted to make their products more available to people all around the world.
Our mission was to assist them in developing a user-friendly e-commerce online shopping mall. You can find inspiring home and office furniture here, whether you're in a physical store or shopping from the comfort of your own home. Working with a team, my responsibilities included designing the user interface, wireframes, mockups, and prototype, making modifications during the project, and communicating our design concept to the development team.
Herman Miller had a strong brand and vision for their product. We tried to align with their design tenets: human-centered, purposeful, beautiful & useful, spirited, etc. We aimed to design them a fully responsive website that represented all their values while providing their audience with a user-centric experience that in turn would help them convert better.
Mockups & Prototype
After the wireframe has been approved, we brought in the visual asset client provided, which includes the logo, images of products, fonts, color, etc. We built out a group of pages for their chair product, so they could use it as a sample for creating other products pages.
Add to Cart Feature
On the content page, we put the “add to cart” bar at a fixed position to give users the chance to add items at any point when scrolling.
Wireframe
The product manager of their team came to us with their draft ideas. We started from there to build the wireframe. The original version has undergone multiple rounds of modification to meet client needs. One of the biggest changes we made was to add a full list of product features like a slide bar on the content page, allowing customers to define their specific needs for each feature.
Sort By Feature
On the landing page, price, material filters have been added, meanwhile with a “sort by” function. To ensure users get as much information from the product grid on the landing page, we added price the color information under each product image.
Registration Page
An account management page was also created. This is for customers’ registration, sign-in, and order tracking. Users now can easily access all the products and select each feature they want, then put the product in the cart, and go to the shopping cart page to check out. Please check the video at the end of the page to see the final prototype we delivered.
Improvements & Learning
This was my first experience working on an e-commerce website. We met the deadline by delivering the product on time. Throughout the process, I improved my skills in XD by developing effects,
components, and adding new states to components. Looking back, however, there are still a few things that I believe could be improved:
1. On the landing page, I would add a colour filter.
2. I wouldn't write "Wishlist" in plain text; instead, I'd use an icon to represent it.
3. I would raise the perks by one level (12-Year Warranty, Free Standard Shipping, 30-Day No Hassle Return).
4. Aside from the quantity button, I would add "plus" and "minus" buttons.
5. I would make each product feature extendable so it doesn't take up as much space.
6. I would include a "Check out" button.