Rehan Spices

Rehan Spices is a family-owned wholesale food manufacturer business that has been around for over 33 years. In the past few years, their business had slowed down, and they think it’s because their customers are going to their competitors. Their competitors are selling products online through their website, whereas Rehan Spices sells its products over the phone or through email. Their website has not been updated in over five years, and they needed to find a better solution to sell their products. Otherwise, they believe that they will go out of business if they don't modernize the way they do business.

THE SOLUTION

We offered Rehan Spices a solution that would be similar to an eCommerce site but slightly modified, so it would be easier for them to provide quotes to their customers. Their customers would checkout like any other eCommerce site, but instead, they would not be required to enter billing or shipping information. Once they completed their checkout process, their customers will receive a quote through email or over the phone with the discounted price. Our research indicates that this method would be their best solution for entering the eCommerce business.

MY ROLE

For this project, I was in charge of the UX strategy and web design from concept to completion. I used design thinking to improve the experience of their customers while conducting user research to test my assumptions and biases.

The other members that I worked with were the stakeholder and the visual designer. For every significant stage of the design process, I would have a meeting with the stakeholders to gather feedback and get additional input.

type

UX/UI
Web Design
Branding

Tools

Figma
Shopify
VS Code

Date

October 2019

RESEARCH

IDENTIFYING THE PROBLEM

Rehan Spices' existing site is challenging to navigate and is extremely cluttered. The website has not been updated for over five years and needed a refresh to the brand. The website had no purpose to their business and rarely brought in new customers. This was a problem for Rehan Spices.

We hypothesized that an eCommerce site would increase the number of new orders every month and also introduce a better shopping experience for their customers. We needed to test our assumptions by doing more research and validate if an eCommerce site would be beneficial for their business.

RESEARCH INSIGHTS

ANALYZING COMPETITORS

Competitors such as McCormick and C.Pacific Foods have already established their business with an eCommerce site and has a large following on social media to promote their products. Other smaller companies, including Rehan Spices, does not have an eCommerce site.

Having an eCommerce site sets them apart from the top competitors, and Rehan Spices wants a piece of that pie. The two critical parts of Rehan Spices' success are to create an eCommerce site and start marketing their products online through social media and paid advertising.

BUSINESS INSIGHTS

achieving business goals

To better understand their business and the challenges that they were facing, we asked our clients specific questions that helped us discover what the site was intended to do and who we're designing for.

We wanted to know what success looked like for their business and also what problems the site was ultimately solving. With their help, we also discovered who their real competitors were and what they were up against.

“The goal of the website is to be informational regarding our products and services, and also a tool to convert inquiries into sales”
“The current website is not refined and does not provide for a professional polished look that many companies are looking for. In order to enter new markets, the company’s online image must be upgraded.”
USER RESEARCH

IDENTIFYING USER NEEDS

Our clients would not let us interview their customers due to privacy concerns. Interviewing their clients imposed a problem for us because we needed to understand the needs and frustration of their customers as part of our research and strategy.

We were able to solve this problem by talking to eight people who were similar customers to their business. We asked them questions about their frustrations when ordering wholesale food online, and what they wish they saw differently that would make their lives easier.

In the case where we were not able to interview their clients, we at least were able to send them a Google survey form to fill out. This made sure to validate the answers with their real customers and the eight people we interviewed. We found that their responses were somewhat similar to the people we interviewed and were sure that their answers were a value to our research.

“I usually place my orders by email or over the phone. That’s how Ive been doing it with other businesses since I order in bulk.”
“I’m looking for quality products, fast, fast delivery, and resonable prices.”
DISCOVERY

MAPPING KEY INSIGHTS

We discovered in our interviews and surveys that the three most important qualities when purchasing from a wholesale business were product quality, quick delivery time, and best prices. We wanted to address the essential attributes in the copywriting and to speak to the users who visit the site. We also wanted to make sure that receiving quotes online was a feature that users would appreciate. Since they were doing the same with other businesses, they preferred to receive quotes through email or phone, rather than place direct orders online. Before we get into the design, we wanted to validate our hypothesis and prove that what we were designing was meaningful.

USER PERSONA

identifying the user

