City beach
User experience design
User interface design
July 2017
While working at Type + Pixel City Beach approached us to reinvent their online user experience. My focus throughout the project was to create a human centred design with a seamless checkout experience on both mobile and desktop. The only thing that changed from my final design mockups was the shade of blue as City Beach decided to keep it closer to the blue they use in their brand. You can see the live website and experience it for yourself.
Launch Website
Challenge
Established in 1985 in Brisbane, City Beach has grown to become a part of many Australian's lives. From those humble beginnings until now, their commitment to build huge stores that are fun to visit has made City Beach stores a great place to hang out when you're shopping with your friends.
However as the years went by, the online user experience of City Beach’s eCommerce website was behind. The checkout and buying process needed a full user experience make over. As a brand with a strong grasp of who they are and what they stand for, our challenge was to simplify and clarify their brand platform, and to create an eCommerce experience. One that helps them express themselves in the right way, to the right people.
A better navigation
The before
The navigation was really crowded and confusing. It was lacking in structure and felt very overwhelming.
The after
I simplified the navigation, making it look more clean and manageable. The navigation items were broken down into 3 categories which open a big mega dropdown upon hover with sub options. The search is highlighted and beautifully animates out upon click. User options are represented as icons which open a dropdown upon hover.
A better product viewing experience
The before
The actual products were pushed way too far down the page and surrounded by clutter. The filtering was a bad user experience as it was far above the products being filtered and you had to click to reveal what you would like to filter.
The after
A drastic improvement in both user experience and design. The filtering and sorting process feels a lot easier and you can see what your options are. The products were moved to the top of the page so users did not have to scroll down to see what they came to the page for in the first place.
A better mobile experience
Before the design was completely unresponsive and checking out on mobile was like mission impossible. I designed the checkout experience exclusively for mobile as if it was a native application and checkout on mobile became an easy, smooth friendly experience. Certainly a mobile first, human centred design approach. After the launch of the new website sales dramatically increased. I especially enjoyed this part of the project
“To be a great designer, you need to look a little deeper into how people think and act.”
— Paul Boag
A better checkout experience
An ecommerce checkout page is the most important part of an online store. You cannot win sales and grow your business if you cannot get consumers to convert. The checkout process was broken down into easy progressive steps. When a checkout process becomes too difficult for a user, they start to question their decision. I’ve kept everything feeling manageable and easy. The clean design reinforces trust with the user. The user is always able to see what they are buying and the total cost, there is full transparency of information throughout the entire process.
