Vegan Mario's is a gluten free bakery located in Ojai, California. When I lived in CA I used to purchase his breads at the local farmer's market, as well as from in store locations. He also sells his artisanal wares online through his e-commerce store. However, his website is underdeveloped, difficult to navigate, and lacks clear organization. This provided the perfect opportunity to improve a website for someone who's product means a great deal to me.
Solution:
By redesigning the information architecture of Vegan Mario's website, users will be able to effectively browse Vegan Mario's offerings and easily locate desired items to order.
My Contributions
Lead UX Designer | Lead UX Researcher | UI Designer
Getting Started
Vegan Mario’s is a gluten-free food company specializing in gluten-free breads, pastas, pizza doughs, as well as vegan condiments. His artisanal breads were a major source of encouragement to me when I found out I needed to eat a gluten free diet. Having the opportunity to help this business with their website and give back to an organization that has brought so much benefit to my own life is truly an honor. In order to hone my mindset towards highlighting issues I could improve through User Experience design first required the need to create a research plan.
Current Homepage
The research plan I created for this project employs the use of different styles of gleaning information. The following methods each have their own strengths and merits when put into action:
Research
User Interviews - Effective for gaining deep insights and qualitative data.
Card Sorting - Useful for analyzing how others organize sets of data in their minds to create more intuitive Information Architecture.
Competitive and Comparative Analysis - Beneficial for seeing how similar companies propose online e-commerce solutions.
Feature Inventory - Helpful for comparing what features are present in Vegan Mario's site as well as what features are present in competitor // comparator sites.
Pluses and Deltas - Provides a quick way to analyze what works well, and where areas for improvement exist.
I drafted questions to interview six people who could test the current website and share their experiences and perspective. The questions range from general framing questions such as “Please tell me about the last time you discovered a new product online” to more specific questions about Vegan Mario's website such as "What is the first thing that catches your eye?" and "How does the website make you feel?" I also included directives to have interviewees attempt to find specific items in the website to see their task flows and how they interact with the web layout.
After conducting three user interviews, I received valuable feedback about Vegan Mario’s website, as well as what makes for a productive and successful e-commerce experience. Each interviewee independently identified that the layout was off putting, and disorganized, which caused them to have a difficult time trying to find specific items in the provided categories. Most users ended up forgoing the menus at all, and simply relied on the search tool. Users indicated this makes browsing difficult, as they were forced to seek out specific items through the search bar. I also had each interviewee conduct their own pluses and deltas, as well as complete a card sorting activity.
Many participants thus far have noted the website feels old and outdated, and that there is too much text that they likely would never read. Since they are visiting the site for a specific task, to buy bread, they simply want to be able to easily purchase desired items in a pain free user flow. Once I completed all interviews, I synthesized the data down through an Affinity Map to clearly organize patterns and differences between users’ experiences, to gain insights on the bigger picture of how to improve Vegan Mario’s website.
Once I had completed organizing the interview takeaways through an affinity map exercise, a few key insights began to arise. The most common themes that came out of this exercise were:
“I am confused by the website’s disorganization.”
“I find the menus to be out of order.”
“I’m not going to read the home page, it’s too long.”
“I find the Information Architecture of Vegan Mario’s website to be out of order.”
“I find I’m reliant on the search bar because I can’t navigate the website effectively.”
“I can’t handle all the text and issues with text styles on the homepage.”
"I find this website feels cold."
"I don't trust this website."
Persona Synthesis
After drawing out user feedback, I created two personas representing the two main groups of users that arose. The two main user groups I found who would order from Vegan Mario’s website were those who eat a gluten-free and or Vegan diet, and those who would order gluten-free vegan food for someone they knew. I synthesized Sarah Farmer, a busy vegan Archaeologist from the first category, and synthesized Malik Wallace, a supportive partner of someone with Celiac, from the later. The task flows for each are based on the difficulties faced in browsing the original website. Sarah represents the need to be able to quickly and easily access information on the site to fit into her busy schedule, while Malik also shows the need for higher organizational structure, the need for easy access to gift cards, as well as a website that looks modernized and trustworthy, so his partner feel invited to a website that makes her diet feel like something legitimate. Since multiple users indicated distrust of Vegan Mario’s current website due to its disorganization and lack of inviting styling, it is necessary to address the issue to build brand trust. I then created problem statements to represent each persona’s issues, in order to effectively target a solution.
Sarah's Problem Statement:
Sarah works full time as an Archaeologist and is constantly on the go with her job. She loves having Gluten-Free Vegan food to keep her body healthy. She wants to order from Vegan Mario’s website since she can’t always find his bread in stores. However, she finds his website hard to navigate, and struggles to browse new items because of the site’s lack of organization.
Malik's Problem Statement:
“Malik, works full time studying lightning as a Fulminologist. His partner recently found out she had Celiac Disease and needs to eat a gluten-free diet. Malik is supportive and wants his partner to be able to still enjoy bread. He found out about Vegan Mario’s website, and wants to purchase bread and store credit for her to start her journey, but is lost when he opens the homepage. Additionally, to ease his partner’s anxiety around foods, he wants her to feel warmly invited on her gluten-free journey and finds Vegan Mario’s website to be cold.”
Solution Statement:
Vegan Mario’s, a Gluten-free Vegan bakery, offers a means for users to purchase gluten-free baked goods online, allows visitors to effectively browse Vegan Mario’s offerings, and easily locate and order desired items throughout its redesigned website.
Information Architecture
One of the most challenging aspects of the project was redesigning the IA of Vegan Mario’s website. The current layout is incredibly difficult to navigate, due to most categories being shoved into a drop down called “More”. I ran an open card sorting to learn how users categorized this information within their own minds. I then synthesized the data from the 5 members who participated in the Card Sorting activity and found this architecture to make the most sense:
In order to understand the scope of the current site and what I was working with, I created the following Information Architecture diagram:
While having the navigation for "Home" within the "More" tab had it's obvious issues, it was necessary to run an open card sorting activity to learn how users categorize this information within their own mindset. Once I ran the card sorting activity and received feedback, I then synthesized the data from the 5 members who participated in the Card Sorting activity and found this architecture to be the most inline with how users organized the categories:
Ideation
Once the plan had been set for a redesigned IA, I set to work ideating. The first challenge was to create a more user friendly and welcoming homepage.
After wireframes for each page were roughly sketched, I synthesized these ideas into slightly better quality hand drawn wireframes to build off in Figma.
The wireframing process in Figma proved to be smooth now that the groundwork for these layouts was already set. This build out utilized many components, which made for an ease of organizing buttons and other interactive elements in the prototype. I created a style guide to keep fonts organized, and chose to use only varying versions of one font, Sahitya, to maintain consistency. Since users identified the multiple font stylings of the original website as a source of confusion, I wanted to create cohesion and simplicity by only using only one. Sahitya fit the existing branding of Vegan Mario's well, as both his breads and this typeface look artisanal.
Testing
Once the prototype was created, the last step was to test it. I performed three usability tests, to see what feedback users had in the two task flows I created.
Since Sarah is accessing this site to order bread quickly and easily, I created a task flow that has her making regular purchases through the Breads product listing page, as well as the Spreads page as shown below:
Malik is looking for a gift for his parter, and since locating gift cards was so difficult in the original web layout, I tasked him to find a California Brown Rice Sourdough Loaf, as well as a gift card with the task below:
Once the prototype was created, the last step was to test it. I performed three usability tests, to see what feedback users had in the two task flows I had created. What I found was that users articulated some of the text was too small, particularly the phone number at the bottom, and some of the “body” copy. This can be easily updated with future iteration due to creating font styles. Some reorganization may be in order once the text is large, but this can easily be done. One user, a non native English speaker, had a hard time reading the logo font, so a Vegan Mario’s logo redesign may also be in order to appeal to a broader audience. Another issue that came up is that text was gapping during the check out phase, so this was fixed. One of the most important IA issues that arose during the test phase was that even though users indicated “Classes & Services” would be an appropriate header to house gift cards, it was still difficult for usability testers to locate immediately. So, with these test in mind, I changed the header to “Classes & Gift Cards”, since gift cards were the only service offered. All in all, my most important take away from these tests highlighted the need to check my designs on a small screen, to ensure I am designing for users on smaller laptops. This bit of knowledge will serve my design process well for years to come, and was one of the best pieces of wisdom I received from the project.
Bringing it up to Hi-Fidelity
After usability testing, I brought the body text size up from 12 to 14 at the minimum, to make the body copy easier for users to read on smaller screens. I also increased a few of the sub-header texts to header sizes, so they were more eye catching and denoted different sections. I decided to stay with Sahitya as the primary typeface, as it accented the branding of Vegan Mario’s, providing a sense of calm and artisanal quality. Since the font type was slightly too stylized for the numerical values in button fields, I chose Inter for a more straightforward numerical typeface. Creating a style guide helped create consistency as I brought the prototype up to high fidelity.
One of the greatest challenges in bringing the project up to Hi-Fidelity was choosing a color scheme. Fortunately, since I had made color styles in greyscale at the Lo-Fi stage, this would made swapping out colors easy once chosen, as sections already had color hierarchy to them. All that was necessary was to define the palette.
Usability testing of the old site showed users felt it was cold and unwelcoming, from both the overwhelming amount of text, as well as the lack of engaging colors. While users originally suggested “Thanksgiving colors”, to give a sense of warmth, this proved tricky in practice. The browns, yellows, and oranges that usually come to mind when thinking of thanksgiving, proved to be too clashing. To explore the idea of “Thanksgiving colors” and define a color pallet, I brought in a multitude of images based around bread, baking, and thanksgiving. What I came to find is that various shades of green were also involved in the color scheme around these images.
Upon exploring multiple images, I found a fantastic shade of green in a mug that accented a loaf of bread, and found it fantastically accented the white background and shades of the bread. I dubbed the green shade “sage” and iterated a few lighter versions for different accents. To highlight the top navigation bar, I searched for a brown that would accent the green and provide enough contrast to ground the navigation bar at the top. I found the shade in an image where the brown was present in an illuminated candle on the table. this brown contrasted well with the white shades and proved to backdrop the sage color I had chosen as well. While these colors added a more refined aesthetic than Vegan Mario’s previous palette, it did clash with his logo. I redefined his logo with a minimalistic aesthetic, to give it a classy and artisanal feeling instead of a kitschy look. Since he advertises his bread as a form of art, it was important to design a website that was also artfully crafted down to every last element. The logo redesign is minimalistic in an effort to not draw attention, and draw the audience’s attention to main exhibit, which are Mario’s breads. Further consultation with the client would be necessary to further redefine the logo.
While these colors added a more refined aesthetic than Vegan Mario’s previous palette, it did clash with his logo. I redefined his logo with a minimalistic aesthetic, to give it a classy and artisanal feeling instead of a kitschy look. Since he advertises his bread as a form of art, it was important to design a website that was also artfully crafted down to every last element. The logo redesign is minimalistic in an effort to not draw attention, and draw the audience’s attention to main exhibit, which are Mario’s breads. Further consultation with the client would be necessary to further redefine the logo.
Once the stylistic attributes were brought up to Hi-Fidelity, it was time to adapt the layout for mobile use. Since hovers don’t exist on mobile, the top nav bar was changed to an on tap hamburger menu for easy navigation. This would not only include the main headings, but also the user portals such as search, and their profile sections. This way, the only icons that would appear in the navigation bar at the top other than the hamburger would be the cart, so users could see how many items they have added for purchase while still browsing. Other than simply adapting the sizing of images and text styles, it was also necessary to adjust the positioning to better suit mobile users. The bottom navigation bar was completely redesigned in a vertical hierarchy, to suit users needs for easily clickable navigation, and for a cleaner visual aesthetic on a smaller screen. A similar design was issued for the “You May Also Like” listings, as a vertical layout on mobile allows for larger images, which help users see products better, and to effectively help drive sales.
After adapting the Hi-fidelity wireframes for mobile, a few changes were made after receiving feedback on the design. The banner image behind “Welcome” was too high resolution and some found it distracting, so the image was slightly blurred to allow the “Welcome” text to pop out more from the image behind it. I also changed the buttons on both desktop and mobile to be slightly transparent, as users reported the desire to see the more of the images behind the buttons. Additional testing is needed to determine whether the brown “chaga” color style works well for the banner. Some users found it distracting, and would prefer a shade of the “sage” color, while others liked the brown and found it framed the site well. While there are always areas for improvement such as those listed above, users reported the new design is a major improvement from the existing website. In the words of one user, “it now looks like a legitimate and artisanal bread site that I would order from.” This, along with other user feedback, affirmed the website improvements are on the right track, and would improve with further refinement.
Interested in viewing Vegan Mario's redesign in Figma?
.png)
.png)
.png)
