Skip to main content

From Wireframe to Wow: Our UX/UI Design Process Explained

Blog Post Meta

Web Design & Development

From Wireframe to Wow: Our UX/UI Design Process Explained
Lauren Pinckney

Author

Lauren Pinckney

Job Title

UI/UX Design

Time To Read

6 minutes to read

When it comes to creating websites that not only look beautiful but also work beautifully, design is where it all begins. At DuBose Web, our UX/UI design process blends creativity, strategy, and collaboration to build experiences that make a lasting impact.

We sat down with Lauren, our UX/UI Designer, to talk about how she approaches design, what inspires her, and what makes great digital experiences stand out.

What’s your favorite part of the UX/UI process and why?

After the initial client meetings and strategy sessions, my part begins—I get to start the design from scratch. I explore design options, work through the functionality, and figure out how all the components will come together and look.

What kinds of questions do you ask clients to uncover what they really need?

Some of the questions that help us when talking to client include:

  1. Who is your primary target audience for the website?
  2. Do you have any existing style guides or guidelines for your brand or website?
  3. What are your main goals with this website redesign?
  4. If you could pick three words to describe your brand what would they be?
  5. How do you want your audience to 'feel' when they access your site?

What’s the purpose of a wireframe, and why is it such an important step?

A wireframe is a strategic and visual blueprint that maps how users move through a website to achieve their goals. It allows me, as a designer, to focus on structure, flow, and functionality before introducing visual elements, ensuring every step aligns with user needs and business objectives.

Ultimately, it bridges the gap between user behavior and design execution, creating experiences that are intuitive, purposeful, and user-centered.

What is a mockup and how does it differ from wireframes?

A mockup is a high-fidelity visual representation of a website that shows what the final design will look like—including colors, typography, images, and layout—but without full functionality. Mockups help communicate the visual direction of a project before development begins.

While a wireframe focuses on layout and structure, a mockup focuses on visual design. Mockups are static but visually detailed, sitting between wireframes and the final developed site.

Can you describe your process for mapping user journeys or flow?

Our process starts in the beginning with our discovery meeting with the clients, asking them those questions above and more to really dig deep into their users, their behaviors, and their goals. Then our strategist puts everything together in an organized package and passes it to me where we use a really cool tool, Octopus, that helps me to visualize the user journey and site map, identifying any holes, and what components will be used that need to be designed. Its also super easy to share it with our dev team and clients once complete.

How do you collaborate with developers to ensure designs translate perfectly on screen?

Collaboration with development starts before design even begins—we discuss any functionality concerns upfront. Once the styling options are designed, we meet again to ensure nothing is overreaching. We meet a third time after the client approves a version and the full website is mocked up, right before it goes into development.

As you can tell, we meet and collaborate a lot! But it's more than just meetings—we're in constant contact through Slack or Figma comments, making sure we're aligned every step of the way so nothing gets derailed.

How do you keep accessibility and performance in mind while making things beautiful?

I like to focus on clean and thoughtful design choices, taking consideration to things like color contrast, legible typography, and flexible layouts — so that the design shines without excluding anyone or slowing them down. I get a lot of help from my developers with this as well.

What design tools do you love using most right now?

We made the switch over to Figma a few years ago and it’s the best. I am constantly learning new ways to do things (thanks to our dev team), and new ways to really push the design, its so customizable. They always have updates that just make the platform so easy to use, especially for that really important collaboration with development. We wouldn't be able to a web project without it!

Some honorable mentions are Octopus (like mentioned before) for user journeys and wireframes, Dribbble for design research, and Adobe Stock for stock photography.

How do you know when a design is done?

Sometimes I don't think the design is ever truly done—there are times when it goes to dev and we meet to brainstorm new ideas, which means I need to tweak something deeper in the process. Most of the time, though, it's when I feel confident enough about a couple of designs to show the client and I can finally stop tinkering with them.

How do you feel when you see your design go live for the first time?

Proud and relieved. Our dev team is so talented and really makes the designs come to life each time. I feel so grateful and excited giving the client a website in the end that they love and are proud to share.

How do you stay inspired and creative day after day?

I'm constantly gathering inspiration for new sites and exploring fresh ways to design components, so I take time before each project to research across multiple design websites.

When I need a breakthrough, I'll try rubber ducking—talking through my ideas out loud with another designer. In my case, that's usually our Creative Director and VP, Julie. It helps me gain new perspectives and clarify my thinking.

I also give myself breaks when needed, allowing space for reflection and recharging. Most of the time, working on another project or task helps me refocus and approach the original work with fresh eyes.

If your design process had a “motto,” what would it be?

"Design in never done—it evolves."

This one feels personal—it's something I really try to remember. I'm always growing, evolving, and pushing my designs to the next level. With every new project, I try to do something fresh or different, spending time researching and benchmarking to make each site “pop” and feel unique.

At DuBose Web, design isn’t just what we do—it’s how we think. From the first wireframe to the final launch, Lauren and our team work side-by-side with clients to turn strategy into something you can see, click, and connect with. Because great design doesn’t just look good—it feels right for the people using it.

Ready to reimagine your website?

Let’s start with a conversation about your goals, your audience, and how thoughtful design can bring it all together.

Start the conversation →

Back to top