My Process

1. wireframes

I meet with the business users to gauge their needs and wants for the application. I use user personas/empathy maps to try to get a feel for the environment the users work in. For example, my users work in a busy and ruggedized building which I must consider while designing. After collecting the needs from the users I begin the wireframing process.

Wireframing extracts a concept into a visual with minimal, if any, design — intended to convey a proof of concept for the user to seamlessly follow.

My wireframe proof of concepts convey the users’ needs into a storyboard format. I avoid granular detailed design and color during the UX process.

Solidified wireframes ensure that the front-end developers have a thorough understanding of the users’ expectations.

Click here to view project examples of my wireframes

2. HIGH-FIDELITY

HiFi’s give much more detail than wireframes, showing what functional elements on the page will look like. I provide developers specs for the IU including: elements’ colors, dimensions, text font & size, padding width, etc.

My high fidelity designs provide developers a platform to build a fully functional application or in some cases, a piece of an application.

When designing my high fidelity mockups, I utilize company standard designs which adhere to WCAG Compliance. By following these design standards, we create a consistent flow for all users company wide, which aims to standardize and improve usability and accessibility.

Click here to view examples of my high-fidelity project work

3. User Flows

I create a user flow to walk developers or users through screen communication.

I do this by giving brief descriptions on the page’s key functionalities beneath each screen.

Using the HiFi mockups with in depth detail will show the user flow as the app will appear in production, giving a realistic visual and description of the end product.

4. clickable prototypes

My clickable prototypes are intended to provide the user the ability to click on what appears to be fully functional elements and the tool used (in my case Adobe XD) will display what will appear once the application is fully developed.

This has allowed my business users to gage how well the flow of the application works with an interactive experience. Providing a clickable prototype allows for a more accurate critique on designs.