Making a Low-Fidelity Prototype to Design the Homepage Interface of a Tea Room's Website

I made this wireframe for an assignment in the Design of Interactive Computational Media (CSC318) course at the University of Toronto. For this assignment, I was instructed to create an imaginary cafe or tea room along with its own brand, products and customer base. Subsequently, the goal was to then create a low-fidelity prototype (wireframe) of the cafe's/tea room's website homepage which would appeal to the cafe's/tea room's brand and customer base. A report also had to be submitted, explaining design choices and why they were made to serve the goals of the interface and its usability.

First, I decided to create a tea room brand. The tea room I created is called 'Mayfair Afternoon Tea' and is situated in the heart of Mayfair, a wealthy district in the heart of London. Here is a description of my imaginary tea room from my report:

• ‘Mayfair Afternoon Tea’ is a traditionally themed English tea house situated in the heart of Mayfair (a wealthy district of London, England) that serves traditional English afternoon tea. Afternoon tea is an assortment of desserts and cakes accompanied by various English teas. Since ‘Mayfair Afternoon Tea’ is situated in a wealthy area of London, the interior is kept extremely clean and has a very well decorated/expensive design. The interior slightly resembles a small room plucked from the Palace of Versailles. All cutlery and tea kettles are made of silver, and all glasses are made of crystal. Furthermore, all tables are covered with white cloth, which is replaced after every seating. Overall, the tea house has the feel of an expensive fine dining restaurant, except it only serves afternoon tea.

Then, I began to create the customer base that would frequent 'Mayfair Afternoon Tea'. Here is a description of my imaginary customer base from my report:

• The primary customers of ‘Mayfair Afternoon Tea’ are people who enjoy tea with an assortment of desserts, where the desserts can be sweet or savoury. However, to be more precise, ‘Mayfair Afternoon Tea’ is not supposed to be what many would consider fast and affordable, it is supposed to be a traditional experience of British culture, therefore the primary customer base will consist of people willing to spend a considerable amount of time and money on their afternoon tea.

With my imaginary tea room brand and customer base created, I began the interface design process. I decided to make the main background colour white in order to reflect the cleanliness of the tea room, and to provide good contrast with other items on the wireframe so that even users with colour blindness can see and read everything clearly. I chose the colour royal purple as the main theme colour in order to convey the wealth and opulence of the tea room. Purple is subconsciously associated with luxury and elegance. Also, the tea room represents an experience of British culture. Royal purple is a colour that originated with the British Royal Family (a recognisable symbol of the UK worldwide), therefore I used this specific shade of purple in the wireframe to further solidify the connection to British culture. For textual information in the address and opening hour boxes, I used the colour black to help convey the classy corporate side of the tea-room and to keep optimum readability against the white background, which helps further portray a clean and minimalistic feel. Throughout the whole wireframe, I used two typefaces. For the logo, headings and navigation buttons, I used the Adobe Poetica typeface to signify the neat and tidy environment of the tea room. For textual information, I used the Avenir typeface to promote easy readability and minimalism. The information displayed within the photograph is held in a box with an opaque white background in order to promote easy readability and to prevent a sharp contrast of the colours in the photograph to the white background. The map incorporates light shades of green, yellow and grey to accompany the soft tone of the royal purple theme.

These design choices resulted in the final wireframe, which I created in Xtensio. As evident in the wireframe, I decided to place information of most importance for a tea room on the homepage in accessible areas with plenty of space to avoid clutter. The hours of operation information, contact information and the map with the tea room's location have their own section. The website's menus are placed in a horizontal navigation bar to avoid confusion and also provide easy access. The tea room's logo takes centre stage at the head of the homepage to provide good brand awareness. Finally, it is of great importance for a tea room to entice customers by visually showing their product, so I decided to reflect this in the design by dedicating a large section of screen real-estate for a photo of the tea room's afternoon tea selection. Additionally, this helps the whole interface breathe and maintain an organised structure. See my report for more details.