My Design Journey

Welcome to my UX Design Portfolio. Explore my design process through these selected projects, each showcasing the evolution from initial concept to final implementation.

Representative Finder Mobile

A user-friendly application designed to help people easily find who represents them in government, as well as find their voting location.

Low Fidelity

Wireframe of Representative Finder Mobile

Wireframes

Early black and white designs that focus on the core functionality of the app. This wireframe features two search bars, one for searching by zip code and one for searching by representative name. It also has a "recent news" section with a slideshow menu. Lastly, a political test is located at the bottom so users can figure out where they stand politically.

  • User journey mapping
  • Basic layout structure
  • Core feature placement

Mockups

Mockup of Representative Finder Mobile

UI Mockups

Added color and changed the font. The "take the test" section was removed after interviewing users. Something to note is that the navigation menu slides in from the left side of the screen. The "Recent News" section was improved so headlines were more visible, per user request.

  • Color scheme implementation
  • Typography selection
  • Component design

High Fidelity

Final Design of Representative Finder Mobile

Final Product

Polished interface with complete interactions and animations. The navigation menu now takes up the entire screen, and the color scheme was updated to reflect a more "American" theme. After the last round of user testing, several changes were made, including "bias ratings" on news sources, a filter menu for the news, and a notification button for representatives.

  • Interactive elements
  • Responsive design
  • User testing refinements
View Interactive Prototype
View Case Study

Representative Finder Desktop

A website focused on providing a comprehensive listing of all representatives in the United States, based on the user's location and preferences.

Low Fidelity

Wireframe of Representative Finder Desktop

Wireframes

The title and two search bars take the main focus of the home page. The search bar on the top is for searching by zipcode, and the search bar on the bottom is for searching by representative name. The navigation menu is located at the top of the screen, and the "recent news" section ultizes boxes to display news headlines.

  • Information architecture
  • Website layout
  • Homepage design

Mockups

Mockup of Representative Finder Desktop

UI Mockups

Styled interface with focus on product presentation and user interaction. Using previous user feedback, the color scheme was kept the same as the mobile app. The "recent news" section was updated to include the logo of the news source, a "check bias" button, and the news headline.

  • Visual hierarchy
  • Product card design
  • Navigation system

High Fidelity

Final Design of Representative Finder Desktop

Final Product

A later iteration of the desktop website. The color scheme was updated so there's a different color around the "recent news" section. This is because users were having difficulty reading it. There was also a "Find Voting Location" section added to the bottom of the homepage, as well as a footer.

  • Website layout
  • Color scheme
  • Footer
View Interactive Prototype

The Escape Room "Clue-Meister" System

A simple user interface for a system used to send automated messages to players in an escape room game. This project was designed for a real escape room company, and to be used on mobile devices.

Low Fidelity

Clue-Meister Wireframes

Wireframes

This wireframe was designed after interviewing employees for the company. The buttons shown on the screen are the most important functions for running an escape room. The section in the middle is an interactive flowchart of the game for tracking group progress, and the bottom section is pre written messages the employee can send to the group.

  • Content organization
  • Step flow design
  • Navigation structure

Mockups

Clue-Meister Mockups

UI Mockups

A color scheme was added based on the company's branding, and the navigation menu was simplified.

  • Color scheme
  • Navigation menu
  • Flowchart integration planning

High Fidelity

Clue-Meister Final Design

Final Product

The flowchart was added to the middle of the screen, with an indicator of when the next clue will be sent automatically. The recommended messages were improved, so the button looks more appealing. Lastly, the room logo was added to the top of the screen.

  • Flowchart implementation
  • Recommended messages
  • Room logo
View Interactive Prototype

Pediatric Dental Associates Website Redesign

During my UX design internship at CCG, I led the wireframing process for the Pediatric Dental Associates website redesign, focusing on improving user flow and accessibility for families seeking dental care. The project allowed me to collaborate with stakeholders, conduct user research, and translate insights into intuitive, mobile-friendly wireframes.

Low Fidelity

Clue-Meister Wireframes

Wireframes

This wireframe was designed after interviewing employees for the company. The buttons shown on the screen are the most important functions for running an escape room. The section in the middle is an interactive flowchart of the game for tracking group progress, and the bottom section is pre written messages the employee can send to the group.

  • Content organization
  • Step flow design
  • Navigation structure

High Fidelity

Clue-Meister Final Design

Final Product

The flowchart was added to the middle of the screen, with an indicator of when the next clue will be sent automatically. The recommended messages were improved, so the button looks more appealing. Lastly, the room logo was added to the top of the screen.

  • Flowchart implementation
  • Recommended messages
  • Room logo
View Interactive Prototype View Case Study

Contact Me

joshuabrad03@gmail.com

205-585-5935

Download Resume