How can a well-designed website highlight a company’s values and increase business conversion? When is it better to develop an interface from scratch, and what is hiding behind service design? Using Green Chef as an example, we will show you how to develop a client-oriented UX/UI design that meets the customer's and the business's needs.

Project goals: tracing target audience needs and requirements

About the project: Green Chef specializes in producing and selling products and meal plans for a balanced diet, using only plant-based ingredients. The company offers desserts, pastries, main dishes, and beverages without gluten, lactose, artificial colors, and white sugar.

Yana Streltsova, the Green Chef. owner, applied to Turum-burum to assess the current website usability and design and optimize it to boost business conversion. The problem was that the website neither addressed business challenges nor allowed for scaling and development as planned.

Task: To develop a business-converting tool with great scalability potential and achieve a significant conversion boost.

Business owner’s requirements: The website should be simple, engaging, and accessible for all customers. Users should feel safe, comfortable, and understood when interacting with the platform. 

UX audit conclusion: the website needs radical changes

During UX audit, we revealed around 40 interface issues and worked out the hypothesis on how to solve them. After prioritizing and evaluating the audit results, we understood that the website needed drastic changes to achieve the project goals.

So we decided to redesign the website using the RSR (Revolutionary Site Redesign) approach. This strategy involves a complete update of the website's stylistics and an improvement of its usability and accessibility. In other words, it is a comprehensive website redesign.

Considering the specifics of the business, we chose a service design focused on creating an Instagram effect, since that's the platform where the brand's history began. A service design involves developing a laconic interface, where content is the main design focus, and everything else is built around the product to emphasize its advantages. 

Website iterations and search for appropriate design vibe

The selection and approval of the future design concept is an important stage during which our team actively cooperates with the business owner. All design iterations are shown to the clients and approved by them. We take into account all the wishes and remarks of business owners and discuss all UX/UI solutions with them. 

For example, even though the first Green Chef. iteration was visually appealing, we realized that this version needed to be improved, because:

  • It was difficult to maintain the chosen website stylistics.

The first website version required only high-quality photos with excellent resolution, which meant we had to update all previous content and couldn’t add new posts quickly.

  • Details overload.

This version contained too many small details and different fonts, placing the main focus on the logo. It overloaded the design and did not reflect the client's mood.

An example of the first website iteration for Green Chef.

Our goal was to create not only a visually beautiful design, but also a business tool that will be easy to maintain and scale in the future. So, with all these requirements in mind, we worked out the next interface iteration that was in line with the business vibe and was approved by the client.

From concept to implementation: creating UI/UX design for key website pages 

The brand owner had a clear strategy for further business development, which we took into account when creating the website design. Based on this, we developed appropriate information architecture and advanced usability for each page.

Main page: UI/UX design with visually highlighted and structured information blocks 

The main page serves as a business face that allows customers to get to know the brand and its services. That's why our main goal was to make the design of the main page not only attractive but also informative.

  1. Focus on brand values and its competitive benefits

Approximately 64% of customers believe they can build strong and trusting relationships with brands that share their values. Therefore, we placed bright banners informing about the services of the online store right on the first screen. We also added an interactive feed that broadcasts the brand's benefits and values to separate the blocks visually. 

The first screen of the main page with an informative banner and an interactive feed block that conveys brand values

On the second screen, we placed a block with the details of the rations, since it is the key business service. 

Here we added bright photos of key dishes and structured the most important information about each program: price and calories per day, menu examples, and a call-to-action to lead the user further through the sales funnel to the ration pages.

Second screen of the main page with information about rations
  1. Gamification and user-oriented design

To help a new user choose the right option and understand how they can benefit from ordering such a diet, we added a separate block to the main page. In this section, the users fill in a short survey and get a relevant menu based on the test results about their lifestyle and goals.

A questionnaire block to encourage users to place an order

Firstly, interactive blocks and gamification allow capturing the user's attention, making interaction with the brand not only useful but also interesting. Secondly, such questionnaires are effective for collecting user data to learn more about your target audience and its preferences.

In particular, this data can be used to boost personalization, improve customer experience and increase brand loyalty, as 91% of consumers are more likely to buy from brands that remember their preferences and provide relevant offers and recommendations.

  1. Emphasis on personal brand

