Case study: Food distributor and producer website
What is Al Suds?
Suds International Trading is one of the world’s largest manufacturers and distributors of branded foods. They provide wholesale, retail, and informal trade customers with high-quality products from Russia, Oman, and the UAE. The Group operates several production facilities producing a range of products that include some of the most unique and exquisite tastes and flavors from Iran with the brand “BINER.”
Problems and Solutions
The client needs …
- a stylish and easy-to-use website.
- a better organization of products with appropriate categories and filter options.
- a more stylish product card.
- a more accurate and precise introduction of the purpose of the business.
- a new section for introducing the food brands and a call to action for new brands to contact AL SUDS.
- a responsive website with a good user interface on mobile devices.
- a blog section to add articles.
I solved the problem by …
- designing the website from scratch, creating a style guide, managing the whitespace, and choosing high-quality photos.
- creating product categories with tabs on the homepage, selecting icons for each type, and adding filters to the products page.
- making the product photos transparent and using a consistent card background.
- creating a “who we are” section on the homepage that introduces the company more clearly.
- designing a brands page and a call to action for the contact page.
- designing flexible grids and layouts for mobile and desktop devices and using a mobile tab bar.
- adding an article section to the website and designing article cards and an article page.
The whole process
My work on this project with the Netring agency was as a UX/UI designer. The process involved researching, identifying pain points, wireframing, gathering feedback, and designing the pages, followed by developing and producing the content. Based on testing and client feedback, this process was iterated.
Design process
- Research & evaluation: I identified UI and UX issues, looked at similar websites for inspiration, and tried to determine the client’s business goals.
- Sitemap & wireframe: I started to sketch a sitemap to have a full view of the product, then wireframe the pages to define the functionality.
- Design system & localization: I designed a design system that caused consistency and tried to use some textures for localization.
- Desktop & mobile size design: After designing the desktop size, I started to create mobile-sized screens. After testing, I iterated this entire process multiple times.
1. Research & evaluation
Upon viewing the website, speaking with the client, and understanding the pain points, I decided to fix some of the problems of the previous website.
2. Sitemap & wireframe
Creating user flows was unnecessary since the website has short flows, so I sketched the sitemap and wireframed it. I drew them just in the Procreate application because the project timeline was too forced.
3. Design system & localization
I defined the typography, buttons, icons, forms, and components of the design system. I also used a background texture that symbolizes Oman culture for localization.
Typography
I used two different font families. With serif fonts, the titles of the website have a classic look. Body and paragraphs are written in sans serif fonts since they are complementary and more readable.
Colors
Al Suds company only used green for branding and didn’t organize the other colors. After consulting with the client, I decided to use orange as a secondary color since it is an excellent complement to green.
Icons
I used Flaticon icons to display each category, while Phosphor icons were used for other purposes.
Forms & buttons
The form has four variants: default, typing, active, and error. I also designed two different types of buttons. Both linear and filled buttons are available in two sizes.
Localization
The client requested a symbol of Oman to add some localization to the website during the design process. As a result, I searched for Oman architecture and found these beautiful patterns used for walls, windows, etc. I decided to use a background texture similar to that pattern. I found it on the Freepik website.
4. Desktop & mobile size design
Homepage
I designed the homepage at the same time as creating the design system.
Products
You can filter products by category and brand. If you click on the cards, product details and a link to the contact page are displayed. The CTA makes it easier for users (food industries) to contact Al Suds.
Contact
Companies can contact them by filling out this form and writing a message.
About
Here you will find everything about Al Suds. It creates trust for B2B websites.
Articles
The client wanted to have an article section on the website, so I did it :)
Brands
Here is the list of brands that have conducted a contract with Al Suds. The green part is a CTA to the contact page.
404
This page has all the menu links with icons. In addition, I changed the Al Suds logo for fun.
