
Sunshine food Website
Sunshine Foods has been The City’s neighborhood grocery since 1998. Located near Liverpool Street Station, they are very proud to be a part of the dynamic community.
Customers are varied — ranging from local residents to small businesses. The business model is based on customer service, reasonable pricing, and keeping it local. They employ local staff and support the community that they serve.
Project scope
Through a new e-commerce website, they want to showcase their products, while maintaining the brand image.
At the same time, they want to maintain a ‘small shop’ appeal and great customer service. Unlike e-commerce retailers such as Amazon, they offer a highly-curated inventory, focusing on hand-picked quality over quantity.
Some prioritization work has already been done with the client.
We know that the website must have:
● Have clear ways of locating specific products
● Support a single page for each product which can be linked to directly
● Have an efficient way of purchasing one or more products
● Steer customers toward popular products
● Establish the brand and its points of difference
THE PROCESS
The market research
After a careful analysis of the key factors, I found out that the key points making a business a competitor are: the size of the business, the type of product sold, their visibility on the market, their service provided and their location. A list of 4 shops came out. Every e-shop was analyzed and key features listed.

I pin-pointed 4 leading pain points:
- the customer services are slow, often unavailable.
- the delivery and pickup options are often not available
- fresh food is rarely available online due to a lack of trust of the client in the product without seeing the fruit or vegetable
- the online shopping experience is frustrating due to the unclear
and/or long process.
The user research
The persona is focused on young active workers willing to eat healthy and local.
Three interviews have been conducted on workers between 27 to 31. They all lived in London and would like to have their groceries delivered or ready for pickup, to be organised and gain time.

I analysed the user’s behaviors from the moment they arrive on the website to the moment they wait for their delivery.
The critical moment observed is the moment the user realizes that his purchase cannot be made at once due to the unavailability of certain products online and a frustrating check out process.
Feature prioritisation — MoSCoW method
Having collected enough information, the principal features that the website should have are:
- an available customer service
- an access to all type of food, as well as information about it
- a fast product browsing system including visual references
- an easy and fast check out process
- the ability to track the order or to get a notification for pickups


The developed user flow, includes major focus points. At the moment the user arrives on the website, he has different choices corresponding to his demand and expectations.
1. He can browse all the product available in store with an advanced browsing page.
2. He can choose to get it delivered or to have it ready for pickup
3. He can receive a live tracking code, facilitate the coordination of both parties.
Sketching the process

After a first design studio, we arrived at a V1 first draft ready to be tested with the user.


The testings of the prototypes
User testing 1:
The first user testing pinpointed some general changes to be made on the flow and feature placements.

Some navigation tabs were not very clear for the user or repetitive. This was the case of the “Product” page and the “Order Online” page, confusing the user.
The solution was to change it by erasing the “order online” page. It simplifies the user process allowing the user to ordering online directly from the product section.

Another observation was the miss-placement of some elements as the delivery tracking map, put next to the payment process. This confused the user being too overwhelmed in the process and not expecting the information before the confirmation page. The map has later been moved to the confirmation email.

The second version of the website offered 3 tab choices. The products, the promotions and the contact page of the shop.
The user instantly sees an interactive banner advertising the look and feel of the shop as well as announcements. Underneath are 3 categories available. These categories are 3 quick links to selected and filtered items directing the user to the freshly arrived products, seasonal recipes and to an “about us” page.
These give the user a quick access and a sense of trust, “savoir-faire” and freshness of the shop.
User testing 2:

Alteration 1:
The major issues observed during this user testing was on the very well received product browsing page shown here above. The users can search an item easily, browsing through categories on the left and add them to a list of purchase on the right. This gave the user a strong feeling of an in-store experience giving the impression to walk through the shop sections, and add items from the paper list prepared for the purchase, to the cart in-store.

To achieve that feeling the categorization received a subcategorization making it even faster to find the items. The side menus were narrowed down to leave more space to bigger images and bigger “add” buttons, adding clarity to the experience. A filter category was added on the bottom left of the page for “gluten-free purchase only”, as an example.
Alteration 2:
Reviewing the user testing results, these further aterations were made:
- a live chat option along the whole process was added to the top menu bar, to enhance the customer support experience.
- a search tool made his apparition as well to ease the search for users coming on the site, with a precise pre-defined item in mind.
- a note box was added during the checkout process, allowing the customer to insert personalized inquiries in his order.

Alteration 3:
For best practice and more clarity to the user, the checkout process was divided in two pages each containing 2 steps like shown hereunder.

Finally, the confirmation email got two modifications moved from the confirmation page: a tracking link and a map (showing a life geo-localised delivery) was added. This allowed the user to have access to the information anytime without having to keep a browser page open.

In conclusion, the user is now brought through a fast ordering and checkout process. Due to the renewed product browsing page, he can find the products quickly and have a clear overview of his basket.
The site offers more product choices (fresh and non-perishable) as well as an easy delivery or pickup choice with a developed tracking system.
Thank you for reading! You can always contact me through my website: www.victorzustolberg.com if you have any question or comments.
