loading

Show info
Amy Roberts

UFood Grill

Details

UFood Grill

Outcome

High fidelity web page mockups

Period

2015

Client

UFood Grill

Skills

UI design

Challenge

UFood Grill, a growing franchise offering healthy options, wanted a site redesign to align with their new branding, display their menu and promote franchising opportunities.

Solution

A responsive website with a more user-friendly navigation that showcases the menu and works across various devices.

Information architecture

First I mapped out the information architecture, prioritizing and surfacing important content based on analytics from the previous site and user feedback. Because UFood wanted a focus on franchise sales, I created a separate section of the site for that, under “Own a Grill.”

Wireframes

I created wireframes for both desktop and mobile, moving from lower to higher fidelity and mapping them to the different WordPress template files I would be creating.

Visual comps

Home page

I created the final visual design, which was also responsive and scaled down to mobile.

Main pages

I extended this design framework to all of the interior pages of the site.

Franchise site

For the franchise portion of the site, I created distinct theming.

Development

WordPress theme development

I built out the templates, first starting with HTML and CSS, then breaking it up into PHP for WordPress. I used a responsive front-end framework, Foundation, to define small, medium, and large breakpoints so the design could scale.

Custom post types

In order for UFood to easily update their site and for the site to be scalable in the long run, I spent a lot of time also creating a custom backend with custom post types, giving the admin constraints for adding content for different sections, as illustrated below.