14:30
PROJECT OVERVIEW

UX Figma Prototyping - Website Redesign (Springs Natural Medicine)

Role: UX/UI Designer (Student Team) | Team Size: 3 | Duration: Mar 2024 - May 2024

Primary Competencies: UX Research, Wireframing, Prototyping (Figma), UI Design, Collaboration

Project Goal

This academic project focused on redesigning an existing client website (originally Vita Vis, rebranded conceptually as Springs Natural Medicine for the project) to significantly improve its usability, visual appeal, and overall user experience. Working collaboratively in a team of three, our goal was to move through a standard UX process: identify current pain points, deeply understand user needs, and ultimately deliver a functional, high-fidelity interactive prototype in Figma demonstrating our proposed solutions.

Research, Definition & Scope

As an active member of our three-person team, I contributed across the entire UX design process. We began by thoroughly analyzing the existing Vita Vis website.

Screenshot of the original Vita Vis homepage before the redesign, showing cluttered navigation and older layout.
Figure 1: The original client website homepage (Vita Vis) before our redesign efforts.

Our first step involved a comprehensive UX audit to evaluate the site's navigation, information architecture, and overall usability heuristics. This initial analysis highlighted several key usability issues, such as unclear pathways to core services and an outdated visual presentation, which helped us define the scope for improvement.

Understanding the 'why' behind user behavior and client goals was crucial. Through several client interviews and analysis of competitor sites, we defined business objectives and target user needs. Based on this, we developed a detailed user persona, "Jacolyn Morris," representing the primary audience. This persona highlighted key demographics, motivations (seeking trustworthy, accessible naturopathic care), and frustrations, guiding our focus towards **three primary user tasks** critical for the redesign, chosen based on their impact on both user satisfaction and client objectives.

User persona profile for Jacolyn Morris, an 'Idealist' market segment, detailing quote, biography, needs, and frustrations related to finding holistic health options.
Figure 2: User persona developed from client interviews and research to guide design decisions.

Design & Prototyping: From Sketch to Hi-Fi

With a clearer understanding of our user and the core tasks, we moved into the ideation phase. We employed techniques like brainstorming and competitive analysis review to generate initial concepts before translating ideas into visual form. I then began sketching out potential user flows for the prioritized tasks, like the e-commerce journey, exploring multiple options to ensure we were building logical and intuitive navigation structures.

Hand-drawn sketch illustrating the user flow for browsing the shop, adding to cart, and navigating the multi-step checkout process.
Figure 3: Early sketch exploring a potential user flow for the e-commerce experience.

To bring these concepts into a more tangible format, we moved into low-fidelity prototyping using Figma. I focused on creating basic wireframes that defined the core layout, content hierarchy, and essential interaction patterns without getting bogged down in visual details. Presenting these lo-fi prototypes allowed us to gather quick feedback from peers and instructors, enabling rapid iteration on the fundamental structure and functionality based on usability principles.

Low-fidelity wireframe prototype created in Figma, showing basic layout blocks for the Springs Natural Medicine homepage (header, hero section, content cards).
Figure 4: Low-fidelity wireframe exploring layout and structure in Figma.

Once the underlying structure felt solid and validated by feedback, I shifted focus to building the high-fidelity interactive prototype, continuing within Figma. This stage involved translating the approved wireframes into a visually polished and aesthetically pleasing design, reflecting the calm and natural branding envisioned for "Springs Natural Medicine". I carefully selected typography, color palettes, and UI components, integrated relevant imagery, and meticulously built out clickable interactions to simulate a realistic user experience navigating the redesigned site, particularly for the core tasks identified earlier.

High-fidelity prototype screenshot of the redesigned Springs Natural Medicine homepage, created in Figma, featuring a hero image, clear navigation, and content cards.
Figure 5: The final high-fidelity interactive prototype of the redesigned homepage (Springs Natural Medicine).
High-fidelity prototype screenshot of the redesigned Plant Essences shop page, created in Figma, showing product filtering, sorting options, and clear product image cards with names and prices.
Figure 6: High-fidelity prototype of the redesigned shop page, addressing key e-commerce user flows.

Outcome & Presentation

The culmination of our team's design process was the final presentation. I helped showcase the fully interactive high-fidelity prototype we constructed in Figma, walking through the key user flows and design improvements. We clearly articulated the rationale behind our design choices, linking them back to the initial UX audit findings and the needs outlined in our user persona, demonstrating how the redesigned interface addressed specific pain points and streamlined the core user tasks identified at the project's outset.