The customer is a company running 5 well established restaurants, under 3 brands, in London and Bath. They offer a selection of fine wine and growers Champagne paired with French cheese and cater to a sophisticated target audience of 35-50 years old, 40% male and 60% female in the affluent Covent Garden area, along with Central London, the upcoming Brixton and Greenwich plus one location in Bath.
KEY PROJECT FEATURES
| Type | M-Commerce |
| Device | Mobile First |
| Industry | Food, E-Commerce, Retail | Tools | Photoshop, Sketch, InVision, InVision DSM, Slack, Miro, WhereBy, Zoom |
Context
As my first fully COVID19 project, this was a remote collaboration project from start to finish. At the time Coronavirus stroke the company’s website was mainly used to gather bookings from customers and there was no e-commerce. Furthermore, the mobile experience was negatively affected by the lack of responsiveness. Due to covid19 lockdown they had to close their shops and needed a way to respond to the crisis by refocusing the business and communication towards a new online shopping approach mainly targeted to mobile users. They decided to promote their food delivery business (one hour delivery) and the online shop (next day delivery on packaged food). This would not have only helped them cope with the difficult times by compensating for their languishing core business (hospitality), but it would have also increased the revenue stream from this line of business thus granting growth in the long term.
Challenges
Their current brand identity was unfit for the new company vocation, it needed to be updated in order to encompass the new online shopping focus. A new m-commerce platform had to be developed accordingly.
The tight budget wouldn’t allow for a bespoke development, so we had to opt for WooCommerce.
Working with WooCommerce templates makes it more difficult to meet specific stakeholders’ requests.
My role
I led a design team (one UI designer and one developer) with both a strategic and hands-on involvement collaborating with the company’s stakeholders (owner and managing director) to completely redesign the company’s website. While doing so I was also responsible for the shift to a mobile shopping experience.
Work
Since the entire experience had to be redesigned we started from scratch by sketching a UX Flow aimed at defining the new sitemap. We couldn’t develop proper wireframes due to budget constraints. So we used Miro to develop a view that could offer a hint at the layout scheme while collaborating with the stakeholders in real time on the development of the full picture.
I then moved to Sketch prototyping phase.
The output was a custom design system which I developed with the new InVision DSM platform which was handed to the design team along with the interactive prototype.
Results
Given the customer’s budget and the constraints involved with the WooCommerce template we decided to skip user research and testing. The customer was happy to have a new and updated look and feel, now fully oriented towards an online shopping type of experience (with a fully featured e-commerce area) while saving money on the overall budget.
Key takeaways
Given the restraints related to WooCommerce and a pre-made template the graphic adaptation activity was fundamental in order to avoid bad surprises for the customer. This was achieved by developing all the design system components through Sketch and sharing them with the customer through InVision along the way. This allowed us to define and adjust the direction in the preliminary phase, when the cost of adjustment is much lower than in the development phase.
The platform is scheduled to go live on September 15th, you can access a preview here.