Serena Tambone Portfolio

Project overview

GreenLeaf Grocers is an eco-friendly supermarket chain struggling to attract and retain younger, tech-savvy customers (ages 25-40) interested in sustainable shopping. Their existing website is outdated, not mobile-responsive, and offers very limited functionality.
As a result, the business feels it’s losing potential customers to larger chain supermarkets with more advanced digital platforms.

Current experience

Customer insights- demographics

Customer Pain Points

Personas

---

Define and Ideation

User Journey Map

Within the User Journey Map, I included the users’ actions, thoughts, and feelings for each of the four identified phases: Education and Awareness, Consideration, Decision, and Loyalty.
I assigned a different color to all Doing, Thinking, and Feeling actions based on the severity of their impact on both the business objectives and the consumer goals of the store.

Each action was linked to its corresponding pain point, and for every pain point, I added a new note containing its problem statement.

I gathered all the notes containing the problem statements into a separate table and organized them by category.
The categories identified were Digital Engagement and UX, Communication and Trust, and Information Accessibility.

For each note containing a problem statement, I added another note describing the related opportunities connected to that specific problem.

Then, I positioned these opportunities within an Impact–Effort Matrix.

In this matrix, I focused specifically on the High Impact, Low Effort quadrant, since it contains the opportunities that would generate the most significant impact on both business and consumer goals, while requiring minimal design effort. These, therefore, represent the most urgent improvements to be implemented on the website.

Afterward, I created a note for this quadrant that answered the “How might we…” question — a way of exploring possible, practical solutions to the opportunity highlighted in that area. I would prioritise the app implementation and a reconstruction of the ‘about us’ page. In addition to this, I would insert a clear product info for each item present in the store. That’s a strong design direction! Focusing on a UX writing study to ensure the language resonates with the target audience and then moving into wireframe designs for the website refresh directly addresses both the communication and usability pain points. This approach clearly balances user satisfaction with the business aim of reinforcing GreenLeaf Grocers’ eco-friendly mission.

The idea outlined in the pink note inspired a series of possible design solutions.
These solutions were grouped into five categories: UI, Strategic Product Design, Research-Oriented, UX Writing, and Navigation.

Once I identified these categories, I focused on the solutions that, as a designer, I could implement more easily and that were most relevant to my role.
I marked the most feasible ideas with stars.

I determined that the changes I could personally implement were mainly related to UX Writing and Navigation.
In particular, I decided to focus on:

• Positive, encouraging macrocopy that celebrates small sustainable actions.
• Sticky Button Navigation and Top Feeder Chips to simplify eco-friendly product discovery and allow users to effortlessly track their sustainable impact.

Based on this specific idea, I began developing creative methods to start the actual design phase, using the Crazy 8s technique.

Design

User flow

In designing the user flow, I mapped out the main paths users would take to accomplish their goals on the Greenleaf Grocers website. The user flow helps visualize how users move through different touchpoints — from entry to task completion — ensuring that each step feels intuitive, efficient, and aligned with their needs.

During this process, I identified both primary and secondary user goals.
The primary goals focus on essential actions that support a smooth shopping experience, such as creating an account, browsing and searching for products, ordering and managing deliveries, accessing sustainability information, and subscribing to the loyalty program.
The secondary goals represent complementary motivations that enhance engagement and retention, including comparing products, saving items for later, and exploring recipe ideas.

By structuring the user flow around these goals, the experience was designed to balance usability, efficiency, and user satisfaction across different stages of interaction.

Wireframes

---

Wireframes iteration

I then submitted the first wireframes for unmoderated remote usability testing, asking participants from my initial target audience to evaluate the navigation, Information Architecture, content clarity and labeling of the content presented in the wireframe.

Mockups

---