john-Long-design-icon
Loading...
Loading...
Loading...

Village Inn and Bakers Square Wireframes

Web/UX Design & Development

American Blue Ribbon Holding’s company is the parent company for both Village Inn and Bakers Square restaurants. While employed at a digital marketing agency located in Lakewood, Colorado I embraced the task of beginning their website redesigns with new and original UX/UI wireframe designs that would eventually serve their respective design teams to direct intended layout and functionality.

The Problem

Both Village Inn and Bakers Square’s current websites were becoming dated and the marketing directors for each respective division engaged us to begin work on a redesign starting with UX/UI design wireframes for the intended layouts and functionality for the new sites. Both sites would largely match in terms of layouts and content with minor differences between the two sites. The companies wanted a more modern approach to their website that would be fully responsive and allow for dynamic imagery based on time of day, favorite location search features and geolocation services. Additionally, the companies had to meet WCAG 2.0 Compliance and were

The Solution

I worked closely with an external development team to develop detailed wireframes that detailed all the intended layouts and functionality for all required templates. Meticulous notes were kept outlining the exact functions of each template page, including dynamic hero imagery based on time of day, specific drop-down functions, location search, and geolocation functionality as well as any other modules that needed further explanation. These wireframes served to inform the designs and overall development.

Drag the slider left and right to compare images.
Wireframe
Mockup
Using the slider you can view how the wireframe design served to inform the design and functionality of the fully developed site.
Drag the slider left and right to compare images.
Wireframe
Mockup
Using the slider you can view how the wireframe design served to inform the design and functionality of the fully developed site.
Drag the slider left and right to compare images.
Wireframe
Mockup
Using the slider you can view how the wireframe design served to inform the design and functionality of the fully developed site.