The Magic of Wireframes + Thoughtful Website Design

Lela Barker

This blog is part of an ongoing peek inside the process of rebranding Lucky Break Consulting. You’re invited to catch part 1, which explores how I learned to really listen to my customers and develop a website built especially for them. Part 2 details how to use Pinterest to create brand mood and inspiration boards. Part 3 offers a backstage tour of the logo development process. Thanks for following along!

Logo? Check.
Color palette? Check.
Fonts? Check.

Now that Sharon of Ink & Mortar had put the polish on my new visual identity, it was time to put those elements into action and website development. I took additional help from this seo blog regarding the SEO aspect of my website. This was my favorite part of the redesign process because it was the first time we really breathed life into all this – the first opportunity for me to see how all of the pieces fit together. Sharon suggested that we use a wireframe process, which was totally new for me.

WIREFRAME SKETCHING

Wireframes are a set of website blueprints designed to arrange elements before the design pieces are added.  In more than a decade of entrepreneurship and having built a half-dozen sites from the ground up, I was stunned that I’d never thought of website design/development this way, but I have come to adore the process.

Wireframing allowed me to look at the functionality of the future Lucky Break website design without getting bogged down in design details. I worked hard to get inside the mind of my customer to thoughtfully and intentionally develop intuitive site navigation and logical “flow” through the site.

I told Sharon what pages we needed for the new site, and she began by creating quick + dirty sketches of 3 different web concepts. We hopped on a call to discuss each one, and I made some final decisions about the placement of elements and the overall user experience.

1
2
3




Once I made the final calls that determined our direction, Sharon began the process of building out the site and layering the graphic elements onto the wireframe structure. She used an amazing website development tool called Invision, which allowed me to move through the design as if it were live, leaving comments on each page and collecting feedback for Sharon. Sharon patiently waded through seven (!) rounds of revisions, because I am nothing if not mind-numbingly thorough.

BUILDING THE SITE ON THE INVISION PLATFORM

Though the basic skeleton of the website had been nailed down through the sketching process, there were still key decisions on the table once Sharon loaded her design into Invision. For example, on the Business Tools page, would it be best to have:

a) Two products per row, with descriptive text beneath graphic images.

b) Two products per row, with the descriptive text incorporated into the graphic images.

c) Four products per row, with less text?

ShopPage_Bottom_600

You can click through to my Business Tools page to see what we ultimately decided. We were still thinking through the home page organization a bit, too.

HomePage_Bottom_600

But the watercolor was in, the gold foil was adding some sparkle and Sharon dropped in placeholder imagery until the final images were delivered by my photographer.

HomePage_ Top_600

REFINING THE DESIGN

Each design round was rendered in Invision and I simply clicked the design to leave notes for Sharon.

Comment2_600
Comment3_600
Comment4_600

Each round of revisions brought us closer to the final design and I do believe that Sharon and I enjoyed a cocktail (or three) when the website design was passed to Padraic of Ryan Design Studio in early December. This is the fifth website I’ve built with Padraic over the years and I am utterly convinced that Padraic can make a site do any damn thing you please. He’s kind of magical that way.

FROM WEB DESIGN TO WEB DEVELOPMENT

Padraic received layered PSD files from Sharon and began plugging the design into our existing Pinnacle Cart (the e-commerce platform we used + adore here at Lucky Break). He included lots of custom coded features, including:

  • A fully personalized Virtual Classroom into which we can load curriculum tailored to each of my clients
  • Multiple user categories on the backend for more efficient client management
  • A custom 404 page; page-specific, embedded email opt-ins; custom forms for speaking engagement requests and my private mentoring packages.

Once Padriac built the site and added the requested customizations, Melissa (Lucky Break’s Operations Manager, also known as “my right hand” and my “sanity keeper”) went through 5 (!) rounds of revisions, capturing hundreds of petite screen shots of things that were awry on our wide screen monitors, on the regular-width monitors,  on laptops and iPhone and Androids and tablets.Ever patient, Padraic fine tuned and again and again until the last details were positively perfect in every way.

The launch of this site felt Herculean in so many ways but I am bursting-at-the-seams proud of all the tremendous effort that went into making it happen. My thanks to Sharon, Padraic and Melissa for digging deep with me. There’s one more member of the #DreamTeam that you haven’t met. I’ll introduce you to Lucas Brown, my photographer, next week as I give a sneak peek at the mechanics + styling of the photo shoot that yielded the imagery used throughout the site.

How you ever used wireframes? If so, what did you think of the process? If you haven’t how did you lay out the design + structure of your website? Drop a comment below.. I’d love to hear about it!

About the Author

Lela Barker

Lela Barker hails from the deep-and-dirty south (ATL, represent!), where she spends her days helping makers and product designers navigate the pitfalls of product pricing, brand development, and wholesale strategy. She launched her apothecary brand in 2003 and bootstrapped the hell out of that little business to cultivate a portfolio of 1500+ stockists worldwide, generating $12million in revenue and establishing successful distributorships in the Middle East, EU, Scandinavia, and South Korea. Lela is the keeper of a well-worn passport and the maker of the finest lemon meringue pie you’ve ever put in your mouth.

2 responses on “The Magic of Wireframes + Thoughtful Website Design

  1. The Nova Studio

    Yes, our designer opted to use wireframes, also! The only problem we ran into, though, was sometimes the designer put things into the wireframe that the developer she choose wasn’t quite sure how to do – so I think having a REALLY good developer is vital to the process. Sounds like you had that portion locked down!

  2. Culturaldetour

    I love being able to peek into Lucky Breaks rebrand. You and your team of wizards made this site one of my favorites to visit. I come to just marvel at it’s beauty and it’s not even mine! Watching the process unfold is very inspiring and helps us newbies understand how all the pieces fit together. I am SUPER ridiculously excited to work with Ink and Mortar and Padriac. EEK!

Leave a Reply

Your email address will not be published. Required fields are marked *