Assignment: GBDA project – website redesign
Category: UX, UI, design
Timeframe: January 2019 – April 2019

Princess Cafe website redesign

Website redesign

The ask

This was a 4-member group project in which we selected a local small business that had, in our estimation, a poorly-designed website. We were expected to conduct research and analysis to frame our own recommendations for site redesign, content choices and functional requirements. Website design, including content creation was a key element, as was developing the responsive site prototype using the HTML and CSS coding language that was part of the course. We chose The Princess Café, because it had a physical presence where we were able to gain a strong understanding of the business its unique offering and its customers.

The deliverables

  • Research and analysis
  • Website design (UX and UI)
  • Content development – text and images
  • Prototype coding
  • Pitching and presenting the analysis and recommendation

”Great coffee. Great food. Great place.

Drivers

Based on our analysis, we found that The Princess Café to be a small local business that provides a selection of quality products ranging from premium coffee to freshly made creative sandwiches and soups. Located in an area of Waterloo that’s central to students, they are surrounded by a number of competitive cafes. Unlike these other cafes, The Princess Cafe’s website appears quite out of date and does not reflect the core difference of the restaurant. Anchored in a sustainable ethic, The Princess Café focuses on locally and ethically sourced ingredients. The eclectic interior has a relaxed vibe that’s reinforced with an eclectic array of vintage furnishings. In our Instagram-focused society, the café provides great material for content. None of this essence comes through on their site, which is entirely text based and repetitive in content.

We identified the following areas of focus for the website redesign:

  •   Two key target audiences: first-time/potential visitors and catering clients
  •   A completely overhauled user flow and navigation to minimize click and optimize business results
  •   A visual design that reflected the unique character of the café and its philosophy
  •   Room to grow – identifying specific areas for future expansion to the site
Part 1

Site structure

Based on the audience analysis, we then assessed what information would help drive business, and what business would help drive profits. In particular, we assessed the two key audiences: new restaurant visitors and catering clients – to ensure the needs of both were facilated through the site architecture and content.

My contribution to this phase was:

  • Competitive research to determine key information expectations
  • Menu and social media research to better understand The Princess Café’s actual offering
  • Site map and structure development, with key user flow analysis and annotation
  • Page wireframes
Part 2

Site design

The Princess Café has a great aesthetic and offers many visual frameworks to echo on the site. In my site design, I wanted to ensure the digital space reflected the very unique flavour of the physical space to entice first time visitors to come to the café. My vision for food presentation was show it from above, mimicing the eye view of the customer looking down at the plate, cup or bowl. Textures were also important. I incorporated woodgrain, tile textures, and “chalk” line work for content dividers and icons to reflect these elements from the physical space.

My contribution included:

  • Design and visuals research
  • UI design and page layout
  • Image assets and icon creation
  • Site prototype copy
Part 3

Prototype coding and pitch support

A vision only takes one so far. Much work is needed to bring it to life in execution. While we could visually present our site design using static mockups, the point was to demonstrate how the site would function, and how this would be an improvement for the business. For this we created a functioning prototype and pitched the site to our class.

My contribution was specifically:

  • Coding (including research and trouble-shooting)
  • Presenting the design solution as part of the “pitch” team

Outcomes

While this was a course assignment, we did reach out to The Princess Café to offer them our work. With limited marketing resources, the business focuses its marketing efforts on the Twitter, Instagram and Facebook accounts, counting on these to establish a digital presence, and is not focusing on its website as a result.

Through this project, I learned to look more analytically at competitive context and think through the various considerations for different target markets. The convergence of the physical and the digital was also central, and this allowed me to experiment with the graphic design and think through the role of this in attracting business. In the development phase, we also needed to ensure the site (prototype) functioned the way we envisioned, and I proactively researched how to accomplish this.