A discussion to gather the needs of the customer. These use cases and requirements guide my design choices by defining clear needs and goals for the project.

* I have a smashing example of this process, just not here on the wide open spaces of the internet!

Complex websites have many routes of navigation. A critical part of the process is figuring out where those connections are.

Usually a user can navigate to important areas with a nav bar or menu - but what if they need to bring data from one element to a different part of the site? Perhaps they can click that piece, and some options appear and say
“Hey! Why don’t we click this button and move this over there?”

Users love following their intuition!

After we have a rough idea of where the connections are, we can start to sketch the site’s layout.

Wireframes are a great place to try different layout options, and allow exploration of various user flows. These can be used to talk with web developers about how things might function, and can prevent you from promising things that are out of scope.

I prefer using Axure RP or Balsamiq to create wireframes. Figma has a huge market share, and is Axure’s main competitor.

Stakeholder feedback is - and I cannot stress this enough - super important. Afterall, how can you make something for someone without their input? There are a few ways I like to get feedback from stakeholders:

A design walkthrough! This is a meeting that I schedule with everyone that matters - customers, project managers, developers, etc.
These meetings give me a chance to show off user flows, bring up any problem areas for discussion, and ask questions that I might have run into throughout the design process.

With the feedback I get from these meetings, I can make changes/adjustments to my design that will improve the product for the customer!

This is where the design starts to evolve. With Axure RP, I can turn my wireframes into mid-high fidelity, interactive prototypes!

Typically, I will start by adding in branding elements like colors, logos, icons, and copy. After that, I can begin adding interactive elements like buttons that open/close modals. I can link navigation items to different locations within the mockups, even create forms that can be filled in.

These hi-fi mockups have a lot of benefits. They show my developers exactly how elements are intended to function. They also give stakeholders a glimpse into the future! Most importantly, they get a lot of feedback.
“Hey Ross, why does this do this? I loved this idea, can’t wait to use it! This part didn’t make sense to me, in the field it works this way…”

After each major design change, it’s a good idea to seek feedback again. When a project is nearing its end, I like to ask for approval as well. Basically that means getting the greenlight from stakeholders to pass the mockups along to developers, and begin turning the mockups into a reality!

This is especially important when working on a project with a tight timeline; stuff that is run Agile, for example.