Checkout makeover for Fronda
E-commerce
UX Design
CRO
Usability
User flow
The Product:
Fronda is a company dedicated to the sale of outdoor and indoor plants, decorative items, and pet products. In 2021, they started a website redesign to increase online sales through their e-commerce platform. The project included a redesign of the branding, full website e-commerce, and communication channels such as their social media and blog.
Note: We worked under an already existing branding and UI Style
My role:
Sole Product Designer
Smooth buying process for
Fronda
Improving Fronda's Shopping Experience with a Checkout Redesign
The Challenge:
Fronda had an outdated e-commerce with low conversion and a hard-to-use interface. We the whole website providing a smooth shopping experience and improving conversion of the selling funnel.
We did not start from scratch, we had a brand redesign done by a graphic designer and a Hi-fidelity prototype for the home page. Our job was to finish the project integrating our decisions with the ones previously made.
The Solution
The solution we provided included the redesign of all user flows. From landing on the home page to the Product list, product page, cart and all checkout processes.
Each one of these pages involved different challenges and skills. However, for this case study, we will focus more on the checkout process, which was the biggest challenge. At the end of the case study, we will do a quick overview of other parts of the redesign.
Technologies:
Figma & FigJam
Limitations
Since the e-commerce was developed on Magento, we collaborated closely with front and back-end teams, to addapt to technical and layout limitations. Navigating the existing design framework, we integrated new elements seamlessly while respecting previous choices.
Our approach
Step 1: getting familiar with the product
While Fronda had solid research about their physical store customers, their online presence was still not strong enough . When we entered the project they already had most pages defined with mid-fidelity wireframes that only considered simple scenarios. Our job was to bring scalability and complete all possible scenarios, including special deliveries, cross-selling, and product variations.
Step 2: creating a Design system
Creating a scalable and responsive design system came next. Fronda had a visual design created in-house, but it prioritized graphic needs over UX/UI requirements. We conducted a UI audit to spot missing components and ensure accessibility. This stronger design system provided the foundation we needed for prototyping.
Step 3: back an forward prototype
The prototyping phase required extensive collaboration with developers and the e-commerce team to understand technical limitations. The wide variety of products presented multiple possible user scenarios, which we mapped through detailed flowcharts and alternative page views.
For this case study, we will focus on breaking down the last step: creating a high-fidelity that considered the most complex user scenarios to ensure consistency and scalability.
The prototype - checkout makeover
1 - Basket
Scalability & states
2 - Logg in
Multiple users typer
3 - Delivery
Pick up vs delivery
4 - Payment
Simple and secure
The Basket
Scalability and screen states
Like any major e-commerce platform, Fronda presented multiple challenges related to the wide number of possible scenarios we could have for each step.
We will start the analysis at the checkout process. This is a very delicate point in the conversion funnel, as the user is no longer exploring and discovering exciting products, but rather wants to complete the buying process in the most clear, simple, and fast way. However, our responsibility is to ensure that they understand every step and can make informed decisions. Our job is to make the information as clear as possible and guide the user through the next steps without losing them in the middle of the checkout due to friction at any point.
With the prototype, we explored every possible state of cards and sections to ensure scalability. By designing for the most complex scenarios, we ensured there were no loose threads.
The Logg in
Multiple users typer
At this point the user flows gets more complex, with many ramifications depending on the users decisions.
To align with developers we created a task flow to understand how the interface should change depending on the steps the user takes. It took multiple iterations to get to the final version.
The first thing user do is entering an email, depending if this email is recognized or not the interface would show a loggin or the possibility to continue as a guest or create an account.
Now the user can choose between picking up at a store or sending it home. Here comes the first big bifurcation in the user flow.
View full user flow
After the succesful loggin the user can fill up the rest of their data.
The Delivery
Pickup vs delivery
In the next step the user has to choose the delivery options. Depending if they chose the home delivery or the pick at the store they will have to choose delivery format or the store they want to pick up from. We had to include a scenario for high volume purchases, where there would be a warning about the extra delivery cost. This was an important detail to build the trust of the user and avoid the felling of hidden costs.
The Payment
Simple and secure payment
The last step before the thank you message is the payment method, users could choose from 3 payment methods and each one had specific data to fill.
The thank you page included a taylored message with the details of the purchase and would change depending if the user was already a member of the Fronda club lr not.
To sum up
The Fronda e-commerce redesign was a very big project that inlcuded many different parts. We found multiple challenges related to limitations of the Magento platform and had to come up with taylored solutions for the client needs. In this case study we did not cover other important parts of the re-design, likecreating a modular system for their Blog or redesigning product pages, home and user area.
Thank you for taking the time to get to know my work :)
Thanks for taking the time to read me
If you liked my work let’s chat
Website made by Maria Piquero in Framer and Figma