AW 19: Creating a wireframe

In this lesson task, we’re using the compiled list of 10 questions for a briefing form, replying to those questions, and creating a site wireframe. The wireframe could be low-tech or hi-tech, but the choice should be explained.

I choose to concentrate on the upcoming course assignment, where we are creating a menu page for a restaurant — I picked a pizza restaurant. My client is the restaurant’s owner, and I am trying to place myself in his situation while replying to the questions below. For my course assignment, I will use a real restaurant in my hometown as my (fictitious) client, simply because I find this adds interest to the task.

pizza menu fictitious client

The brief

  1. Who are your competitors, and how do you differ from them?
    • a handful of other pizza restaurants in town; one is more of a kebab place — their pizzas have döner kebab topping — the others all belong to nationwide franchises
    • has Italian chef; pizzas and the pasta dishes are made from scratch using our own recipes
    • more authentic than the others?
    • possibility to change things around fairly fast to accommodate the guests’ desires, by not being part of a franchise
  2. What is your unique selling point? What actions do you want visitors to take on the site?
    • USP: authentic Italian dishes
    • CTA: book a table
    • CTA: put in an order for take-away
  3. What is your deadline for completing the site? How big is the budget?
    • soon summer, the site must be up and running in time for the expected stream of tourists
    • covid-19 travel restrictions, domestic vacations are the only option and our town is in the main area for summer vacations
    • able to adjust the budget accordingly
  4. Do you have any colour preferences? What should the look and feel of the website be?
    • a pizzeria look of sorts, but avoiding the typical checkered white and red table cloths and other design choices often seen in such establishments
    • decorated in an earthy palette; terracotta orange, bright and dark nuances of spruce green, Aegean blue
    • the waiters wear black polo shirts
    • doesn’t have a brand style guide
    • a Scandinavian design style — spacious yet solid, “clean”, modern (the menu items themselves will provide the Italian aspect)
    • family business: give an impression of not being too professional and impersonal, the vibe should be more of a homemade style — see the logo
  1. Features and technology, maintenance
    • on a daily basis, the website will be maintained by staff who is not too technically versed; a browser-based dashboard is preferred
    • not much of a need to change things around during the year, perhaps swapping the menu and adjusting information about opening hours
  2. Is this a business, organisation, governmental department?
    • family business
  3. Will you need to collect and save information about your visitors?
    • needs to save information about the clients’ names and phone numbers
    • will use third-party payment options
  4. Who will be hosting the website?
    • has a website now
    • don’t know anything about the technical specs, the current website is powered by WordPress so at least a database option
  5. Is the website to be built from scratch, or is there an existing website that will serve as the starting point?
    • current website is very bare-bones: a welcome page, a contact information page, and a page with information about which courses are on the daily offers list
    • the menus are PDF documents
  6. How large is the business, would involving a number of employees be beneficial?
    • employees have no saying about the design and features

The wireframe

For this client, I chose to use a high-tech tool for the wireframe; Adobe XD. I like to use large sheets of paper and post-its for the first round of planning, but as the client will not be part of that session I feel that it’s more professional to present them with neatly lined up boxes on a screen rather than pencil sketches or paper stacks.

I chose to work with grey colours, something which I expect is not in their mind at all when it comes to design choices, in order to emphasize that this is just a skeleton and not the actual design. This is, in my eyes, the most difficult aspect of presenting a computer-generated wireframe for a client — you don’t want them to discuss the colours or other “design” choices at this stage, but for the untrained eye a computer made wireframe sketch will often be mistaken for a design mockup.

The existing website has the following structure:

  • Frontpage:
    • short intro/ about us
    • info on opening hours plus two links to a separate page with opening hours
    • information on home delivery
    • information about a spice they sell
    • contact information
    • map
    • video presenting the chef
  • Page: about us, including some random information about a seasonal menu for Christmas
  • Page: opening hours
  • Page: menu
    • link to restaurant menu (pdf)
    • link to the takeaway menu (pdf)
  • Page: deal of the day/ daily offer (menu item for NOK 100, one for each day of the week)

The wireframe for the re-designed site is made mobile-first; my reason for this is that the main group of clients will be tourists and they will most probably be on their phones when looking for places to eat.

I chose to gather everything but the daily offers from the current site on the front page. Opening hours, which most of the year can be compressed to three lines of text, will be a global element at the very top of each page of the site. I put each menu — restaurant, takeaway, daily offers — on its own page and expanded the site with a booking form for table reservations. The menus will be displayed in full and not as pdf documents, and the takeaway menu page will have an ordering functionality.

The new page structure will then be:

  • Frontpage:
    • CTAs for the menus and a booking form
    • map with location
    • about us, including the video presenting the chef
  • Page: daily offers
  • Page: restaurant menu
  • Page: takeaway menu (including that spice) with ordering functionality, info on home delivery
  • Page: booking form for table reservations, contact information

Disclaimer: The takeaway menu page and the booking form page are not laid out in detail, I want to land the new page structure with the restaurant owner before proceeding with details. The 10 questions have a section on design (colours, look&feel), but to elaborate on that in the sketch is not within the scope of this task. 

The clickable prototype can be viewed here.

Wireframe prototype
Wireframe prototype

0 Comments

Submit a Comment

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.