Elevate, or design from scratch, an e-commerce website for a local business.
Not having a website is practically unheard of these days, even for small businesses, who, more often than not, have a one page site with contact details and little else. For small business owners, being able to sell products online is a dream but few have the time or know-how to set up an e-commerce website. In these uncertain times, e-commerce has become a lifeline, especially for those in the hospitality industry.
Campagne are a fun, cellar-style eatery in Toulouse, specialising in locally sourced, organic cheese and meat platters, paired with wines from regional vineyards. Their website consists of one page, which tells you where to find them and a link to a mouth-watering instagram account.
Owners, Patrick and David, are keen to have a website where you can taste with your eyes. Aside from in-store diners, they get lots of enquiries from people who want to buy some cheese or a bottle of wine to have at home and so an online selling facility would cater to these customers and expand their reach. They are also extremely passionate about what they sell and would like to use their website to promote local farmers and producers. They emphasise that their customers would like to order their products to consume at home and the demand has increased rapidly during this year’s covid lockdowns. It became clear that our goal was to make a user-friendly online shop that showcases local produce and reaches more customers.
Our goal was to make a user-friendly online shop that showcases local produce and reaches more customers.
Now that we had established our goal, we decided to conduct competitive analysis to see what the e-commerce landscape is like amongst restaurants in Toulouse. We settle on five competitors who have similar offerings in the same price range. Of these five competitors, only one was offering a similar delicatessen delivery service where product information was linked to third party websites. Value proposition also indicated that a nice additional offering would be to send items as gifts or have the option to create a gift hamper.
The next step was to conduct user research. Who would be a typical customer? A typical Campagne customer is above all else, a gourmet enthusiast, who wants to know where their food comes from and enjoys combining flavours. Their audience spans a wide age group but we thought we would hone in on people who are inclined to enjoy a platter with friends in the evening, perhaps without having to consider family obligations.
So we create Claire. She is 32 and has a job at Toulouse university. We create a scenario where Claire is “saved” by delivery from Campagne.
Our focus then turned to the architecture of the site. How would the site be mapped out? We also created and analysed user flows and created a rather large and complicated user flow chart. It was important to us that the customer would be able to see suggestions and easily add these to their shopping cart. They would also be able to create customised gift hampers. It was essential to think this step through properly in order to make the simplest and most efficient flow for the customer, given the amount of options available.
With building a midfi prototype in mind, we sketched up some lofi prototypes and put them to the test. We also started looking at ways to add an exciting edge to our e-commerce website. We wanted to add an extra feature that would elevate the user experience and elevate the brand. After brainstorming, we settled on a clickable platter that would be placed on the landing page. The platter would showcase seasonal offerings and users can click on each item on the image and immediately see product details on a pop-up window, with an easy add to shopping cart or wish list option.
We also looked at the product page display and decided a split screen layout with static photos on the left side and scrollable information on the right side, allowing users to maximise “tasting with their eyes”, whilst obtaining detailed information on the product.
We tested out a low/midfi prototype and identified some missing features in the flow. It also became apparent that it was difficult to go back to certain pages in the process, which could be a potential pain point for the user.
With this in mind, we made adjustments and proceeded to create the midfi prototype.
As it was time up on the project, we considered the next steps. We had created a moodboard to show potential branding on the site, with the desired minimal branding and “taste with your eyes” request from the owners. We would have liked to conduct further user testing and usability testing in order to refine and develop a hifi prototype to present back to the client and pursue development. And also see our creation in its full glory!
In retrospect, we would have liked to spend more time refining our lofi prototypes. Due to time constraints, we started to build the midfi prototype whilst waiting for feedback on the low fi and this meant that a lot of time was spent adjusting the midfi afterwards.
On a practical level, our presentation was impacted by small fonts used in the program MIRO, making it difficult to present our analysis and construction of site maps and user flows.
Project Scope and Constraints:
We had just under a week to complete the project to midfi prototype stage. It was emphasised that we produce a as-near-to-perfect midfi prototype as possible. Under normal circumstances, we would have worked more in the field, however, due to covid constraints, we had to proceed remotely. Whilst this was a constraint in some respects, it highlighted the importance of e-commerce facilities and the value of “getting it right”.
The team:
As a team, we worked really well together and were more or less aligned in our vision and brainstorming sessions. Our team consisted of Clemence, our French flair and idea extraordinaire, Mihaela, the questioner, continually questioning sense and functionality throughout the project, Domiziana, our Figma and plug-in queen, with a strong sense of how the website would look, and Kim, the collator and presenter of information.
