House Poor Store (HPS) is a Direct to Consumer e-commerce website that features thousands of products. The company had no website or style guide but I was given a logo and the rest was up to me. My role was to ideate concepts, wireframes, take and implement client feedback, and deliver the final design.
Create an easy to use e-commerce website allowing shoppers to find, discover, and buy new good looking furniture. Also, make HPS feel more personal and stand out from their competition.
The site is owned by interior designer Monica Wilcox whose vision is to provide great-looking interiors at an affordable price. With so many competitors in this space, we wanted to create a unique approach for this online e-commerce solution.
Originally the idea was to have a budget tracker so a user can set their budget and start shopping. I explored wireframes and user flows of how all of that could work. We quickly realized all users would be approaching the site with different goals and the budget tracker might not be used as often or forgotten about so we change our approach. We introduced a mascot, the designer purse, to help guide users to various products from new collections to entire room packages. We also animated that mascot, which you can see at the very end. The wireframes were still valuable as it helped structure other pages.
Old wireframes exploring the budget tracker
With no style guide or branding established I was able to bring in a contemporary serif for headlines to bring a sense of luxury while pairing that with a modern sans to help build hierarchy and contrast. The site itself is super simple with an easy-to-navigate product index and detail pages. I created a component library making each page easy to build and consistent for usability. The deep purple invoked luxury while the black type kept the site readable on every device.
The cart is defined by the whitespace around the mascot is always in view on larger devices. Once a user adds a product to their cart the mascot changes and shows a new animation allowing users to explore more products that pair with their recent cart addition. This allows for more discoverability while keeping users engaged and rewarded based on their selection.
Product Index page with additional filters.
Product detail page with the updated mascot with link to shop rugs.
Showing how a user might navigate from product index to finding a specific product.
Hot spots to highlight the exact product the user is looking for.
Due to the complexity of the Information Architecture the menu needed to be intuitive on every device. The full-width menu allowed the user to find and discover categories without an overwhelming wall of links. The image can be swapped out to highlight new collections or seasonal items. For mobile users, all unnecessary images are hidden and each level is separated into their own screens to make sure the user knows where they are at all times. Below are both desktop and mobile navigations leading to the same set of links.
Desktop navigation allows users to drill down categories easily.
Mobile navigation.
No out-of-the-box templates or UI kits were used during this phase. The checkout experience follows pre-established user flows and was completely designed by myself. This comes complete with a shipping selection and confirmation page once the order has been placed.
Additionally, this gives the user the ability to create an account with HPS to save their favorite items, download receipts, and manage their account information. Users can access these pages under the "My Account" within the main navigation.
Custom design and built checkout experience.
The last piece and probably the most enjoyable was creating custom animations for the mascot below. We're currently working to rebrand the mascot to feel more luxurious. You would see the animation below once the site has been loaded and occasionally after. There are a total of eight variations each featuring different expressions and animated effects. The idea was to keep it super subtle without causing too many distractions for the users.
.svg)
Animation example of future mascots for HPS.
This was a large project with what seems like an easy goal to allow customers to find good-looking furniture to fill their house. I believe that goal has been achieved by creating a simple navigation and lots of opportunities for users to discover new products. The addition of the mascot will help differentiate HPS from their competition by creating an element of fun. The site will launch in Fall 2021 and the outcome will be verified with lots of happy customers.
Currently, the one thing I would improve is looking at a user’s objectives depending on what type of device they're using. The site that's being built now accounts for a seamless experience but doesn't go a step further to anticipate what a user could be looking for. For example, users on phones or tablets may have different objectives rather than desktop users. The UI is flexible enough to account for that so armed with data that could be a really interesting idea to explore.
