top of page
Group 1514 (1).png
Group 1515 (1).png

Responsive website for local online sustainable store

Project type: Responsive Web Design

Industry: Sustainable Products

Tools: Figma, Notion, Zoom, Miro

Duration: Q2 2023

Background

Oryzi, a sustainable startup, creates eco-friendly products from mushroom farm waste. Starting with sustainable packaging, they've grown to include stationary and other items. Oryzi's goals are to promote sustainability, increase sales, build their brand, and enhance their online presence.

Screen Shot 2024-01-20 at 8.31.10 PM.png

The Problem

Despite experiencing growth over the last few years, Oryzi lacks a brand and an official website that effectively engages users and drives product purchases. 

The Goal

Create a responsive, user-friendly e-commerce website, elevating brand presence, boosting sales, and establishing a strong online market presence.

Understanding Competitor Websites

I analyzed competitor sustainable e-commerce websites to assess their strengths, weaknesses, opportunities, and threats in website design. This analysis helped identify essential elements and avoid pitfalls when deciding on key design aspects for Oryzi's website.

Cedar-Grove-logo.png

Cedar Grove

  • Interactive website elements

  • Clear upper navigation bar

  • Inconsistent branding across pages

  • Web pages are text-heavy

  • CTA button visibility is poor

  • Unclear direct product purchasing

ecovative-brandmark-black.jpg

Ecovative

  • Strong company branding

  • Clear CTA incorporated

  • Clear and high-quality visuals

  • Unclear purchasing navigation

  • Upper navigation bar not included

  • Products not clearly displayed

MycoWorks_LOGO_edited.png

MycoWorks

  • Captivating images included

  • Strong selected typography

  • Interactive and moving elements

  • Unclear purchasing navigation

  • Vague material information

  • Text heavy throughout webpages 

Textured Background
Arrow _edited.png

Key Takeaways from Website Observations

 

After analyzing websites of other sustainable businesses, I identified common website elements used: clear navigation, visual appeal, clear images, strong branding, prominent call-to-action buttons, and detailed product information.

Understanding User Needs Through Interviews

I conducted user interviews to uncover preferred website features, desired overall website experience, and common challenges encountered during website use. Participants included sustainable procurement professionals and environmentally conscious consumers. I interviewed 4 participants, aged 26-48.

Screen Shot 2024-01-20 at 9.25.50 PM.png
Avatar 87

Eco-Friendly Sourcing Professional

​"...efficiency is key. We prioritize websites that offer clear categorization of sustainable products, easy navigation, and detailed information about each items. Quick access to certifications, is crucial for ensuring the products meet organization's sustainability standards..."

Environmentally Conscious Consumer

​"...when I'm browsing online, I want more than just being able to buy stuff. I like websites that inform me about their story and tell me where the products come from. I want to feel good about my purchases, knowing they're making a positive difference for the planet and society."

Avatar 102

I organized the insights into an affinity map, using color-coded sticky notes to show each participant's views. This visual tool helped spot patterns and key themes by grouping similar comments.

Image by Mike Erskine

Website Features from Findings

User interviews revealed preferences for easy navigation, clear product info, high-quality images, appealing design, and a straightforward purchase process. Pain points included complex checkout, cluttered layout, low-quality images, and limited sustainability info.

User Profiles

I created user personas to guide essential feature decisions and ensure the website design meets user needs.

Understanding the  Goals

A Venn Diagram was crafted to integrate User Goals, Business Goals, and Technical Considerations, ensuring a holistic view in the design process. This visual aid empowers informed decision-making by illustrating the intersection of user needs with business objectives and technical constraints.

Brainstorming Essential Features

Using POVs and HMW statements to guide solution development for user challenges, I generated a variety of ideas, including positive, opposite, and negative concepts, to explore diverse possibilities and potential website solutions.

POV:

As a user seeking a hassle-free online shopping experience, I need a website that streamlines product discovery, removing unnecessary clutter, and provides a straightforward path to effortless purchasing, ensuring a smooth and enjoyable transaction process.

HMW:

How might we simplify the online purchasing experience to eliminate clutter and seamlessly guide users from product discovery to purchase, enhancing overall user satisfaction?

Screen Shot 2024-01-21 at 10.58.47 AM.png

I categorized participant-provided features into 'Must-have,' 'Nice to have,' 'Surprising and delightful,' and 'Can come later' rankings, aiding in prioritizing essential features.

Screen Shot 2024-01-14 at 10.44.24 PM.png
Screen Shot 2024-01-14 at 10.45.23 PM.png
Screen Shot 2024-01-14 at 10.45.49 PM.png

Website Navigation Framework

User task flows and site navigation were developed in parallel and refined iteratively, integrating feedback from participants and company preferences. Essential pages such as FAQ, About Us, Shop, Contact Us, and Your Cart were prioritized by the company. The focused user tasks delineate the steps users follow to meet the company's objectives. The following task flow illustrates the process users undergo to add an item to their cart:

Screen Shot 2024-01-14 at 9.36.12 PM.png

Sketches to Screens

After prioritizing features and understanding the task flow, I developed wireframes. Starting with essential elements in low fidelity, I iterated to align with user flows. Advancing to high fidelity, I added details while ensuring design consistency. Refining and gathering feedback, the wireframes became a solid base for prototyping and testing, ensuring a user-friendly final design.

Lo-Fid Mobile Wireframe

Screen Shot 2024-01-14 at 9.47.14 PM.png

Lo-Fid Desktop Wireframe

Screen Shot 2024-01-14 at 9.48.09 PM.png
Image by Mike Erskine

Branding/UI Kit

 

I created a UI Kit , encompassing key assets like the color palette, buttons, and typography. The rebranding effort included:

  1. Designing a new logo for Oryzi, featuring a mushroom incorporated within the 'O' to symbolize the mushroom-based products.

  2. The color palette mirrors the hues found in the mushroom material, creating a warm and professional ambiance. The chosen warm tones also contribute to a visually appealing and cohesive design, enhancing the overall user experience.

Sketches to Screens

After prioritizing features and understanding the task flow, I developed wireframes. Starting with essential elements in low fidelity, I iterated to align with user flows. Advancing to high fidelity, I added details while ensuring design consistency. Refining and gathering feedback, the wireframes became a solid base for prototyping and testing, ensuring a user-friendly final design.

Hi-Fid Desktop Wireframe

Screen Shot 2024-01-14 at 10.37.12 PM.png

Hi-Fid Mobile Wireframe

Screen Shot 2024-01-14 at 10.36.30 PM.png

Final Interactive Prototype

Design Journey and Skill Development:

 

Throughout the creation of the sustainable e-commerce website, I honed my skills in user-centric platform design. Embracing an iterative and non-linear approach, I continually refined designs, ideas, goals, and questions, enhancing my proficiency in Figma and deepening my understanding of the UI/UX design process. As a crucial next step, my goal is to rigorously test the website, ensuring its functionality, user-friendliness, and alignment with the intended user experience.

Challenges and Takeaways:

 

The project brought notable challenges in managing design documents across platforms and coordinating schedules with clients and participants.

 

A key takeaway emphasized the necessity of crafting a detailed, goal-oriented calendar before embarking on a project. This experience highlighted the importance of effective time management, a lesson I aim to apply for increased speed and productivity in future endeavors.

bottom of page