Back to Blog

A User Interface Design Project from Start to Finish: SpaceSavers.com

Author

Emily Dunkle, one of our talented UI web designers at Fresh Tilled Soil was assigned to revamp ClickStop’s sister company, Spacesavers.com. From start to finish, the entire design took just over two weeks, meaning Emily had to move quickly and efficiently to meet this deadline.

ClickStop had some concerns about their current website, including:

Look & Feel: The website wasn’t in-line with the company’s new rebranding strategy. The overall look wasn’t modern enough, the designs felt outdated and there was a lot of wasted space.

Search: There were two search features that mirrored each other on the same page, making the search redundant. It created wasted space, wasn’t necessary and confused online customers.

Filter & Sorting: The website wasn’t able to filter products by an specification or sort these product by customer needs (i.e: color, price, size, brand). With it’s large selection of products, this made it difficult to search for specific products.

Product Display: The product display was lacking highlight features and customer reviews that related to the products. Also visually there wasn’t enough emphasis on the product and pictures of that product.

Social Media: The social media and share icons were not prominent and didn’t elicit a strong enough call-to-action for click throughs. Facebook “like” button needed to be added.

Coupon: There was no featured coupon that would display the current deal of the day. More emphasis placed on sale items.

Emily was responsible for redesigning the layout for the following pages: homepage, about us (Informational) page, product category pages (both primary & sub-category pages) and product detail pages.

Check out the Spacesavers.com “Before” Homepage:

space savers before homepage

1| Kick-Off Call

Emily set-up an initial meeting with ClickStop to discuss the various ways that Fresh Tilled Soil could assist with their website re-design. Once Emily gained a clear understanding of the features/elements ClickStop wanted and gathered all the necessary requirements, she was able to get started on the wireframes.

2| Wireframing

Emily created wireframes as a visual guide to suggest the structure of the website. These wireframes gave Emily the general sense of the functionality and usability that individual pages would have. This simple wireframe was reviewed with the client and upon approval, Emily started to move onto the detailed mock-ups.

Hand-Sketched Wireframe:

space savers homepage sketch

Computer Wireframes:

space savers wireframe mock-ups

space spavers product wireframes

3| Mock-up

A website mock-up is similar to wireframing, but provides a much more detailed view as to what a website/web page will look like. This time Emily incorporated the actual company logo, images and respective colors into the user interface design mock ups, giving the client a much deeper appreciation of what the finished product will look like. After two revisions, the clients approved the designs, allowing Emily to start coding out the approved mock-up’s.

Check out some of the “before” pages and compare them to the “after” mock-up’s:

space savers about us wireframes

space savers prodcut wireframes

space savers detailed product image

4| Coding Mock-up’s

Emily spent time coding out the mock-ups, which gave the templates limited functionality. This is enough to get a feel for how the website will function and helps create a more streamline process when the templates are handed over to the development team at Spacesavers.com.

Check out the re-designed homepage:

space savers new homepage

Emily brought Spacesavers.com right up to speed by giving the site a modern feel and adding:

– a homepage tool tip with hover-over pop-up text blocks.
– animated scroll features for featured product categories.
– “narrow your results” feature based on product popularity and price.
– a show/hide filter and search feature.
– social media integration.

The new site doesn’t only look pretty, but is more functional, limiting the amount of wasted space. By adding in the sort features, it easier to define your search and quickly find the products you are looking for.  Social media integration will allow site visitors to easily share and save products they view/purchase on the site. All in all, the new design helps showcase the products and defines a better user experience.

Emily incorporated some great elements into this website re-design that specifically addressed the issues Click Stop was having with the current Space Savers website. The site isn’t live yet, but once it is, we’ll be sure to link directly to it, so you can see it for yourself… it’s a real beauty.

Author Tim Lupo

Tim has expertly managed over 40 projects with his fastidious attention to detail, inherent compassion, and unlimited energy. Tim holds an MBA in global business leadership and brings his entrepreneurial spirit to every project.

More posts from this author

How we work Process

Product Hero Talin Wadsworth