Overview
What is the fresh market?
Every product should have a compelling backstory. It might be a failure or, hopefully, a success. What do we do as designers to ensure the success of our product story? Let me share one of mine with you. Of course, it's not entirely my work. I worked with an incredible team, but I can take credit for telling the story.
We were tasked with redesigning a website for a fresh fruit and vegetable online shop not long ago. To be honest, I prefer mobile applications for these matters these days because they are incredibly popular, but as I mentioned earlier, we were tasked with creating a website.
The website that we have been tasked with redesigning. It wasn't a website at all. It was a Wix template website designed by our teacher to give us a general idea of what we needed to design (Fresh Market)
What are the challenges?
2020 was a year of remote work, social distancing, living, and staying at the house, but people still needed to provide their food, so according to digitalcommerce360, online shopping increased 44% over the year. Designing the online shopping website (Fresh Market) that sells the best fresh fruits and vegetables in San Francisco, CA.
Our Goals :
People need to buy their products with an easy, attractive, and efficient online shopping experience
They need to find the desired products in a minimum of time.
( you can check the digital interactive prototype)
Are you still with me through the story? Now it's time to kick off the process.
Discovery
Let's get to work and begin the first stage of our design process. We all have an innate ability to empathize with others. In this situation, we needed to learn not only about our customers' immediate frustrations, but also about their dreams, fears, skills, limits, thoughts, and goals.
During the discovery phase, we conducted both quantitative and qualitative user interviews.
How did we start?
We were grouped into two categories after using multiple sessions and deleting similar questions among 400 to make it easier and continue working.
Straightforward, you may believe that interviewing people is easy, but even though you want to ask a celebrity about something, you must be cautious, patient, and friendly while being polite. This is applicable to all interviews, and it is critical that the users trust you and tell you the truth.
Qualitative Research (Interview)
I asked the questions to my users in order to determine their challenges and opportunities. The interview took approximately 10-15 minutes.
People spoke about their problems (shortcomings and bitter experiences) as well as their positive feelings as a recommendation and solution. as you can see some of them below.
Quantitative Research (Survey)
After deciding on the useful question for the website, our team conducted a survey of nearly 100 people who buy fruits and vegetables online, and the results are as follow :
product by Navigation,
Search and filters
other users are critical
in the form of grain,
package, and weight
Takeaways:
Most common needs discovered by the two groups :
The ability to instantly see the products added and their total price.
The ability to edit and remove items from the shopping cart.
Simple shopping cart steps.
The ability to keep groceries in the cart.
search.
Note section in the cart.
Product availability.
24-hour customer service.
Filter and price filtering.
User feedbacks.
Nutritional Value.
The users are busy and saving time is important
Persona
Persona
What we did after?
After gaining insights from user research, we developed a clear picture of who our target user would be and created a persona. User persona will help us make better design decisions that will satisfy the user's needs.
Competitive Analysis
Competitive Analysis:
Comprehensive competitive analysis of three competitors. Safeway, Fresh Direct, and Amazon Fresh were all completed by me. It aids in highlighting the product's strengths and weaknesses and making more informed decisions about product strategy.
Storyboard
What we did next?
To help understand the flow of people's interaction with the product and a clear sense of what's really important for users, I created two storyboards to visually predict and explore a user's experience with The product.
Customer Journey map
Customer Journey map
We created a customer journey map to help us imagine and consider our users better. That benefited us in observing the user's moments of dissatisfaction and delight as they went through numerous processes and timelines. It also revealed a chance to address users' pain points, as well as how they use the service and how they feel. It also aided us in getting more discussions with the team and coming up with new ideas.
After we completed the categories, we showed each one and discussed it in order to grasp the concept. Following that, we voted on the idea and decided to keep it.
Brainstorming
We began brainstorming after conducting user research and developing a persona to help us understand better, as well as gathering ideas and solutions.
How we did it?
We used a lot of sticky notes (Miro) and completed the process in three steps.
Generation idea During the brainstorming, we talked and wrote down the ideas on post_it.
We classified them into categories and then further subcategories.
We then prioritized the notes in each category and pinned them all to the board (the digital one:)).
Then, To get the sorting process started, we created a few subcategory names and sorted the notes into categories.
User flow of the website before we redesign
User flow
To better understand the issue in the user path through shopping, and getting a better idea we built the website's user flow in miro(miro is an online visual collaboration platform).
The user has few options on this website and can not easily locate their desired product from the beginning to the end.
Sitemap
After brainstorming and ideas, so far we have collected and arranged all the necessary information for the project website, Now it's time to present the information. To do that, we created a sitemap to help us with a visual representation of the website.
Sitemap
Sketching, Design, and Iterations
Sketches
Sketching
Based on the results of our user research, we first sketched out our wireframes on paper before making digital versions of them.
Iteration and wireframe
After some sketches and experiments, I moved on to designing the digital wireframe. Let's take a look at some of the changes made before and after the user iteration test.
I find it is still essential to see the method rather than the finished prototype so it allows me to see all of the decisions I took and the reasons behind them.
Mid fidelity wireframe of navigation bar & dropdown mega menu
Navigation bar & Menu
So here are a few iterations and their final version, followed by some decisions I made during the iteration process.
Navigation Bar
First version :
For the navigation bar, we began by understanding the needs of the users as well as the services provided by the organization. We wanted the user to be able to access their needs easily, but the design wasn't really desirable and it was too disorderly.
In our second version:
we added a hamburger menu for all features in the navigation to be more simple but still, it wasn't something that users can easily figure out and see.
In the third & fourth version:
We use a dropdown menu
Remove "All" in the search box
Decrease the size of the search box
change the current location to the bottom
Megamenu
After experimenting with various menu options, we settled on a mega menu.
First version:
We used the most common type of fruit or vegetable for their category, but after experimenting with customers, we discovered that some of our users, for example, want orange but are unaware that orange is classified as citrus.
Second version:
We devised a system for categorizing fruits by name so that users can easily determine what kind of fruit is in each group. So we began to categorize the names and types of fruits we had and put them in their respective sub-categories.
Finally, we ended up with two different designs, so we conducted A/B testing with customers, and after some adjustments, we now have our mega menu.
Product Box & Filter
Product Box
We knew what we needed to put in the product box based on our research, but we ran into a problem with how users added their desired product to the cart.
In the first version:
We demonstrated to the user how to decrease and increase the amount of the product, as well as the add to cart button at the bottom.
save to list as an underline button.
Second version :
Hovering add to cart button (when hovering the button it shows the increase and decrease amount).
The same shape of the button as "add to cart" for add to list.
Third version :
Hovering button for "Add to cart"
Add the" total price amount of the product"
Decrease" Add to list "at the bottom
Remove favorite Icon
After running the user testing, we discovered that the same shape for add to cart and add to list causes confusion, and The customer was concerned about the net cost of the item.
2. Filter
We began with two horizontal and vertical filters for product filtering, but because users weren't familiar with horizontal and couldn't find it quickly, we started adapting with the vertical filter on the sidebar.
First version:
We deleted the customer review stars after creating our first filter for the feature that consumers most required and desired because, for fresh fruit and vegetables, they didn't want to sort or filter by that, they just needed to see the stars review on the product box.
Second version:
We agreed that a search box in the filter could help users search for a certain type, but after some testing, we decided to delete it because the search box in the fix navigation could do the same thing.
Mid-Fidelity
Here you can see some of our mid-fidelity wireframe of the website (you can scroll on the screen of the mockup)
Guest Checkout & Shopping Cart
Guest checkout
We continued the design on software after some sketches. Guest checkout is one of the most important features we chose to have on our website because our data confirm that most users abandon the website as they see they need to register first.
First version:
To make this easier to show people all of their options on one page, we grouped all of the sign-in, guest, and create account options together, and added a guide icon to show what it entails and what the website needs from the customer.
Second version:
After performing user testing, we found that users are frustrated and still feel they need to register, so we split the guest checkout from the sign-in and create account features to solve the issue.
Shopping Cart
After some design and testing with the user, we came up with the design for an open shopping cart.
To satisfy the customer's request, we built a shopping cart fix in the page's right sidebar. Users will see what they added and how much they spent in this cart, and they can remove or edit their shopping cart at any time from any page. To maintain the simplicity and beauty of the interface, we implemented a hovering function for editing items in the shopping cart.
Another feature we introduced to our website was a page with product photos. After some user testing, we found that some users couldn't recall the name of the fruits or vegetables they desired, due to the fact that the United States is an immigration country with many immigrants from other nations and a range of items for which people don't know any of the names or can't recall. Then I remembered that many grocery stores have the search by image feature on their self-checkout screens, and I wondered why we don't use this feature on our website, So
we built a simple page for the photos of our items and placed the button for it in the mega menu of their respective group.
Color
For the colors, I was inspired by actual fresh food and vegetables, and I chose green and orange. While green is the primary color, new and vibrant greens reflect nature and vitality, and darker greens represent consistency and confidence.
Typography
I needed to be able to interact clearly with the user. I thought my users spent a lot of time in front of the screen, so their eyes could be tired. To make it simple and enjoyable for the user to spend time on our website, I want to use something legible, use a readable scale, as well as provide strong color contrast.
Thus, I picked some samples, used example sentences in both lower and upper case, and asked my users to tell me how they feel.
In conclusion, based on the user's choice, I eventually decided on Helvetica.
I am aware that in a real project, it is preferable to devote more time to usability testing of the project's typography since it is a critical component of the design.
sketch
Logo Design
Logos are intended to be the face of a company. They're meant to visually communicate the unique identity of the brand and what it represents. Since we only had a brief period of time to design, I began by sketching and ended up with my design after speaking with some friends. In my drawing, I used both a circle and a rectangular shape. The circle represents life, freshness, and is also the most popular shape of fruits and vegetables, while the rectangle is a trusted recognizable shape that represents honesty, solidity, and stability also a shopping basket shape.
Logo of the website in three different background-color
Eventually, I didn't use any shape for the logo around the typeface, but it seems to be a rectangle in general. I have used a green leaf, where green signifies freshness and growing and is recognized as a color of vegetables and fruits, and a leaf is a sign of growth, renewal, and life.
User interface Kit
This is a style guide for the fresh market website. This style guide contains, typography, components, such as buttons, icons, and Checkbox, Text input, dropdown, and pagination.
UI Kit
High-fidelity Prototype
I was the team's sole UI Designer, and you can see some of the pages I designed at the bottom.
Interactive Prototype
To see the digital prototype click here.
Usability test
We already performed usability testing with users using wireframes during the early stages, and we addressed all of the issues we discussed. After finishing the visual design of the website, we conducted another usability test.
First, we conducted a usability test using the Guerilla method (in this method, we tested with our colleagues), but because this method can produce inaccurate results, we conducted the test remotely with users (due to Covid-19, we prefer remote testing for safety).
The delivery time page was one of the most complex issues we encountered. We first used a calendar form for the date and a dropdown with input text for the time, but after the usability test, we found that people were confused and worried over whether they had selected correctly or incorrectly, so we switched to a clear dropdown menu.
After checking with users and A/B testing, we agreed on a simple dropdown.
What did I learn?
As a team member, I learned how critical it is to maintain consistent contact with the team and the customer, especially when the project is in its early stages and even content is not yet ready for use.
I was able to experience the difficulty of limited resources and learned how to manage my time, adjust my work, and focus in order to meet realistic targets while achieving high-quality results.
What's next?
The next steps would include further research through observing site analytics after the site launches and iterate on the designs as necessary.
Accessibility tests
introduce the voice feature and engage in conversation with the user. (AI)
Mobile Application(Artificial Intelligence with voice feature, translation between languages.)
Future feature?
for delivery, refrigerator locker, delivery by drone.
Live shopping from home