A redesign of East Austin Succulents: How funky can I go?
Will I funk myself over?
Role: Sole UX /UI Designer
Tools used: Figma, Zoom, Kap
Timeline: Two- week sprint
Recently I was tasked with redesigning an e-commerce website for one of my favorite plant shops in Austin, TX. East Austin Succulents is Austin’s weirdest cactus and succulent nursery, maybe even the weirdest in the state of Texas. Their vast inventory of truly strange and rare plants already sets them apart from most plant shops.
The challenge here was to streamline the purchasing process from start to finish to increase completed purchases, and incorporate more of the brand’s quirky 1970s vibe into the website. Enter the, “how funky can I go?” question.
This project was given as an academic exercise for General Assembly.
Competitive Analysis
I started by researching what similar companies are doing on their e-commerce websites that lead to their successes.
I looked at 3 different competitors of EAS, all companies that sell plants online in slightly different fashions. This helped me begin to understand why East Austin Succulents’ current website is not bringing in as much sales or even getting as much traffic as they could. With the addition of a few features they are missing, they would already equal the playing field of their competitors.
Affinity Mapping
I wanted to push EAS even further, so I interviewed 4 people that love and own plants. Understanding the needs of the potential customers of this rad business is essential for this redesign. I also had one user navigate the current site so she could give me her own feedback on the layout and process.
The interviews supplied me with major insights:
- Plants are personal
- A variety of inventory is important
- Users want a website that is easy to navigate and efficient.
Persona
The insights from user research became the persona, Violet Vines, our hard working small business owner who wants to support other small businesses but she cannot stand when websites make it so hard to purchase items.
How might we help Violet?
How might we make it easier and faster for Violet to purchase items? What can we change in the current site to reduce the steps it takes to make a purchase and make the experience more intuitive?
To answer these questions, I did a card sorting activity to see how customers would organize the inventory. They organized the website in a much simpler way than its current state. Simple categories like ‘succulents’ and ‘cacti’ were really all they needed. Through the competitive analysis and the results of the card sorting, I made the decision to simplify the global navigation into fewer categories.
User Flow
Another way I discovered to help Violet shop faster: cut out the extra clicks. East Austin Succulents’ current website first brings you to a home page with no information about an online store…until you click a hamburger menu and only there is where you can click ‘shop’. This takes you to another website where their shop lives.
One of my interviewees said, “it is like they are making it harder for me to shop.”
The new user flow below depicts an easier path for Violet.
Sketching
I sketched out my initial ideas to show all the possible solutions to these issues.
I started with a simple landing page that immediately shows the user inventory to encourage them to jump right into the purchasing process. I added a plant care section because several of my users expressed that plant care is important to them and it is imperative that it is accessed easily.
I decided to use this layout as a template for my product grids for all the different categories. I scaled down the pictures from the current grid to increase the padding between items. Now with smaller pictures, I could include product details and not overwhelm the user with big pictures. Currently, the pictures are large and you only see minimal details when you hover over an item.
Wire-framing
Once I sketched out each screen, I moved to wire-framing them using Figma. Since plant care was a priority to my users, I added icons to each plant indicating their sunlight and watering needs.
I focused on showcasing the plants as well as keeping the user flow smooth, no left turns for Violet Vines! I added a shopping bag that appears once you add something to it, and I incorporated a “don’t forget me” section.
Now it was time to test these wireframes in action. I wanted to confirm that users can easily find plants and purchase them in medium fidelity.
Usability Testing
I tasked the users with the following:
- Can you find cacti on the website?
- Can you purchase a plant?
- What would you do if you wanted to search for something specific?
- How would you filter these products?
User testing has brought a few things to my attention, nothing major with the information architecture or check out process.
One out of four users thought the search function could be made more apparent by making it an actual text bar in the global navigation instead of an icon. The other three users all really liked the search function, found it easily and enjoyed the animation. I think it should be kept the same and then tested again in high fidelity to confirm if most users still respond well.
The majority of users wanted to add just a few more filters, to organize product pages by how much water a plant would need.
I implemented more filters and moved the position of the sun and water icons in my high fidelity design.
High Fidelity Design
I wanted to balance an easily navigated site with a decent taste of funk. The shop is memorable, let’s make the website memorable too all while keeping in mind the main goals of simplified usability.
I utilized inspiration based off of their current logo, pictures of their plants and 1970s/80s illustrations.
Their current site definitely accentuates the plants, they already have beautiful pictures of their inventory. I needed to put these plants into a virtual place that feels like Austin’s weirdest cactus and succulent shop. But again, I did not want to funk myself over.
Below is where I changed the new homepage to one step instead of three, and added in some new design elements to create fluidity of the brand.
And here you can see a video of the streamlined check out process:
What’s next?
- Definitely another round of usability testing in high fidelity, especially the “don’t forget me” section in the shopping bag.
- Designing the Plant Care and FAQs screens.
- Taking the visual design even further towards 1970s retro and funk.
- Buying more cool plants.
This project was so fun and fulfilling. I would love to collaborate with other designers to hear their input and strategies on melding more of the branding into the site without interrupting the user experience.
