From colourful beads to an immersive experience.
The client requested a beautifully crafted eCommerce store that would reflect the playful elegance of their nautically themed jewellery collections - with emphasis on pure simplicity, and ultimately personal expression. The product needed to tell the story. The task was to create an immersive experience for both desktop and mobile - and connect the digital dots.
The client's digital debut was a stunning eCommerce site bringing their products and philosophy to life. The brand was positioned with its core audience in mind. I applied a seamless blend of content and eCommerce UX best practices to create a frictionless and delightful customer experience — promoting brand awareness and product exploration.
It was absolutely crucial that the spirit of the eCommerce site would correspond to the core brand values — simple, effortless, understated nautical chic. Much like the product collections themselves, the site would need to exhibit seamless execution.
This project included: Research, Competitive Analysis, User Personas, Journey Mapping, Affinity Mapping, Card Sorting, Tree Testing, Wireframing, User Interface Design, Usability Testing, Design System, Branding and Digital Marketing
Make it stand out.
I collected assets and materials intended to communicate the style, voice, direction, and ‘language’ of the design, brand, and project. This helped to interpret the client’s ‘design language’ – and emotion. What will users feel when they buy the product?
Each eCommerce shopper is unique. Different types of shoppers rely on different elements of the site. As part of my research into eCommerce shopping and behavioural patterns, I discovered several types of shoppers:
Product-Focused Shoppers
Product-focused shoppers who seem to know exactly what they want. This group of users appeared to be very goal-oriented, they want to locate the product, confirm it is the right one, and buy it. This user type requires descriptive names and clear product images, a search functionality that allows them to quickly locate a product, a clearly and logical menu navigation and a streamlined checkout.
Research-Shoppers
The user group that kind of sits in between the former two groups are researchers. Similar to product-focused shoppers they tend to be quite goal driven. The end-goal is to convert researchers into buyers. I identified that trust was the driving incentive to make a purchase. In order to convey this feeling of trust and reassurance, I had to provide detailed product descriptions, user reviews, return policies, easy-to-edit shopping carts that retain products between visits, trusted payment options, help & support, and clear navigation. I had to find the right balance not to offer too much detail upfront that might scare the product-focused shoppers or browsers away.. — that was a challenge in itself.
Browser-Shoppers
On the other end of the spectrum, I defined a user category which I refer to as browsers - often browsing for inspiration - and the opportunity to turn browsers into shoppers is great! However, their shopping experience revolves around different criteria and areas of interest such as new/latest items, the latest deals/what’s on sale, what other people are buying/what’s popular. To keep this user group engaged, I had to consider elements such as related items, suggested products and popular products to help them navigate the site; but also provide the ability to share information about products they love.
One-Off Shoppers
Finally, I discovered another group of users, one-off shoppers. They may never return to visit the site after their purchase; they are visiting one-time only because of a certain need maybe. I had to provide clear product descriptions to help them determine which item best fits their needs. One-off shoppers have no interest in having to register to purchase either.
User Persona
Based on my research and insights into eCommerce shoppers, I defined a persona as one of the first outputs from the research and analysis phase. The user persona provided rich insight into the mind of the representative customer; helped envision the product from the persona’s perspective; and added a layer of empathy and realism when I explored needs and goals.
User Journey and Experience Map
I set out to understand the essence of the end-to-end experience from the user’s perspective. The goal was to visually outline points of contact, interaction and channels; influences that might alter the customer experience and “Moments of truth” – the positive interactions that create good feelings in customers that can be used at touchpoints where frustrations exist.
UX Wireframes
I applied user stories to summarise the needs of the users. Once the tasks were defined, I started the process of prioritisation. I used the Kano Model to achieve this. Then I turned these stories into tasks I needed to accomplish to develop the user flows and create page wireframes.
Before jumping to the screen design, I created the overarching structure and relationship between all areas and pages of the store. I created a structured sitemap and information architecture (IA) outlining interdependencies and user flows to ensure a frictionless user journey and delightful experience. I then started my wireframing with a micro-frame … leading to low and high fidelity wireframes and prototypes. My initial research gave the clues what information was required to make an informed purchase decision.
The Checkout
I applied The Fogg Behaviour Model (high motivation, easy to do, a trigger in place) to the eCommerce checkout: Behaviour = Motivation x Ability x Trigger
The payment stage needed to create a trusted environment. Once users start filling out shipping information, they become the victims of the psychological principle of commitment. I had to make the process of information entering easy and fast - and above all, eliminate any user friction as part of this crucial step.
User Interface Design
In designing the user interface (UI), I applied the laws of simplicity... Clean, intuitive and limited. It’s an ode to Hick’s law. I kept any options including buttons, images to a minimum - removing unnecessary choices.
The UI set the solid ground for the desirability of the interface and positive emotional feedback from the buyer. I had to create a stylistic concept which would support mental models (a user’s underlying expectations about how something should work) — whilst taking into consideration choice of colours that correspond to the brand image and strengthen emotional feedback, visual hierarchy which makes the core zones of interaction instantly noticeable - ultimately creating aesthetic satisfaction to support a positive user experience.
Creating the App
From the paper prototypes, I moved on to digitising the wireframes in Sketch and adapting the changes from the usability test. I then developed the high-fidelity version of the prototype for the app using Invision. - this allowed me to gather feedback and move project forward at pace. I set out to create a seamless and immersive shopping experience. I used Hotjar to understand user behaviour and uncover insights, and make the right changes.
Social Elements and User Generated Content
Social interaction played an important role at Vintage Vanilla and encouraged customers to share their experience with the products across social media. Additionally, using the concept of pop-up stores allowed their customers to walk into a ‘physical space’ and fully experience the brand with all their senses in a truly immersive setting. In addition to selling their products online, the pop-up store offered educational learnings about ocean cleanups and coastal living - in line with Vintage Vanilla’s concept around costal design.
According to Nielsen 92% of consumers trust “earned media” - which is their friends and family. The social touchpoints gave customers a haptic impression of the brand and built an emotional experience. User generated content (UGC) was published in the lookbook on the website in the form of pictures shared on social channels, reviews, tweets, blog posts, etc. This customer content amplified the things that customers are saying to create brand awareness, instead of the brand promoting itself. UGC was a huge success. The content was notably raw with a very authentic feel — real people, in the world, taking pictures of the products and sharing these with their friends.
The challenge
A good e-commerce user experience is crucial to all shopper types, but different elements take on significance based on the shopper's goal. The challenge is to design with the various user types in mind in order to optimise the end-to-end shopping experience.
Key takeaways
Working on this project I had to consider a multitude of aspects: operational simplicity, the effective use of visual elements, the tone & voice of the brand, creating user interface design that supports the products - not overshadowing them — whilst always considering the entire customer experience across all touchpoints.