Upper Supplies Website

Upper Supplies Website

Upper Supplies is a B2B company selling eco-friendly cups, plates, bowls, and more. The goal is to simplify the process when browsing product catalogs and requesting quotes. The website will solve the businesses’ problem of making it user-friendly by giving them a redesigned website with clear, detailed product information and an easy-to-navigate interface.

Company: Upper Supplies is a B2B company selling eco-friendly cups, plates, bowls, and more.

Role: UX/UI Designer

Communications with: Developer and CEO

Tools: Figma

Website: https://uppersupplies.com/

Product overview: Upper Supplies Website provides businesses with an easy way to explore our range of products and request personalized quotes tailored to their needs.

Problem overview: They want businesses to effortlessly browse their product catalog and request quotes.

Goal: In order to simplify the process when browsing product catalog and requesting quotes, our website will solve the businesses’ problem of making it user-friendly by giving them a redesigned website with clear, detailed product information and an easy-to-navigate interface.

kickoff.

The client required a website redesign that aligns with their branding and provides a user-friendly experience, allowing businesses to easily navigate and request quotes. The site focuses on B2B sales of eco-friendly products, such as cups, bowls, plates, and more.

research.

Given the timeline and budget constraints for client research, I did not have access to real research insights. All the research presented below is based on assumptions.

insights.

Using proto-personas, I identified the needs, goals, and behaviors of users.

define.

I developed a proto-user journey to identify pain points and gaps in the user flow.

Pain points consist of the following:

Users may feel overwhelmed by the number of suppliers and eco-friendly options through their research

Not seeing upfront pricing and certifications on whether the supplier do have eco-friendly products

Quote form needs to be easy to fill out

Concerns on how fast the supplier will get back to user after quote form submission

Need transparency in their quotes

Concerns about product quality

ideate.

Now it’s time to turn the main problem of “Business owners seeking eco-friendly supplies face challenges in navigating the online quote request process due to overwhelming choices, a lack of clear information, and uncertainties regarding response times and quote details. Our solution should enhance the user experience and streamline their purchasing journey.” into a solution.

How might we help make the request quote process easy? How might we provide more information regarding our products?

design.

As I started building hi-fidelity wireframes, I made sure the website was easy to use, especially requesting a quote. The choices I made were:

Colors: I used green and brown colors to signify earthy-tones. Green symbolizes nature and growth, and brown symbolizes warmth and natural materials.

Buttons: I made the call-to-action buttons “Request Quote” as that is one of the main goals targeting our users.

Product Details: I added the product catalog to the website so users are able to find all the product details such as SKU, images, names, and more.

Request Form: I made the request form simple to only getting necessary information so users don’t need to fill out long forms.

key learnings.

Creating a design without access to real data or insights from actual users creates some challenges. When relying on assumptions, it can lead to a misalignment between the design and the actual needs of users, resulting in a product that may not effectively address their pain points or preferences.

While these assumptions can offer a different perspective and serve as a starting point for the design process, they are inherently limited. They may highlight potential areas of focus, but they cannot replace the valuable insights gained from direct user feedback and interaction.