Redesign of the site FIZI
Contribution
Research, UX/UI Design, Prototypes
Role
UX/UI
Timeline
Jan2024-Feb2024 (4 weeks)
Overview
Recently, our team completed a month-long project dedicated to redesigning the FIZI website, a modern and innovative company specializing in vegan bars. The redesign aimed to enhance user experience and more effectively communicate the brand's core values and mission, reflecting FIZI's commitment to modernity and health-conscious consumers.
My Role
On the FIZI project, my role was to conduct competitor research to ensure our product stood out. I organized the project structure, focusing on user-friendly design. I collected user feedback to adjust the design based on real needs. My contributions included creating prototypes and animations that helped bring our ideas to life, giving a clear picture of the user experience. I also prepared and delivered a presentation to the client, explaining our strategy, design choices, and how they would benefit users, ensuring the client saw the value of our work.
Problem
-
Product Information Organization: Currently, the product details for items in assortment boxes are shown in a gallery format, which makes it hard for customers to find the information they need. This part of the website needs to be optimized to make it easier for customers to access the necessary details.
-
International Integration: Since FIZI already has a separate website for Poland, it's important to create an easy way for users to switch between different country versions of the site, allowing them to navigate seamlessly between locations.
Goals
-
Improve Conversion Pages: Refine the product detail pages, collection pages, and homepage to enhance the conversion rate and other behavioral metrics, aiming to optimize user engagement and sales.
-
Streamline Navigation: Develop strategies to reduce unnecessary clicks for category transitions, enabling users to navigate more efficiently and intuitively within the site, thereby improving user experience and potential conversion.
-
Enhance International User Experience: Implement a clear and intuitive mechanism for users to switch between the different country-specific versions of the website, ensuring a smooth and user-friendly navigation experience across international boundaries.
Competitor Analysis
After conducting an analysis of four competitive websites specializing in the sale of healthy bars, we used the gathered data to redesign the FIZI website. The goal of the redesign was to eliminate identified weaknesses and integrate the best practices and successful solutions found during the competitor analysis. This included improving the user interface, optimizing the site structure, enhancing navigation ease, and more effective product presentation.
Improvement ideas
-
Integrating functionality for reviews and ratings on the website is an important strategy for increasing conversion, improving customer relationships, and enhancing the overall effectiveness of web presence
-
By integrating effective filtering and sorting systems, we will not only improve site navigation but also create a more personalized and satisfying shopping experience for users. Such improvements could become a decisive factor in choosing your site over competitors
Reviews Analysis
-
There are questions about the composition of the bars (this information is presented in the highlights and on the website as well)
Question: Where on the website would people like to see this information?
-
The question is often asked where consumers can buy bars offline (all over Ukraine)
Users ask:
In which supermarkets?
In which cities?
Website Audit
We conducted a thorough audit of the website, covering all key aspects of its functioning. Analyzing the ease of achieving the goal by users (finding and ordering the product), heuristic analysis, ease of reading information, we identified potential opportunities for optimization and improvement. Our detailed report provides specific recommendations to improve performance and take your website to the next level.
-
The banner is not clickable.
-
There is a “Buy” button, but it is not visible on the banner.
-
The second banner has a title, but the first one does not, and the text of the title is not readable.
-
Having two shopping carts on the main page can cause confusion for users and lead to misunderstandings.
-
Having two “Rewards” buttons can also cause confusion
-
Making the banner clickable allows users to actively interact with the content and navigate to pages, which can lead to higher conversions. Remove duplicate buttons. Use a clear title and place the buy button clearly for the user.
Survey
We surveyed 531 FiZi customers using Google Surveys, which allowed us to collect important data and feedback directly from users to confirm or disprove our hypothesis.
-
Most often, they search by category or section to find products in certain areas of interest.
-
Key elements highlighted by respondents include nutritional features (gluten-free, lactose-free, vegan, sugar-free) and price; respondents also highlighted the importance of discounts/promotional offers and taste (sour, spicy, sweet, etc.).
-
Made the navigation menu intuitive, with clearly defined categories that allow users to easily find the products they need.
-
Added filtering and sorting functions within each category so that users can more effectively narrow their search by specific parameters
-
Made it possible to filter products by criteria: gluten-free, lactose-free, vegan, sugar-free, etc.
-
Made detailed and clear product descriptions that contain all the necessary information about nutritional features, ingredients, taste profiles and nutritional value.
Prioritization
Based on the data collected, we have prioritized the following points to improve the website:
-
Advanced filters for easy navigation and search.
-
Loyalty program: Including a separate page with a description of the benefits and possibilities of the loyalty program + a FAQ section, which will help attract and retain customers.
-
A drop-down menu to select a language to make the website more accessible to different audiences.
-
Navigation optimization: Inclusion of a single button to access the loyalty program and a "scroll up" button.
-
Highlighting important information: Placement of key product parameters in the product catalog and tabs for switching between component products.
-
Additional improvements: Adding a contact button to the FAQ section and using icons to highlight the main parameters of bars in the catalog filter.
Road Map
We organized the survey notes and brainstorm ideas into categories to find common themes.
Information architecture has become a key element in our process of analyzing and developing wireframes for the website. It has helped us clearly structure the content and determine optimal navigation paths for users.
Information architecture
Home page
-
The "Loyalty Program" button is not clickable, and it does not lead to the respective page.
-
Redundant buttons for "Rewards" and "Cart".
-
Visually dense text in the product block with lines.
-
Placement of review cards ahead
of Bestsellers cards.
-
We optimized the visual representation of text in the product block with lines, making it easier to perceive and enhancing the overall attractiveness of the page. This has improved the overall appearance of the page and increased user interest in exploring our products.
-
We reorganized the page structure by placing review cards immediately after the bestseller product cards. This decision has improved the user experience, providing customers with convenient access to reviews and helping them make more informed choices based on the opinions of other users.
-
We positioned review cards after bestsellers, simplifying access to information and product selection.
-
We activated the "Loyalty Program" button on our website, enabling a direct transition to the loyalty program page. This has improved the accessibility of the feature, encouraging users to engage more actively with the program and promoting increased participation.
Header
-
Unnecessary "HOME" item in the menu takes up valuable space and makes navigation less intuitive.
-
The absence of a language switcher on the website limits accessibility for users who do not understand the language of the primary content.
-
The absence of a search function on the website complicates user navigation.
-
The "Catalog" section on the website does not include a "All Products" category, limiting users' access to the full range of products and making it more difficult to find specific items.
-
We optimized the menu by removing the redundant "Home" item, freeing up valuable space and making navigation more intuitive.
-
A language switcher has been integrated, providing users with the ability to easily change the country and language of the site. This enhancement can improve the website's accessibility for an international audience.
-
We added a search function, allowing users to quickly find the necessary information or products, simplifying navigation and increasing conversion.
-
The "All Products" section has been included in the "Catalog" category, ensuring easy access to the full range of products.
Сatalog
-
Suboptimal placement of the "Buy" button, which reduced conversion due to inconvenience and inaccessibility for users.
-
Absence of the "All Categories" section and other missing sections that exist on the website
-
Made all products and categories easily accessible, thereby improving site navigation. Now users can find the necessary products faster, which increases the overall usability of the site.
-
By organized articles under product cards, we have enriched the content of the pages, making them more informative and attractive to users, which can increase their desire to explore the product range.
-
Moved the "Buy" button to the optimal location in accordance with the heuristic principles of STA helped to increase conversion by making the purchase process more intuitive and accessible to users.
Filters and sorting options
-
Lack of filtering functionality and extensive product sorting
-
We added filters and sorting functions to the website, which improved the search and selection of products for users.
-
We introduced filters on the website, which allows users to effectively sort products by the criteria that are important to them.
-
Implemented a sorting function on the website that allows users to organize products by key criteria: price, recommendations, date of manufacture, alphabet, calorie content, and others. This option greatly simplifies and speeds up the search for the right products.
Product page
-
Information about the composition of assorted boxes on the website is displayed in a gallery, which makes the process of familiarizing yourself with it quite cumbersome and less convenient for customers.
-
The information in the product card is arranged without a clear sequence, which makes customers spend extra time searching for the necessary data.
-
The product description on the website is located below the photo, which requires users to scroll down the screen to read the information. This complicates interaction with the site and increases the time required to familiarize themselves with the product.
-
Changed the mechanism for displaying the composition of products by using drop-down windows when hovering over the photo of each bar in the box. Now customers can quickly and easily see the composition of each product.
-
Moved the product description directly under the product name, thereby eliminating the need to scroll down the page to get information. This will make the process of familiarizing yourself with the product faster and more efficient.
-
The information in the product card is now organized logically and consistently, which reduces the time spent searching for the necessary data and improves the overall usability of the site.
Reviews
-
By displaying all reviews at once, it overwhelms users with information, making it difficult to find the most relevant or newest reviews.
-
On the FIZI website, users now have to make several clicks to view detailed information about each review.
-
We optimized the process of viewing reviews on the FIZI website: customers can now read reviews without unnecessary clicks and time wastage, as everything is displayed instantly.
-
We have introduced a special signature that indicates that the author of the review has been rewarded for his or her comment.
-
Expanded the ability to personalize profiles on the FIZI website, allowing customers to choose avatars that reflect their mood. Displaying an avatar next to a review on the FIZI website adds a personal touch and enhances the interactivity of communication.
Prototyping and Testing
-
Feedback indicated that the new product page's enhanced visual hierarchy successfully guided users' attention to key elements, improving overall user experience.
-
Test participants found the updated sorting functionality in the gallery to be a significant improvement, making it simpler to locate specific products or categories.
-
Enhanced product descriptions and better-organized information architecture on the new product page were identified as key factors in providing a more informative and reassuring shopping experience.
Takeaways
I am very pleased with the results of our UX project work. The implementation of new solutions has improved the user experience, which has been positively reflected in client feedback. Given the time constraints, we effectively focused our efforts on key aspects, although with more time, we would have loved to devote more attention to developing the blog and a bonus system for clients. I am particularly delighted that some of our innovative features were highly appreciated by the client and will soon be implemented, which is a great affirmation of the effectiveness of our work.