The online supermarket
fresh goods you can trust


Buying fresh groceries online it's not like buying anything else online. But why not? The safety of picking yourself the produce you want may be reason enough to go to the supermarket.

Good Market is a personal project that pretends to be the online supermarket of premium fresh goods people can rely on. 


What makes people buy online?

Online users find that buying online is time saving, comfortable, faster, and flexible: you can buy anywhere at any time.

What stops people from buying fresh food online?

The research focused on people that usually buys products online but don't purchase fresh products - they never tried or had a bad experience. 
For those who never tried, the groups divide into people who never had the chance in their local area, or people who are skeptical about it.

After visiting competitors websites and reading bad product reviews of disappointed consumers, I could drag some conclussions: product pictures don't often correspond with the final product the customer gets; bad quality product pictures difficult decission making; delivery takes longer than expected, delivery slots were limited, etc. Those are opinions of people who have bought groceries online.

Moreover, there are many cases where people abandon their cart before completing the buy. Why? According to the Baymard Institute, whose speciality is e-commerce usability research, 10% of the abandonment rate in the US is due to a bad checkout design. Among the reasons are: user has to create an account (35%), too long/complicated checkout process (27%), total price unclear (24%), not trusting the site for payment (18%), or not enough payment methods (8%).

1.1. Requirements

Only after I established the user main goals, I was able to come up with the basic product needs.

1.2. Personas

Good Market's potential users would be people with busy schedules generally, good incomes, who are used to buying online and value premium quality food.


2.1. Sitemap & Flowchart

The sitemap & flowchart designs allowed me to clearly stablish the user navigation process of the web app, before digging into sketching the screens.

To define product category names, I made a card sorting test with relatives and friends. I gave each of them the same set of cards with product names, and they grouped them together and created category names according to their experience when buying food.
This was helpful to test out what users would expect under certain food sections and how they would browse for products.

2.2. Wireframes

Once information architecture was clear, I could launch into design. The process of sketching and drawing wireframes helped validate and discard ideas as well as organize content structure. Annotations are presented alongside to describe the functionality of the elements and make sure nothing was missing.

2.3. Style

Good Market had to transmit the feel of selling quality fresh groceries. I opted for a natural color palette of greens, and a clean design with no distractions. Close up product pictures supported the premium feature and simulated their presentation in supermarket stands.

Since GoodMarket would be used in desktop and mobile devices, it was very important to design with consistency and, at the same time, to adapt the experience to the peculiarities of each one. For example in mobile design, all categories are condensed under "Products", and navigable through one sublevel at a time to not lose sight; thumbnails are big enough to maintain visual impact and enlarged into full screen, product filters have its own page for comodity, long texts are cut into "Read more" options, etc.

As we reviewed before, the checkout process design plays a key role in users completing or not their purchases.
Saving time for the user was a key feature of Good Market's experience. This was solved with features such as offering a geolocation option instead of typing delivery address in mobile devices, the option to "Reorder" from past purchases, or "Book a slot" from the start to check the availability of delivery times. Login and Sign up only required to fill in E-mail and Password, and "Login with Facebook" was an option. 

The steps to take had to be self explanatory and meaningful. Through the proposed design, the user could know where he was at every moment and what step was next. Another significant detail was that the final price was always visible and updated at the top part through all the process to avoid surprises in the end, and secure payment was ensured with a PayPal option.



When prototyping Good Market I had to make sure the experience in mobile devices, which offer more freedom to buy from anywhere, was satisfying and at the same time made a difference.
The following examples are interactions made from Homepage and Individual Product page respectively:


Good Market is a personal project that started as an exercise for an online course I took, and which I decided to redesign with more time and attention.

Making this web app gave me better notions on e-commerce experiences and helped me understand better the peculiarities and needs of their users. Because is a service people would pay for, it had to be designed with greater care.

On the other side, the freedom I had to do it, made me be more demanding with the results.
Some challenges I found on the way were that, in order to analyze the full process, I needed to complete purchases in some websites or complete long forms with invented information.