High Fidelity Prototype

Role

Lead UX Designer

Product

Custom Fishing Rod E-Commerce App

Project Duration

Eight Weeks
5/25/2024 -7/25/2025

Overview

Angler’s Pick Custom Rods has been a self-produced project, where I independently researched, wire framed, designed, and prototype the mobile website.

I began with research, where I delved into the market, user behavior, and competitors to gain a comprehensive understanding of our target audience’s needs. I followed with the wire framing, where I created sketches that offered a visual guide, representing the skeletal framework of the website and its content. I took on the task of creating mock ups where I introduced the early stages of the project in a realistic model of the user interface. Additionally, I created low-fidelity prototypes to test functionality and usability of the website. Finally, I invested time in creating high-fidelity prototypes which where refined versions after the initial testing and review.

Research

User Research Summary:

User research was a fundamental component for the design of the website. Understanding the needs, behaviors, experiences and motivations of the users were valuable results of my individual research. After learning more about the needs users have, the creation of solutions that are both effective and satisfying were implemented in the design.

Empathy/Journey Maps

Empathy and journey maps are vital tools for designing an effective custom fishing rod e-commerce site. Empathy maps help designers understand users' thoughts, feelings, behaviors, and pain points when searching for and customizing fishing rods. By stepping into the users' shoes, designers can identify key motivations, such as finding durable rods tailored to specific fishing styles or ease of navigation during the customization process.

Wireframes

Prototypes

Mockups

After completing two rounds of user testing, the feedback from classmates and peers proved to be beneficial in highlighting functionality problems in my design. User difficulties ranged from low contrast text, dysfunctional navigation, to cluttered design.

After reviewing the comments from my peers I implemented changes in fill colors for specific containers such as the navigational menu, the footer element, the button elements, and some text containers. I also fixed navigational issues by adding elements like back arrows, carousel arrows, and internal footer links.

High Fidelity Prototyping

The high fidelity prototype here shows the final changes to the design. There is high contrast, full functionality, and visual appeal.