Online Mushroom Store
Tools Used
Project Duration
2 Weeks 20+ Screens
Project Overview
Fungus is a sustainable small business focused on cultivating oyster mushrooms using recycled coffee grounds as a substrate. Founded by a dedicated team ( myself and three of my bestfriends) , Fungus embodies values of recycling, organic food production, and sustainable agriculture.
With a strong presence in local markets and partnerships with cafes, Ambassiess, holiday markets, farmers' markets, restaurants, and health food stores, Fungus is making a positive impact on its community
The Problem
The problem at hand is the absence of an online platform for our small business, Fungus, which cultivates oyster mushrooms using recycled coffee grounds. We aim to create a website to increase sales, improve customer interaction, facilitate online sales of our mushrooms, organize workshops, and provide educational resources on sustainable agriculture.
Goal and Objectives
The primary goal is to design and develop a comprehensive online platform for Fungus that enhances sales, customer engagement, and educational outreach.
1-Create an Engaging Sales PLatform and Boost Online State
To create an engaging and user-friendly e-commerce website for Fungus's organic oyster mushrooms and related products.
2-Educaitonal and Informative Hub :
To develop an informative section dedicated to mushrooms, recycling, and sustainable agriculture.
My roles and Responsabilites
Interviews format
IQualitative Research
3 in-person interviews conducted to gather insights.
2 online interviews.
To strengthen partnerships and sales channels with local cafes, farmers markets, restaurants, and health food stores.
Conducting user experience research, low & medium-Fidelity wireframe, high-fidelity prototyping, user interface with design system and usability testing.
Design Thinking Process
3-Enhance Partnerships and Sales Channels:
I started my project with user centered approach,addressing,the whole user experience. Interactive design thinking process consists of five phases: Empathize, Define, Ideate, Prototyping and testing. By approach this approach we can easily able to solve the problem of user.
Empathize
User Interviews
In addtion to the previous data that i had about Fungus (Data used before creating fungus as startup) I conducted interviews with a diverse group of 5 participants. Age range: 24 to 54 years old.
Geographic Distribution:
3 participants from Algeria, all previous customers of Fungus with experience ordering mushrooms.
2 participants from London, with no prior experience ordering mushrooms online but familiar with mushrooms.
Interviews Key Findings
Overall Patterns and Observations:
Participants prioritize convenience and reliability in online ordering.
Familiarity with e-payments is growing but remains cautious.
User-friendly interfaces and facebook based stores are preferred.
Online reviews and product descriptions play a significant role in decision-making.
The option for cash-on-delivery is important for many participants
Expectation from ordering mushrooms online
Participants are open to ordering mushrooms online if quality and freshness are assured (One of the reasons our customers prefer to visit in person and select the mushrooms).
User-friendly websites with clear visuals and descriptions are expected.
Reliable delivery times and secure payment options are crucial.
Trust-building elements, such as customer reviews, could enhance the online mushroom ordering experience.
Competitor Analysis
Define
I analyzed 4 competitor online website for mushrooms using SWOT Analysis.
After analyzing four websites focused on selling mushroom products, each has its unique strengths, particularly in ensuring quality. However, there's room for improvement in website design and navigation for a smoother user experience. I see exciting opportunities ahead, such as expanding product offerings, enhancing user interfaces, and exploring collaborations.
Idea
Empathize
User Persona
I distilled my research findings into two personas that embody the characteristics audience for the responsive website.
These personas serve as a reference point during the design phase, guiding acting as a safeguard against the influence of personal biases in later stages of the project.
How Might We…?
How might we create an online platform for Fungus that maximizes user-friendliness and convenience, aligning with the preferences of Algerian customers who value easy navigation and seamless ordering processes?
How might we develop a website that assures customers of the quality and freshness of our oyster mushrooms, addressing the expectation of transparency in product descriptions and reliable delivery times?
How might we incorporate trust-building elements, such as customer reviews and ratings, into the website to enhance credibility and foster a sense of assurance among potential buyers, especially those who are new to online mushroom ordering?
How might we leverage educational content and multimedia resources to educate visitors about sustainable agriculture and the benefits of oyster mushrooms, making the website not just a place to shop but also an informative hub for those interested in sustainable food production?
Feature Set
Define
Ideation
Prot
Ideation
Prototype
Logo Design Process
High Fidelity Wireframes
i developed a high-fidelity wireframes by first digitalizing my initial sketches in Figma. Subsequently, i applied branding and styling elements to refine them into a polished high-fidelity format. Utilizing these wireframes, I constructed functional prototype for a conducting thorough usability testing.
You can access the high fidelity prototype by following this link, which will provide a more detailed visual representation
Figure 1: Navigating through the main menu options including Shop, Learn, Events, and About Us, as well as the Account Menu.
This figure also illustrates the exploration of the Homepage, highlighting features such as the Most Popular Mushrooms selection and Testimonials.
Figure 1
Figure 2: Delving into Product Details, FAQ, and Reviews sections, and demonstrating the process of making a purchase.
Figure 2
Figure 3: Engaging with the Blog section, focusing on a specific article about growing mushrooms using coffee grounds, and exploring the details page of this blog post.
Figure 3
Low and Mid Fidelity Wireframes
Here are the low-fidelity and mid-fidelity wireframes for both the desktop and mobile versions of Fungus. I aimed for a clean and straightforward layout, with a strong emphasis on the quality of our products, something highly valued by our Algerian customers. I've also made sure to include features like cash-on-delivery and order tracking to build trust and keep our customers informed.
Within the navigation menu, you'll find the "Shop" section where all our products are listed. This includes various types of oyster mushrooms such as pink, blue, and white oyster mushrooms, along with growing kits, spawn/mycelium grains, and future mushroom varieties.
In the "Learn" section, I've incorporated blogs about mushrooms, covering topics like recipes, common mushrooms in the area, information about our mushrooms, and a comprehensive products FAQ.
Lastly, in the "Events" section, the users willl discover offerings such ason-site tours, workshops, and classes. I've even included a calendar of upcoming events to keep our customers engaged and informed about the exciting happenings at Fungus.
Testing
During the usability testing phase of the Fungus Online Platform, I engaged five participants in evaluating various user flows to ensure a comprehensive assessment of the platform's usability and user experience .
The first user flow focused on homepage exploration, examining how users navigate through primary sections such as popular mushrooms, product information, blog posts, etc. The second flow delved into product details and the purchase process, assessing user interactions from product cards to payment.
The third flow centered on account details, including personal information, login and security settings, payment methods, and order history, aiming to test the intuitiveness of user account management.
The fourth flow concentrated on blog reading, investigating the ease of accessing and navigating informative content. Lastly, the fifth flow involved participants attempting to contact Fungus for inquiries and providing feedback, specifically testing the accessibility of contact forms and feedback sections. These user flows collectively formed a comprehensive usability test plan, ensuring a thorough evaluation of the Fungus Online Platform across key functionalities.
Post-Usability Test Results : Recommendations
Educational Content:
Expand the informative content related to mushroom cultivation and sustainable agriculture. Ensure that the content is not only informative but also engaging, aligning with the interests of users like Imad (Participant 1) and Amr (Participant 3).
Delivery Transparency:
Clearly communicate delivery timelines and ensure timely deliveries, addressing the concerns raised by Joclyne (Participant 4). Providing accurate delivery information fosters trust among customers.
Optimization Mobile:
Prioritize mobile responsiveness to cater to users like Amr (Participant 3), who prefer mobile apps for convenience. Optimize the website for seamless use across various devices and screen sizes.
Contact and Support:
Ensure clear and easily accessible contact information. Place prominent links or buttons for contacting Fungus throughout the website, as recommended by Imad (Participant 1), Yasmine (Participant 2), and Akcil (Participant 5).
Multimedia Integration:
Enrich the content, especially in the blog section, by incorporating multimedia elements such as videos and infographics. This approach aligns with the feedback from participants like Amr (Participant 3) and Akcil (Participant 5) who found multimedia elements engaging.
Other Recommendations :
Create a better looking Navigation Menu or Mega Menu. Add a breadcrumbs to support wayfinding making users aware of their current location within the hierarchical structure of a website.
Usability Test and Feedback
Prototype
Testing
Affinity Map
I reviewed all the feedback obtained from the usability tests and structured the information according to the identified themes and insights provided by the participants.Link for better visualization