Darren is a business owner who owns his restaurant, and the only way he can run his business is by having a supplier who he can rely on. Having a supplier who can provide consistent results at an affordable price, and quick delivery time is crucial to his business. Speaking with someone over the phone and email is the most convenient way for him to order his supplies. He has more to worry about running his business than shopping online and placing orders.

information mapping

navigating the site

The goal here was to make the shopping experience as effortless as possible. The decision flow diagram below demonstrates how a user will enter the site, add a product to the cart, and request for a quote for the product they choose. The information architecture shows how the site will be structured and how users will interact with the website. Since this will be an eCommerce site, we want to make sure to put their products at the highest priority.

ideation

sketch & Lo-fi wireframe

In the ideation phase, we used the Shopify template as our starting point but created our designs that were appropriate to the business needs. For every significant stage of the design process, we would have a meeting with the stakeholders to gather feedback and get additional input. After validating the wireframes, we were introduced to a new challenge that was not expected.

the limitations

experiencing challenges

After creating our lo-fidelity wireframe and validating the design with our client, we realized that our plan faced some limitations. First, Shopify would not allow the "add to quote cart" feature to slide from the right. This feature was only available when having the standard eCommerce site. Second, we found limitations to the Shopify template that we were planning to use for our client.

Rather than starting from scratch and designing a new wireframe, we found a workaround for the challenges we were experiencing. As for the "add to quote cart" sliding feature, we removed that interaction and created a pop-up modal for users to view the cart. We usually did not intend to write custom code, but in this case, we went the extra step to meet the promised design and had to write the custom code for the service and about page. Fortunately, we were successful in making the adjustments, and the client was pleased with the results.

user interface

bringing the design to life

The client wanted a complete rebranding to their business and to have a new face for their brand. The visual designer created their new logo, chose the fonts and colors for the site. I worked with the UI elements the visual designer provided to use on the site.

prototype

designing the landing page

Studies show that most users will visit a website for no longer than 15 seconds. We understood that we had to plan strategically with button placement and the copy. We made sure to immediately address the needs of the users by using words that would make buyers more interested. From our key insights, we learned that users wanted to work with businesses that had quality products, fast delivery time, and competitive prices.

iteration

improving the design

Before we went into development, we tested our hi-fidelity prototype with our client and other users. We received feedback from users saying that they didn’t like clicking through multiple pages to view all the products. They would prefer it if they can have the option to see all the products on one page. Our revised prototype now displays all products on a single page for each category.

development

responsive web design

The client wanted to use large-high-quality images to display their products and showcase the consistency of their product. My team members took pictures of the product, and we worked together to place the photos in the correct place strategically. I directed my team members on how the images should be taken to make sure the text and pictures were legible. If the type were not readable with the photos, we would have to re-take the photo or use another image.

marketing

reaching new customers

The client wanted a product brochure that they could send to their customers for marketing purposes. The visual designer created the product brochure and used the images that were placed on the website for brand consistency.

What I learned

Finding the balance between user needs and business needs

Clients might think they know everything about their customers, but that is not always the case. At the beginning of every design process, it is important to empathize with both the user and the client to make better decisions going forward. Through research and validation, we were able to prove to our clients the reasons we made our design decisions in every step of the way.

Testing your hypothesis, assumptions, and biases

Our client addressed their concerns about their business and wanted us to build an eCommerce site. Before we started building the site, we wanted to validate if an eCommerce site would be viable and can produce growth for the business. In our research phase, we were able to validate our hypothesis by conducing research and interviewing users about their experience when placing orders with other wholesale food businesses.

NExt steps

By researching other competitors, we were able to identify where Rehan Spices should spend their time and resources to improve their business. Competitors such as McCormick and C.Pacific Foods have already established an eCommerce solution and has a large following on social media to promote their products. We recommended marketing their products on social media platforms, continuously add new products, and update the SEO to improve their site ranking.

Our goal was to leave them with essential tools and instructions so they can manage the site on their own. Their previous website did not have Google analytics or marketing tools set-up, so we could not compare how the site improved. In the next six months, we plan to revisit our client to see how the site performed and offer them creative solutions to increase user traffic to the site.

NEXT: Su Casa

NEXT: Parallel Medium

NEXT: Parallel Medium

NEXT: Parallel Medium