Recently, Expose Media joined the web development big kids table when we signed up for the wildebeest of a site that is Pennywise.
Originally a collection of brick and mortar stores with a little web presence but nothing to write home about, PW approached us a couple of months ago to expand their catalogue to the interwebs and help more people save dosh and shop sustainably. It was a no brainer for us - of course we were in.
So, the design process began. To kick things off, we entrenched ourselves in the client’s mission and ethos to drum out these guidelines for how we would conduct the design:
3 main tenants:
- Help people get to where they need to be with as little resistance as possible
- Create a visual experience of hope, excitement and sustainability to promote second hand shopping and saving
- Design something that looks just as good when it’s selling an old lawn mower as it does a diamond ring
With that in mind, the team began the competitor research. We looked to sites already doing it well to pick up tricks on how we could create navigation so seamless that customers wouldn’t even need to think about it.
Our biggest takeaways from this process were that clear, easy navigation was paramount for such a vast catalog. The first step was to implement a search in the main banner so when people landed on the site, they have the option to go exactly where they need to from the get-go.
We made a mega menu to put all others to shame and then to make it even more clear cut (what can we say, we’re overachievers) we made a separate menu for all the non-shopping navigation. That way, people who knew exactly what they were shopping for wouldn’t have to even think about our T&Cs and people who weren’t ready to shop but were curious about who we are as a brand could access the Purpose, Blog, FAQs etc without getting overwhelmed by all the departments.
Mega menu by department
And then, to show off the impressive range of brands offered and subtly boost that perceived value in the customer’s minds, we added a third menu (remember - overachievers!).
Mega menu by brand
The next level was to optimise the navigation of the catalogue itself. To do that, we factored in 4 key features, all with the intent to help customers shop according to what feels natural and easy for them:
- The ability to sort by whatever criteria they choose
- The option to view things in a list or grid depending on the amount of information they want to scan over in their search.
- A breadcrumb to show users how they got to where they are and give them the option to go back a step (universal across the site)
- The refine options down the side that differ depending on each department to help customers find that perfect item in no time.
With thinking like this, optimising the rest of the site to guide users on their journey seamlessly was easy, and we’re pleased as punch with the flexibility of the end result.
The next major part of the process was the design itself. In creating the aesthetic, we focused on making it breathable, simple and fun. As a result, the site has plenty of space, soft fonts, vibrant colours and exciting lifestyle imagery to help create that unshakeable feeling of second hand goodness. To bolster this further, all the elements, buttons and icons were designed with soft edges and simple features to further the feeling of ease we were aiming to create in the site.
The last challenge in the design process was the product page. How, in one page, could we create a template that would sell people:
a) on second hand goods as opposed to nipping out to K-Mart for whatever they need,
b) create a framework that would be as applicable for a swing set as it would a Macbook Pro, and
c) look every bit as professional, fresh and trustworthy as established sites that we’re trying to compete with.
To adhere to these concerns, we highlighted the guarantees. Usually, product pages go hard with Afterpay and free shipping to alleviate the biggest concern the average shopper has (cash flow) but with second hand goods coming from a range of locations (some pick up only) that wasn’t an option. So we focused instead on what we could offer: really, really good quality, the piece of mind that comes with sustainable shopping, and the knowledge their purchase was protected under warranty.
This meant having all the key information readily accessible in the description and then driving home those USPs in a big green banner so that nobody could miss it. We also knew the value of letting customers get up close and personal with the product so they could overcome the barrier of buying a second hand good without seeing it first, so we made the product photo feature big and proud, with heaps of photos and the option to magnify them.
The next part was to iron out any kinks that the description didn’t cover. We overcame the issue of crowding the page with the use of an accordion menu, which allowed us to go into as much detail as was necessary without convoluting the design.
And then, because we really are suckers for good ease of access, we made it just a little more accessible again by providing some alternatives and a link back to the original search.
As the customers add to and browse their cart, they’re reminded of all the assurances available with the use of that familiar green and the USPs to alleviate any concerns they have during the process. This notion was reinforced by the lock icon on the payment button to assure users that it’s all above board and completely safe.
And that just about sums it up - combine the contents of this blog with way too many cups of coffee and dozens of meetings, and you’ve got yourself a mock for a site designed to stop eBay in its tracks. If reading any of this prompted a check-in with yourself about the user experience you’re creating, feel free to contact us for a complimentary, no commitment audit. We’ll give it a professional scan, have a chat with you about what we’d recommend in order to optimize it and where you go from there is completely up to you. We love a good opportunity to nerd out over UX!