Yana Streltsova, owner of Green Chef., is an influencer with 26 thousand followers and an ambassador of healthy eating habits. By following the principles her business promotes, Yana wins the trust of people who follows healthy lifestyle and attracts more clients to Green Chef. 

That's why we added blocks with her photos to the website, which emphasize her personal brand, once again inform about the company's benefits and strengthen customer loyalty and trust. According to statistics, 88% of consumers say they are more willing to buy products from companies they know and trust.

Example of a block with a focus on personal brand
  1. Instagram block

Since Green Chef. firstly emerged on Instagram and still receives a lot of traffic from this platform, we added a block with Instagram stories to the page. This block broadcasts brand values and serves as social proof, attracting new users. 

Implementation of a block with Instagram photos on the website interface

For those who scrolled almost to the end of the page, we placed a creative block that attracts users' attention with its non-standard presentation. We used photos of various textures that evoke associations with the brand's products and again highlight the company's advantages, but from a different perspective.

A creative block that emphasizes the company's advantages and harmoniously adds to the interface design

Menu categories: ensuring intuitive website navigation

Analytics revealed that approximately 85% of new visitors came to the website with an average session duration of 1.5 minutes. Despite this traffic, conversion rates were low, indicating that something was hindering users from moving further through the sales funnel. Thanks to UX audit, we identified existing issues and transformed them into growth points, including:

  1. Avoiding ambiguity and providing easy navigation

In the previous website version, some navigation options were hidden, making it difficult for users to explore other products and required from them to take extra steps. Additionally, the ‘Shop’ menu section was unclear, as visitors might have mistaken it for store addresses rather than recognizing it as a navigation item.

Main website menu before redesign

Therefore, we suggested displaying product groups with thematic icons to make it easier for users to navigate the website.

Main website menu after the redesign
  1. Fixing a block with the menu on the website pages

During the audit, we found out that the website’s header was not fixed, which was particularly problematic for mobile devices. This meant users, especially newcomers, couldn’t quickly navigate to different categories or their shopping cart, negatively affecting the depth of site browsing and business conversion. 

Not fixed navigation before the site redesign in the mobile version

Therefore, in the new website design, we’ve incorporated a fixed header that remains visible as users scroll. This feature ensures that customers can easily navigate to their shopping cart, menu, or other key interface pages without any obstacles. By enhancing user convenience in this way, we aimed to improve both the browsing experience and overall brand loyalty.

Product page: ensuring high-quality presentation of goods

When developing product pages, we focused on the needs and expectations of the target audience. Thus, UX audit, showed that the size of product images was too small, making it difficult to view the product and delivery details. It was also difficult for users to find an option to enlarge the image, which negatively affected their interaction with the platform and decreased their interest in the product.

This is what the product page looked like before the website redesign

To solve this problem, we increased the size of product images to more than 50% of the page area and replaced the “+” icon with a more intuitive element — a magnifying glass. This step helped us improve the perception of products and increase the number of items added to the cart.

We also revised the structure of the product cards, reorganized the information hierarchy, and added key details to aid purchase decisions. This includes:

  • A social proof block for customer reviews and testimonials;
  • Additional order options such as packaging, postcards, and candles;
  • Blocks highlighting the benefits of each product;
  • Detailed product characteristics and specifications.
The product page before the website redesign: no visual accents, the structure is difficult to read and navigate, the product benefits are not obvious.
Product card after redesign: clear interface with the main focus on the product, convenient zoom icon on the image, well-organized information

To increase conversion and improve the user experience, we also integrated upsell and cross-sell blocks: ‘Similar products’, ‘Best sellers’, and a personalized block “Viewed products”.

Implementation of upsell and cross-sale tools
An example of an implemented personalized block on the product page after redesign

Page with available rations: helping users to make a purchase decision

The audit results revealed that after browsing the list of rations, users rarely viewed the diet details page, especially on desktop. This suggests that new users, who have no idea about the benefits and quality of the products, could not objectively evaluate the product due to a lack of information and left the page. 

This is how one of the blocks describing the ration looked like before the redesign: the information is not structured and without visual accents, the block looks long and complicated, encouraging users to leave the page not to waste their time and effort on reading it

So we completely redesigned the structure of the rations page, making the information more organized, clear, and transparent. We mentioned the key benefits in a color block and added reviews from satisfied customers as social proof.

Ration description page after redesign: the interface emphasizes the product benefits and encourages users to move further through the sales funnel

