OC Online Gun Certificate

Full website redesgn

  • Freelance UX/UI Designer & Web Developer

  • UX Design, Information Architecture, Wireframing, UI Design, Prototyping, Usability Testing, Branding, Client Communication

  • Figma, Adobe Illustrator, Adobe Photoshop, Wordpress, Kubio, HTML

  • June 2025 - August 2025

Problem

The client needed a website that made it easy for users to find and complete certification courses while maintaining trust and clarity. The original site lacked clear navigation, consistent branding, and an intuitive sign-up flow.

Research and Approach

The client’s original site had an outdated interface and poor user experience. Many first-time visitors struggled to understand the navigation and locate key actions like signing up for courses. Existing users frequently complained about the confusing page flow and cluttered layout, which hurt trust and made the site feel unreliable.

I began by assessing the site’s structure and identifying pain points from both a business and user perspective. This included mapping out the current user flow, gathering feedback from the client on common user complaints, and analyzing competitor sites to benchmark modern design patterns.

From this research, I saw an opportunity to deliver a full redesign that not only modernized the site’s visual style but also prioritized intuitive navigation and task completion. My goal was to create a UX focused on clarity, logical information hierarchy, and ease of use across devices.

Old Design Pages

Design Process

Information Architecture

One of the biggest issues with the original website was its unclear and cluttered navigation. The top-level menu had too many competing options, while related content was scattered across different sections. This created confusion for new users and made it difficult to complete key tasks such as course registration.

To solve this, I restructured the website’s information architecture to group content logically and streamline the user journey. The new design introduces a Welcome page with clear orientation tools like a User Journey Map, How It Works, and Testimonials to build trust and guide first-time visitors.

Registration is now broken down into state-specific flows (California vs. Out-of-State), each with a dedicated information page and form page, ensuring users can easily find the process relevant to them. Supporting materials such as Syllabus, Course Materials, and Policies are organized into intuitive categories, while secondary resources like Assemble Video and Live Scan are placed under course materials where users expect them.

This new structure reduces cognitive load, improves task completion, and provides a clearer, more trustworthy navigation system for both new and returning users.

Visual Branding

All logo graphics were designed and created in Adobe Illustrator. As part of the full redesign, I explored multiple branding directions to give the client a range of options. Some were more modern and graphic focused, while others emphasized simplicity and professionalism.

After reviewing the options, the client ultimately chose a minimal text-based logo that aligned with his preference for a straightforward identity. This process highlighted the importance of balancing creative exploration with client goals while still ensuring brand consistency across the website and marketing materials.

Wire-framing and UI Testing

All wireframing and UI design work for the redesigned website was created in Figma. I began with low-fidelity wireframes to map out the new information architecture and user flows, focusing on making course registration and navigation more intuitive. After aligning with the client on structure and layout, I developed mid- and high-fidelity mockups that introduced a modern visual style and consistent design system.

To validate design decisions, I conducted basic UI testing by sharing interactive prototypes with the client and selected users. This helped identify areas of confusion, such as unclear button placement and labeling, which I refined in later iterations. By using Figma’s collaborative features, I was able to quickly gather feedback, iterate on designs, and ensure the final product balanced both user needs and client goals.