The Swag AU is an Australian company focused on producing reusable grocery bags designed to increase the shelf life of fruits and veggies.
The end goal of this project was to help the CEO create a prototype of a microsite to educate her customers on the environmental and financial benefits of The SWAG bag.
I worked a UX/UI designer as part of a team with Harness Projects. I individually conducted the following:
user research, user interviews, prototyping (Adobe XD, Invision), sketching, research synthesis, usability testing, customer journey maps, personas, client presentation.
Duration: 8 Weeks.
"Vegetable prices may soar 50% as growers face perfect storm of bushfires and drought"
- ABC news
Understanding the problem
Customers can't see why they should buy The SWAG
The biggest burning question on the our plate was:
Why is The SWAG losing customers when the CEO has such a great product?
I dug deeper into this question by interviewing 14 customers to understand their needs and frustrations.
Research goals included:
Understanding how customers connect with The SWAG
Understanding how customers interact with the current website
Testing whether customers outside of the current target demographic are interested in The SWAG
We used the end-to-end design thinking process
“I can’t tell the size of the bag! How big is it? A4?”
- Frustrated interviewee describing the SWAG bag displayed on site
Customers don't want a product they don't understand
What did we find?
Why is it so hard to find out what you can store in the bag?
Customers liked the clean aesthetic and enviro-friendly feel of the website. However, their pain points were:
Lack of transparency broke brand trust. Customers couldn't find basic information such as what they can store in the bags.
The price point is too high. Customers couldn't connect with the financial and environmental benefits of the bag. They thought it was just a cotton bag.
Confusing website navigation. Customers found many pain points in the structure and layout of information. This caused great frustration for users.
Reframing the problem
“How might we create a single page microsite that increases understanding of The SWAG product for first time Australian customers?”
I am environmentally conscious and a proud supporter of sustainable and ethical brands.
I want to easily compare the differences between the bags so that I can make a purchase decision.
I am very busy person on a tight budget. I want to be more environmentally friendly but it's not convenient for me.
Help me understand why I should buy The SWAG. I don't want to go through a maze to get my answer.
Meet Clara and Odin
Looking at Clara and Odin's journey to buying a bag
The devil is in the detail. Explain features Clara will care about (e.g. SEDEX certification).
Clear pictures and descriptions. Help Clara compare size, dimension and storage options.
Free shipping. Increase the price of the product and offer free shipping. Once Clara understands the benefits of the product, she can easily justify a higher price point.
Bring Odin on a journey. Bring the story and mission of the brand to Odin. Show him why he should buy the bag early in his journey.
Genuine reviews. Create a more genuine looking review section (currently all 5 star ratings).
Transparency is key. Odin wants to know about additional fees (e.g. shipping and tax fees) early. Not when he's about to purchase the bag.
Putting ideas down on paper
I brainstormed ideas to incorporate into the design of a microsite. I used the 'Kano model,' and 'Bang vs Buck,' matrix to help me prioritise these ideas. Competitor research helped inspire and provide a best-in-class example of how each idea could be executed in my final design.
Going from pen to pixels
I started sketching my ideas. Initial screens included:
Landing screen clearly describing hero product with call out to mission of the brand.
Screens highlighting the features and technology behind the bag, including how to look after the bag.
Screen where users can compare products across size, price, ratings and what they can store.
Final purchase screen where customers can buy additional accessories or bundled products.
Product review screen.
Screen to showcase the social mission of The SWAG and encourage re-purchase.
Guerilla testing with 2 users helped me with key design changes, including:
Remove the option to purchase accessories and bundles. This complicated the flow.
Remove buttons encouraging users to leave the site. This drew customers away from the conversion funnel.
Offer free shipping with increased product price. This will test how important these factors are in purchasing the bag.
Helping The SWAG shine
After many iterations, I created a high-fidelity version of the site. I used a fluid design paradigm to encourage customers to scroll vertically down the page and motivate them to stay in the conversion funnel.
I tested my final design with 4 users. I purposely used a mix of users who had and had not heard about The SWAG before. This was to uncover differences in pricing perceptions towards the bag.
Home landing page
Users connected with the brand. The animated statistic and a clear image of the hero product helped users understand the mission and purpose behind The SWAG.
Explaining features of the bag
Transparency was key. Clear and simple explanations helped users understand the benefits of the bag features.
Reduced cognitive load. Users appreciated the mouse roll over animation to break up information about the bag features.
Explaning benefits of the bag
Facts increased legitimacy. Users trusted the benefits of the bag when it was supported by facts.
Fact verification button needed. Users wanted a fact checker via a third party site.
Increased prices didn't affect purchasing decision. Users may accept a higher price point because they understand the benefits of the bag.
Free shipping is still a motivator. Users did not pick up this feature during testing but indicated this is a strong motivator for purchase in follow up questions.
Visual cues for bags
Clear visual description ease decision making. Simple features such as dimensions, storage capacity and storage descriptions helped users easily compare and purchase a bag.
Reinforcing the mission
Users enjoyed feeling good about their purchase. Reinforcing the mission of the product and the impact of purchasing a bag attracts repeat customers.
Next steps and outcomes
Simplicity and transparency go a long way. The site can incorporate interactive features, plain language and visual cues to help users easily compare products and make a purchase decision.
Fluid paradigm reduces navigation friction. The click rate to purchase was halved compared to the original website. Consideration of a vertical scroll design to explain features and benefits of the bag.
Dig deeper into shipping and price perceptions. A/B testing of shipping and increased price points to reveal opportunities to increase revenue generation.
Although the client didn't end up developing a microsite, she did take on some of my recommendations including: displaying dimensions next to The SWAG bags and adding descriptors of what the bag can hold to help users visualise a use-case for the product.