Checkout: shortening and simplifying the user flow

During the audit, we found that the checkout process was too complicated. Many steps and unnecessary animations could confuse users and irritate them, resulting in high bounce rate. 

Checkout page before the website redesign

We redesigned the checkout page by illuminating the usability issues detected in the previous interface version. We improved the user flow by reducing the checkout process from 4 pages into one. This made the checkout process more compact and logical: unnecessary steps were removed, and complex animations were replaced with simpler elements, making the process clear and convenient for users.

Checkout page after website redesign

For businesses like Green Chef, which have a relatively long decision-making cycle, it’s crucial to automatically save previously entered user data. This allows clients to continue their purchasing process right from where they dropped it. By doing so, we take care of the customer and shorten the user's path, reducing the number of exits.

Website service pages: turning non-converting pages into converting ones

While service pages may not be directly part of the main sales funnel, they are crucial for projects like Green Chef. They attract new customers and retain existing ones by providing valuable information and enhancing overall customer engagement.

Loyalty program: demonstrating business benefits for effective customer retention

More than 83% of consumers say that loyalty programs encourage them to make a repeat purchase from a brand. So, we recommended implementing a separate page that outlines the benefits of the program in detail, includes a prominent call-to-action, and offers a quick form for easy sign-up. This approach will boost customer awareness, strengthen loyalty, and build greater trust in the brand.

Loyalty program page after website redesign

Blog page: creating valuable offers for customers

A blog is essential for both SEO and fostering trust with our audience, so we designed a blog page featuring thematic articles to boost visitor engagement.

The developed blog page is easy to navigate and allows you to filter content by categories, such as ration programs’ and ‘detox’.

The blog is built in an Instagram-like format, featuring storytelling and articles from nutrition and health experts. This approach not only builds trusting relations with audience but also allows creating engaging and interactive content. The Green Chef blog is also focused on conversion increase and contains strategically placed links to products that encourage readers to explore and purchase.

So the blog helps customers choose a relevant product and quickly navigate to the needed product page, increasing their brand loyalty.

Blog page after website redesign

Creating service design for Green Chef.: project results

Thanks to the comprehensive approach and close cooperation with the customer, our team managed to develop a visually appealing and client-oriented design that:

  • emphasizes the benefits of the product;
  • provides users with all the necessary information to make a purchase;
  • conveys brand values.

After the project launch, Yana Streltsova, owner of Green Chef, said the following:

  • ‘When I met the team, I realized that they are 100% professionals. Of course, we had some vivid discussions during the redesign process, but that's what allowed us to get such a great result.
  • It was a perfect blend of two worlds. The development team focused on achieving technical advances, while our team prioritized maintaining aesthetics and core business values. This collaboration resulted in a truly exceptional product.
  • The initial version of the website didn’t quite match our vision, but we had faith in each other’s expertise. And with the next versions, the work ran smoothly and even more effectively. 
  • I'm grateful to our new friends for their patience and professionalism, because they proved that every controversial thing can bring incredible results.’

By comparing the analytics data from two weeks before and after the website launch, we observed the following results: 

  • micro-conversion from the product list to the product page increased by 23% for products and by 19% for rations;
  • user engagement on the main page increased by 49.65%; 
  • the average session duration on the website increased by 13.17%.

 P.S. We’ll be sharing more long-term results soon, so stay tuned!

We worked on the project together with the Linecore development team. Together, we managed to create a website that fully meets business objectives and has great scaling potential, which was one of the client's key requirements. The created design allows making further changes to the interface without significant time and financial investments.

The Green Chef case is the best proof that UX/UI design is more than just a visual appeal. High-quality design addresses multiple challenges by focusing on real user experiences, fostering trust with customers, tackling business problems, and optimizing conversion rate. We kept all these factors in mind while developing the Green Chef website.

Share this post on:

Yulia
Yulia is a copywriter who turns her colleagues' experiences into informative articles full of in-depth analysis, practical advice and a wealth of actionable tips.

Other articles

1
/
1

More real-world Turum-burum cases?

Review our vast portfolio of cases in a variety of business fields to make sure of our expertise.

Go to Portfolio

Write to our UX design agency, 
and we'll get back to you soon

Write to our UX design agency, and we'll get back to you soon

Your message has been sent! We will get in touch with you as soon as possible

Send one more message
Doublecheck your form data please