Tiller + Grain

CASE STUDY – 2021

Website Redesign

OVERVIEW

Created in 2019 by Clair Dowling, Tiller + Grain is an award-winning daytime café in Dublin 2.

Having found a loyal customer base foothold in it’s first year, T+G was heavily affected by the pandemic but prevailed by way of a diversified product offering. T+G has evolved significantly since it opened, and so the website needed a rehaul to bring it more inline with T+G of 2021.

MY ROLE

Research / Testing / Strategy / Copy / Design & Build (WordPress)

Shout out to Conor McGrath for development help on the menu.

THE PROBLEM

The T+G website was lacking the vibrant energy of the café and wasn’t doing justice to the product on offer. There was also a confusing and repetitive structure with verbose copy.

The overall goal was to develop a more coherent site that felt energized, gave clear product overview, and allowed customers to easily navigate to order food.

CONSTRAINTS

One of the main constraints of the project was the ordering system (‘Menuu’) used by T+G. It allows for little site integration or customization and so this project was focused on the website UX up to the ordering point.

Project budget was limited with a turnaround time of ASAP. The T+G team resources were stretched, and so most project decision making came down to me with usability testing and team check-ins being the guiding lights.

THE PROCESS

STAKEHOLDER INTERVIEWS

In order to better understand what Clair and team would like from this project and what their vision was for T+G I held informal on-site interviews. Much of Clair talked about was in relation to increasing awareness around food education and raising her public profile – how this was tackled has been broken out into a second case study.

Overall the desire from the team was to have a website that was structurally more concise with current offerings (in particular bakery) being more obvious.

INITIAL USABILITY TESTING – CHECKING ASSUMPTIONS

Three remote usability tests on the current site with people who hadn’t seen it before confirmed the issues with the confusing structure and repetitive, verbose copy.

It also confirmed that displaying current menu offerings (Current salads/ meats/fish) alongside the jump-off points to the Menuu system was an area that would need particular attention.

“I’d like to know some of that, but not ALL of that..!”

– Ciara
(initial usability testing)

CUSTOMER SURVEY

To start capturing general customer feedback I targeted people who had ordered a weekend box on the previous weekend with a short feedback survey. Response rate was good (27/35) – I kept the questions quite open and overall feedback was very positive.

I reframed the feedback in terms of keywords relative to T+G which revealed what these customers valued most about T+G, the results providing excellent potential for areas to lean into when forming Design Principles.

“What’s your favourite thing about T+G?”

UX PROJECT INTERNAL QUESTIONNAIRE

I formed an internal UX Questionnaire that collated our project vision, project goals, customer outline, user tasks/scenarios, and KPI’s.

This served as a reference point I could share with the team and one I could refer back to during the project. I also provided the team with a more digestable version that included our guiding Design Principles.

RESTRUCTURING THE COPY & INFORMATION ARCHITECTURE

Once I reviewed the copy and removed areas of redundancy and repetition I had a more digestible amount of copy around which to iterate a new information architecture.

Although the copy would need work in terms of tone and content, it would be easier for the team to give input once the words were in situ on wireframes, and so I moved forward to sketching & wireframing using a structure that could be easily adjusted after testing.

PROTOTYPING

SKETCHING + WIREFRAMING

After sketching out ideas for new site layout some features I included in the initial prototypes were:

Team profile page

Comment Box – The action of actively requesting feedback was received very positively, and so this was a quick way for people to give their two cents

Home page carousel section that showcased product offerings.

Quick links on the Menus & Ordering page that let people jump to what the were looking for

The Glossary – a page where the less familiar items on the menu are explained (covered in more detail in second case

Team feedback on the med-fidelity prototypes was positive however with the time-crunch the team was under it was clear I needed to get a more finished looking prototype in front of them in order to more constructive feedback

I was also limited in terms of time and budget as to how many remote usability tests I could do, and as one of the main project goals was capture the personality of the cafe experience I needed to expedite a refreshed visual design.

USABILITY TESTING

Once Clair approved the visual direction I moved forward to usability testing and lined up two highly valued customers that knew the cafe well and were advocates of the business. With overall site structure and clarity of the ‘Menus & Ordering’ page being the main testing focus, the tasks I set these two customers was:

• Locate the current Weekend Box menu and proceed to order

• Locate the current daily salad selection and proceed to order.

• Investigate the site as a whole (to gauge reaction to discovered new features)

As expected there were issues with the ‘Menus & Ordering’ page where the Daily Menu offering was visible alongside the jump-off points to the ordering system – participants tried to click on the menu elements to order them as opposed to clicking on the ‘Order for Collection’ button.

The IA needed further adjustment as the ‘Things We Do’ page was deemed to have repetitive content due to some elements (weekend boxes, picnic bags) featured both there and on the Menus & Ordering page.

The initial two CTA’s on the front page were also deemed too similar

The opening hours and café location needed to be immediately visible on page load

One element that tested well was a pop-up part of the Daily Menu labelled ‘show me current salads’. As it was a pop-up the content wasn’t deemed clickable, and so moving forward the fully laid out Daily Menu was removed in favour of introducing clickable pop-up menus integrated into the different product sections (Daily Menu/Picnic Bags etc)

I re-tested an updated prototype with another three participants iterating both functionality and visual design as I went which confirmed having current menus as clickable pop-ups as a workable format and deemed the site usable enough to take live

OUTCOMES

Due to being built with WordPress, some interaction and visual elements differed slightly from the prototype as I worked with the constraints of the WP system and my own development abilities, however functionality essentially remained the same.

The site is live now and while initial feedback has been very positive, it is essentially an MVP site with multiple areas that need further work including:

Improvement of the bakery offering/ordering section

Further development of the footer section to improve the layout and include more elements including newsletter subscription, social media CTA’s etc

Improvement of the copy in general in particular in relation to SEO

Implementation of evergreen content covered in the second case study

Further usability testing in addition to larger customer survey call-outs.

Once the pandemic situation improves, this will allow for more favourable conditions both physically and financially for in-person usability testing, product development focus groups and the opportunity to do a more in-depth customer journey analysis