Study Case: SARA SUAZO
DRY FRUIT E-COMMERCE | FICTIONAL STUDY CASE | 2023
On this occasion, our project begins with the selection of an e-commerce to redesign its website/web app, and we had 3 weeks to develop it. To start, we gathered as a group (with Anna, Camila and Chiara) to discuss potential candidates that we had been investigating. Chiara suggested a website for nuts, food, and other products store named “Sara Suazo”, located in Santiago, Chile. Upon entering their e-commerce site, we believed that we could make a significant contribution in terms of UX/UI. And that’s how we embarked on the adventure of our second project for Ironhack.
EARLY INSIGHTS
Initially, we conducted secondary research to fully understand the products we were going to work with, local and international competitors.
And we ended up discovering a not insignificant fact about childhood obesity in Chile and how the country’s government is beginning to take measures to prevent it. This would imply an increase in sales of these types of products for snacks, as well as in stores located near schools, so that children have access to good food and stop consuming so much sugar.
An important piece of information to consider for the redesign is to provide families with access to online shopping and delivery of pre-made snack products for children.
Once informed, we created an interview for our stakeholder, in this case, the company owner, who kindly responded to us and assisted us whenever we had any doubts or felt it was necessary to consult with them again.
Qutoes from our interview
As we began this project with an already designed and functioning website, our initial step was to analyze it using Nielsen’s Heuristics. This analysis revealed consistent results with what we had previously observed:
Numerous errors in consistency and standards, as well as in aesthetics & minimal design.
The design appeared overloaded, with too many stimuli that distracted the user’s attention.
Synthesis of our heuristic analysis
To ensure the accuracy of our analysis, we conducted a usability test with a user who had never used the website before. The responses were similar, confirming that our analysis was on the right track.
We also analyzed the national market for direct competition and took a step further by examining some international e-commerce sites.
We obtained incredibly valuable information, identifying certain trends that our website lacked. The main realization was that the site wasn’t designed to be responsive. When accessed from a mobile device, it displayed numerous errors and didn’t adapt to screens. Furthermore, the layout lacked a professional appearance, and the overall look and feel seemed somewhat outdated and traditional compared to its competitors.
Visual comparison with its primary competitors
DEEPER INSIGHTS
Upon analyzing all this, we felt unsure of how to proceed. We didn’t feel the necessity to formulate a Problem Statement, yet we sensed a lack of information to move forward with the potential solutions we aimed to implement.
Therefore, we decided to create a user persona using the information we gathered from the usability test. This allowed us to understand not only whom we were designing for as a customer, but also who we needed to focus on — the actual user consuming the store’s products regularly. This user often requires product information that is sometimes hard to obtain on-site due to the nature of these stores, where many products are very similar yet possess significantly different qualities.
Our user persona
At that moment, by revisiting, iterating, seeking more information, and understanding precisely for whom we were designing, solutions began to emerge spontaneously.
We decided to focus on the most crucial aspects, which were:
- How might we showcase the nutritional values of each product?
- How might we showcase product categories in a simple and effective way?
- How might we showcase wellness information that demonstrates the benefits of products in everyday diets?
- How might we display and list all the products they offer in a more aesthetically pleasing manner?
PROPOSING DIFFERENT SOLUTIONS
Once we organized the information and had clear ideas about what we wanted to do, we decided to put our ideas on paper, resulting in some very interesting sketches.
We organized and transformed these sketches into Mid-fidelity wireframes, allowing us to start organizing the flow we needed to present and structuring what we wanted to showcase.
a sample of our wireframes
NEXT STAGES
After creating the flow, we conducted another series of usability tests, which provided marked results on certain aspects:
- On the home page, users navigate well but struggle with back options.
- Inconsistencies with logo navigation.
- Issues with redundant data entry and payment options.
- Need for better product organization.
Therefore, it was necessary to iterate again and address the problems found.
UI ELEMENTS
To continue our journey, we still needed to apply color and UI. For this, we reached out to our stakeholder again to inquire about the message they wanted to communicate when creating the website, whether that message still applied, and what they would like us to consider in creating the site’s look and feel.
They provided a list of words that we used to create individual mood boards and later shared: Trust, welcoming, genuine, real, friendly, familiar, warm. Something beautiful happened when we shared our mood boards — they were quite similar, each with its personal touch but using the same color palette.
The moodboard we chose to work with
We decided to use orange as the primary color and turquoise as the secondary. The first one adapted perfectly to what the stakeholder had requested and was very similar to the color the website had been using, but stronger and more modern.
Combining it with turquoise provided freshness and visual modernity without losing sight of our objective.
Once our mid-wireframes were iterated and the colors chosen, typography was the next step. We opted for Poppins, a sans-serif typeface that wouldn’t overload our screens since displaying products carried that risk.
We started designing mobile-first, ensuring our screens adapt efficiently and are easy to understand for all types of users. We used an 8px grid and for the web, 12 columns with a 100-margin and 20-gutter.
Responsive design
Responsive design
GO WITH THE FLOW
The flow begins at the home page, where the user finds accesses to sections through tab navigation. If they choose the ‘products’ option, they get a categorized list. This layout aims for visual order and aids in easy searching. They can then enter each item on the list to view the products within it. If they want more information on any product, a click takes them to a card displaying price, format, nutritional information, and recipes they can prepare with it. They can add it to the bag and view the shopping cart.
There’s also a dropdown menu from the bar that grants access to any category without passing through the products page. Typing a keyword enables a search directly for the desired product.
Once the user has selected the products to buy, they can access the shopping cart and start the payment process. They can either log in if they have an account or proceed as a guest without signing in, leading them to a screen where they enter personal details. Then, they choose the delivery method and input payment details.
After confirming the payment process and its completion, they will receive their invoice via email, which they can download or if logged in, it will be saved in their profile. And that completes the flow in navigating our digital product.
OUTCOMES
In this project I realized how necessary it is sometimes to iterate, go back, and review, to apply other methodologies if you’re not sure how to continue, and how important it is to know who you are designing for. We had moments where we felt stuck, and going back cleared our doubts.I also rediscovered how much I enjoy working on wireframes and UI; I can spend hours on it without realizing how time flies.
Regarding the project itself, I would have liked to continue the process and present it to the client, to see their expression when they see what we’ve designed and to analyze the feedback received from that part as well. Maybe on some future occasion, I always remain eager for more, and that’s the important part of being on this path.
