Project

Yardley Refillery

Industry

eCommerce

Role

UX/UI Designer

Date

Dec. 23'-Nov. 24"

Yardley Refillery

Yardley Refillery

Yardley Refillery

Providing a responsive web experience for a low--waste living. A community destination for environmentally and heath conscious shoppers to browse a robust menu of refillable household items.

Providing a responsive web experience for a low--waste living. A community destination for environmentally and heath conscious shoppers to browse a robust menu of refillable household items.

PROBLEM STATEMENT

How might we improve the consistency of the website to effectively articulate the company’s identity and introduce its offerings of low-waste products.

How might we improve the consistency of the website to effectively articulate the company’s identity and introduce its offerings of low-waste products.

OJECTIVES FOR USER PAIN POINTS

Develop a responsive fill menu for users interested in browsing to learn more.
Create a personalized user profile to incentivize shoppers to understand benefits of refilling and buying low-waste products.

Develop a responsive fill menu for users interested in browsing to learn more.
Create a personalized user profile to incentivize shoppers to understand benefits of refilling and buying low-waste products.

User Flow #1

User Flow #1

Responsive Fill Menu. Users can easily navigate and interact through categorized products.

Responsive Fill Menu. Users can easily navigate and interact through categorized products.

User Flow #2

User Flow #2

Multi-Functional Profile. Users enjoy a personalized experience to view orders, favorites, and scan for rewards.

Multi-Functional Profile. Users enjoy a personalized experience to view orders, favorites, and scan for rewards.

End-to-End Process

End-to-End Process

INSIGHT

INSIGHT

Competitive Analysis

Competitive Analysis

I analyzed four companies specific to the low-waste industry. I compared two very similar local low-waste refillerys as well as two large direct to consumer companies. I determined there existed an opportunity to develop a more responsive and personalized experience targeted directly to the local eco-conscious consumer.

I analyzed four companies specific to the low-waste industry. I compared two very similar local low-waste refillerys as well as two large direct to consumer companies. I determined there existed an opportunity to develop a more responsive and personalized experience targeted directly to the local eco-conscious consumer.

User Interviews

User Interviews

I conducted interviews with 6 participants including the two co-owners, 2 stakeholders, and 2 customers. A consistent pain point was updating the website to reflect a more responsive user friendly experience. To transform the website to more closely resemble the "approachable " instore shopping experience. Also, identified was the need to provide users with a personal profile to encourage repeat customers.

I conducted interviews with 6 participants including the two co-owners, 2 stakeholders, and 2 customers. A consistent pain point was updating the website to reflect a more responsive user friendly experience. To transform the website to more closely resemble the "approachable " instore shopping experience. Also, identified was the need to provide users with a personal profile to encourage repeat customers.

Target Audience

Target Audience

I developed two personas based on the insight gathered during the competitive analysis and user interviews. Though different in personality both personas represent real users that face similar challenges and goals.

I developed two personas based on the insight gathered during the competitive analysis and user interviews. Though different in personality both personas represent real users that face similar challenges and goals.

Eve "The Environmentalist"

Eve "The Environmentalist"

A 32 year staunch environmentalist dedicated to

shopping as low-waste as possible.

A 32 year staunch environmentalist dedicated to the shopping as low-waste as possible.

GOALS

Buy as low-waste, healthy, and ethically conscious as possible.

Buy as low-waste, healthy, and ethically conscious as possible.

CHALLENGES

Access to local businesses that support their causes.

Access to local businesses that support their causes.

MOTIVATION

Protecting the environment and supporting their wellbeing.

Protecting the environment and supporting their wellbeing.

Eric "The Local Suburban Parent"

Eric "The Local Suburban Parent"

A 34 year old busy parent that aspires to shop low-waste. But also needs to prioritize affordability and convenience.

A 34 year old busy parent that aspires to shop low-waste. But also needs to prioritize affordability and convenience.

GOALS

Buy as low-waste, healthy, and ethically conscious as possible.

Buy as low-waste, healthy, and ethically conscious as possible.

CHALLENGES

Competing with more convenient and affordable options.

Competing with more convenient and affordable options.

MOTIVATION

Being eco-conscious and while also meeting the needs of their family.

Being eco-conscious and while also meeting the needs of their family.

Affinity Map

Affinity Map

I synthesized the participant feedback I received into groupings to determine key features essential for our product.

I synthesized the participant feedback I received into groupings to determine key features essential for our product.

EXPLORATION

EXPLORATION

Information Architecture

Information Architecture

The sitemap includes the required pages for a ecommerce site with an emphasis on the services provided.

The sitemap includes the required pages for a ecommerce site with an emphasis on the services provided.

User Flows

User Flows

Flow #1 guides the user through the process of navigating through the fill menu and sub-categories discover and learn more about products.

Flow #2 guides the user to their profile to access their personalized information and reward details.

Flow #1 guides the user through the process of navigating through the fill menu and sub-categories discover and learn more about products.

Flow #2 guides the user to their profile to access their personalized information and reward details.

Lo-Fi Wireframes

Lo-Fi Wireframes

Lo-Fi wireframes focus on the the key user flows leading the user to fill menu and profile.

Lo-Fi wireframes focus on the the key user flows leading the user to fill menu and profile.

Mobile Wireframes

Mobile Wireframes

Tablet Wireframes

Tablet Wireframes

SOLUTION

SOLUTION

Hi-Fi Wireframes

Hi-Fi Wireframes

Hi-Fi wireframes showcase a more developed UI vision representative of the branding style. Also, it includes insightful iterations based on the feedback recieved from user testing.

Hi-Fi wireframes showcase a more developed UI vision representative of the branding style. Also, it includes insightful iterations based on the feedback recieved from user testing.

Mobile Wireframes

Mobile Wireframes

Tablet Wireframes

Tablet Wireframes

Revisions

Revisions

Iteration #1

Iteration #1

Original Version

Original Version

Buttons confuse user that it is an interactive button.

Buttons confuse user that it is an interactive button.

Final Version

Final Version

Squared format now indicates the feature is coming soon.

Squared format now indicates the feature is coming soon.

Iteration #2

Original Version

Original Version

List products without any indication of what is available.

List products without any indication of what is available.

Final Version

Final Version

Radio button now filters results to what is currenlty available.

Radio button now filters results to what is currenlty available.

Iteration #3

Iteration #3

Original Version

Original Version

Profile only illustrates to user their current status of rewards.

Profile only illustrates to user their current status of rewards.

Final Version

Final Version

Revised dashboard now provides direct access to the users reward card.

Revised dashboard now provides direct access to the users reward card.

FINAL RESULTS

FINAL RESULTS

Status: Currently in development

Status: Currently in development

NEXT STEPS

The Yardley Refillery revamp has completed the design handoff stage and is currently working with owners and stakeholders on development. Target launch 2025-Q2.

The Yardley Refillery revamp has completed the design handoff stage and is currently working with owners and stakeholders on development. Target launch 2025-Q2.

FINAL REFLECTIONS

The new Yardley Refillery responsive website successfully provides its target audience the opportunity to discover and learn more about the local store. It addresses the users pain points based on research and participant insight. Shoppers can now shop with a more informed concept of the what the refillery does and offers. This site is here to encourage a low-waste conscious lifestyle.

The new Yardley Refillery responsive website successfully provides its target audience the opportunity to discover and learn more about the local store. It addresses the users pain points based on research and participant insight. Shoppers can now shop with a more informed concept of the what the refillery does and offers. This site is here to encourage a low-waste conscious lifestyle.