Bende.com
Website Redesign



By Eszter Bacskai



Overview





About the project



I chose Bende Inc. as a hypothetical client to redesign their website to improve visual design and user experience. My responsibilities included discovery, user research, persona development, and creating a new site map, user task flows, wireframes, mock-ups, final prototype, and user testing.



About the company



Bende Inc. is a food manufacturer and grocery store in Chicago. They make Hungarian-style sausages, salamis and other meat products in their factory and sell imported products from Hungary, Germany, and Croatia. Their products are very popular in the Central European community and are available in many European stores throughout the country. They have an e-commerce website and ship their products directly to customers.



Problem statement



The website is outdated, the navigation is confusing, and the shopping process is complicated.





Current website



Project Goal



Redesign the website to improve user experience, increase online sales, and promote the Bende brand.



Research and analysis





Usability Testing



A quick usability testing revealed the main pain points of the current user experience. Additional to my own heuristic review I interviewed and observed 3 people using the site. The test subjects thought that the home page was congested, overwhelming, too bright, and too red. They were confused by the main navigation’s often ambiguous options (ex. Cart and Checkout), and found the purchase flow frustrating, and unfamiliar.



Competitive Research



Bende.com’s direct competition is most likely www.hungariandeli.com. The website is similarly outdated and they don’t have a web shop.
​
I researched regular online grocery stores to find current design patterns that most users are familiar with. For example Cart is usually located on the top right , the navigation bar has only a few options , and the homepage usually has a hero image , and some recommended products . I wanted to follow these conventions in my design.



Key findings



Navigation needs to be simplified. All functions are in the top navigation bar. Some of the information should be located separately, ex. Cart, Privacy Policy, Location.





Add to cart process needs to be simplified. Users are currently required to type in the quantity of each item and add all selected items to the cart at once. An Add to Cart button is needed for every product separately.





Product pages are missing some details that may be required by users, ex. ingredients, nutritional information, allergens. Add to cart should be a one step process with changing quantity only if necessary.





Visual design needs to be modernized and follow accessibility standards. The color theme is high contrast, but not comfortable to look at, bold red is overused. Copy is too small.

Considering that some of the target users are not native English speakers, localization is necessary to reach more customers.

The site supports people who want to browse, and people who want to search, however search function does not allow spelling errors, diacritics (ex. correct Hungarian product names), or category searches.



Initial User Analysis



Based on the interviews and my own assumptions as an actual user of the website I collected the main characteristics and attributes of Bende.com’s users and created proto-personas to better understand the their needs, goals, and expectations for the website.





Personas



IDEATION





Initial ideas



During my ideation process I came up with a lot of ideas to solve issues and frustrations the users currently face. I had to prioritize these ideas to fit the time limit of this project, so I used card sorting to find the most important ones.



  • High priority
    Improved landing page with hero image and CTA
  • Featured products section
  • Fewer, well-organized categories
  • Product cards with “Add to cart”
  • Detailed product pages
  • Recommended products on product pages
  • Prominent Cart and Account options
  • Improved checkout flow


Low priority

Store information page with map

Shipping and Handling information page

Reseller list with ZIP code search

Localization: Hungarian, German, Croatian

About page redesign

Sidebar navigation/filtering options

Blog with recipes

Improved Search function (native name, category)



Final project objectives and specifications





Design





Site map









Wireframe sketches



Visual Design Decisions



Colors:
Red is the color of the Bende brand, so I used that for the headings and buttons to highlight the most important elements, and keep the site authentic. I chose a darker shade of burgundy for other elements and the text to complement this red. Considering that some of the users may have vision problems, I paid attention to avoid contrast issues. I used white for the background so the food items are clearly visible and more appetizing.

Typefaces:
I chose Cooper Black for titles and headers, because it communicates a friendly and familiar tone. For subtitles and the body copy I chose Century Gothic, which is a san-serif typeface with large x-height. It is easy to read, looks trustworthy and traditional.



Mock-ups



Home page





Following Hick’s law I decided that only the Search bar, Products, About Us, Account, and Cart will be part of the main navigation, all other pages got a link in the footer. This way information is easy to find and not overwhelming for the users.
​Added a hero image and CTA button to pull the users into the site. Added featured product list to facilitate impulse buying.
I found the current list of the product categories too long and used card sorting to regroup them.



Category page





Each category has its own page, and I added an easy to understand breadcrumb navigation on the top for clear path-finding. I used the same card design as in the featured products section for consistency. Each card has an Add to Cart button and a quantity selector to make the shopping experience quick and easy. Clicking on the pictures or product names would take the user to the individual product for details.



Product page





The product page has additional sections for the products: country of origin, ingredients, allergens, and nutrition facts. To encourage users to explore more products there is a “You may also like” section on the Product page.



The checkout flow



To reduce the users’ cognitive load, the long checkout process is split into a sequence of multiple chunks. Each step can be saved separately, so the users can return to it later if they leave the checkout process for some reason. A check mark gives a nice feedback to the user how much of the task is done.



Prototoype



I created a working prototype using Adobe XD. It demonstrates all the interactions for the purchase flow:

https://xd.adobe.com/view/d03f7b55-0657-43f1-bebd-8dd6a571dede-856c/?fullscreen



Eszter Bacskai 2023