Quick Intro & Result
Do you remember Chia Pets-the quirky, little terra cotta planters from the late 70’s and 80’s? They wanted a website that was both fun and engaging for kids today and nostalgic for their parents.
I was the UX strategist on the project and designed the eCommerce experience, something a little different for me. On top of that, I joined the design team in learning a new program (Rive) to create illustrations and animations. The result was a visually enjoyable website with a painless checkout.
Note: This project was a great experience as I was able to work closely with the design team and push for a good user experience within the graphics. It was a chance to design for delight!
-
As a UX designer there is a need to find a better way of doing things. It has a conceptual element. For years I found a similar challenge and reward as an illustrator. For this project, I got to do both. This team and client were so much fun.
Somehow, we got the greenlight to rig and animate the characters for the site! Working through this as a team was a great experience.
-
Having left many items, in many carts, on many websites, I was aware of the need for a frictionless checkout process.
Actions:
• Added elbow room to required fields and eliminated those that were unnecessary.
• Grouped related fields and added them to accordions, thus reducing process length and minimizing hassle.
• Moved the review screen into a parallel column, saving even more scroll room.
In the end, I couldn’t be happier with the design team’s results!
-
Without the resources to run official usability tests, I needed to observe my team’s responses and pay attention to their comments as we reviewed the wireframe designs.
I am not a filter expert, but I know that it’s important for the flow to make sense to people regularly purchasing items online.
Ultimately, we landed on a very simple radio-button-style filter.
My Role
As the UX strategist, I ask questions, create a sitemaps/ information architectures, and construct wireframes used by the design and development teams to meet project goals. These result in a clickable Figma prototype for desktop and mobile that are shared with the client for feedback and approval.
Note: I work with an amazing team. My contributions live between the brand and design folks, in a waterfall methodology. I also communicate with the development team, especially when crafting filters :) I did not create these websites, but I helped make them more usable.
Chia Pet’s website needs and my approach:
When designing the Product and Checkout pages for this website I had to think differently. Chia Pets are a charming impulse buy, not a necessity or a large financial commitment. A small amount of friction could cause a customer to abandon the site before completing their purchase. The Product categories, Product pages, and Checkout flow needed to be super easy.
Client Needs
My Approach
Client Needs
My Approach
Client Needs
My Approach
Initially, I wanted a form with minimal fields per page, so as to not overwhelm customers. However, the client wanted a single page.
Through my research, I found arguments for both types of designs. Ultimately I created an efficient, single page Checkout that the client was happy with.
Large fields and chunked information within accordions resulted in a streamlined, unthreatening checkout.
1- A fun website.
Measuring: This wasn’t something I put into a spreadsheet or chart, but I paid attention to people’s faces when they saw the website and it’s elements. When smiles and laughter were consistently noted, we were on the right track!
A major worry of mine was that this website would be fun to look at, but difficult to use.
To combat this, I pushed for familiar language and obvious elements (such as CTAs) that had fun qualities, but were hierarchically logical and ultimately usable.
2- A single page Checkout.
Measuring: I have no numbers from the client on checkout rates for the new website, but would love to compare them with previous cart-abandonment rates. This combined with Heat Mapping could help to optimize the checkout process.
The category filter allowed an opportunity to collaborate with the development team for improvements.
We created a simple radio-button filter that defaulted to all categories and narrowed with inputs. It works great!
3- Easily searchable categories.
Measuring: Due to constraints, no testing was done. However, asking participants to purchase a specific product from the website and then watching them make the attempt, noting any friction, would have been helpful.