Design Requirements

To start off the project, my team of three designers along with the developers and project manager worked together to define the goals and requirements of the site. This allowed us to prioritize our design process and to discover the highest needs for the site.

Brand/Style Guide

With the requirements layed out and defined, my team started working on the development of the site brand guide and the style guide. This helped us in the early stages of designing the site because it gave us a clear goal of how our site would look in terms of an overall layout and structure.

Mid-fidelity Wireframes

I was responsible for crafting detailed mid-fidelity wireframes using Figma, focusing on establishing a clear structure and intuitive user journey. These wireframes captured essential design elements such as layout, spacing, user interaction points, and content prioritization—without introducing final visual styles—ensuring that the team could concentrate on functionality and usability.

I worked cross-functionally with UX researchers, product managers, and developers to translate user research insights into actionable design decisions. We held iterative feedback sessions with stakeholders and end users, allowing us to refine navigation patterns, user flows, and key decision points before moving into high-fidelity mockups.

In addition to designing responsive layouts for both desktop and mobile experiences, I documented interaction logic and annotations within Figma to streamline the handoff to developers. This process not only enhanced team alignment but also reduced development revisions and accelerated the build phase.

The wireframes became a cornerstone for the visual design phase, usability testing, and developer sprints—ensuring a user-centered and scalable end product.

Brainstorming

After completing our initial mid-fidelity wireframes, our team paused to evaluate design challenges and evolving project requirements. Collaborating closely with the development team, we identified technical constraints and user experience gaps, then updated our requirements accordingly. These insights led to a refined design direction with improved layout structures, streamlined interactions, and better alignment with both user needs and technical feasibility—ultimately strengthening the final product.

High-Fidelity Wireframes

With our mid-fidelity wireframes finalized and requirements clearly defined, we moved into crafting high-fidelity wireframes in Figma. This phase brought the design to life with polished visuals, brand elements, and interaction states. We focused on accessibility, visual hierarchy, and responsive layouts, while collaborating with developers to ensure a smooth handoff and pixel-perfect implementation. The result was a user-centered, production-ready design aligned with both business goals and technical constraints.

User Testing

Following the completion of the website, we transitioned into the user testing phase to evaluate overall functionality and user experience. These sessions provided valuable insights into how first-time users interacted with the site, helping us assess its intuitiveness, usability, and navigational flow. By observing user behavior and asking targeted questions, we identified pain points that may have been overlooked during the design process, ensuring a more accessible and user-friendly final product.