Fiksuruoka.

Sustainable food
consumption eCommerce
platform.
UX/UI Design for E-Commerce Platform

Project Plan

Task

Improve e-commerce user experience and reduce the average time spent before checkout

Team

3 Marketers, 1 UX Designer, 1 UI Designer

Duration

5 months

Scope

322 hours, 42 web screens, 45 mobile screens, custom icons and illustrations

Result

The design was implemented as a functional product

Overview

EU food regulations are very strict with product expiration dates, which has led to numerous European supermarket chains throwing out food several days early in order to be safe.

Noticing this needless waste and a solid business opportunity, the Finnish food chain Fiksuruoka stepped in. Now, through the platform that Fiksuruoka created, both eco-conscious and budget-conscious shoppers have the unique possibility to order soon-to-expire food at much cheaper prices.

Even better – it can be delivered to any city in Finland. However, the company needed help refreshing the flows and visuals on their platform, and we at Cieden were more than happy to help. After all, we were particularly excited to work on another ecological product that helps us feel like we are contributing to a bigger cause.

Benefits

  • Responsive and professional marketing team on the client’s side
  • Clear vision and requirements
  • Cooperative environment
  • Thorough user testing on the client’s side
  • Assisting a company with a noble cause

Challenges

  • Original interface is exclusively in Finnish
  • Need to simplify exisitng checkout flow
  • Integrate gamification
  • Conduct user testing
STEP 1

Stakeholder Interview and Requirements Elicitation

Our design team was lucky to work with the marketing department on the client’s side. Riku, Lauri, and Henni had already conducted user and marketing research, which led to very clear requirements and KPI’s.

The results from their user testing were conclusive: for our first stage, we were going to focus on three main areas:

  • The largest issue to address was the fact that average customers spent too much time on the website before checking out.
  • User engagement research showed that most customers were using their phones to order from Fiksuruoka, which meant our redesign would have to be mobile-first.
  • Finally, the company was hoping for a refreshing facelift on the UI and general visuals.
  • Conducted 6 design audits of the implementation.
UX/UI Design for E-Commerce Platform
STEP 2

Wireframes

Our first step was to conduct a UX audit together with the marketing team.

Insights from this exercise were combined with the additional supplementary research that the team had conducted. As a result, Fiksu’s marketing specialists were able to provide their first product reenvisioning in the form of sketched wireframes. These wireframes followed the requirements for a mobile-first approach, which we absolutely supported.

And, since we saw that many people use Fiksuruoka on the go, or simply prefer mobile phones to big screens, we wanted to focus our efforts on satisfying those needs first.

UX/UI Design for E-Commerce Platform: Wireframing
STEP 3

UI Concept

In order to give the website a cleaner look, we came up with a fresh UI concept that respected the old branding, in order to remain easily recognizable by the loyal customers, while making sure that it would appeal more broadly to newcomers.

Along the road, we added colorful gradients, secondary accent colors, and colorful illustrations. This approach gave the website a friendly and joyful appeal, which very much aligned with the branding strategy.

UX/UI Design for E-Commerce Platform: UI Concept

Main Design Challenges

Below are some of the project’s unique challenges we were happy to take on.

1.

The product details information was hidden on a separate page, which needed more clicks for the user to view them.

Thus, in order to eliminate the number of clicks needed to research and buy a product, we allowed for the product details to expand within the listing instead of directing the user to a new page.

UX/UI Design for E-Commerce Platform: UI Concept
2.

The checkout process was simple unless the user needed to edit their shopping cart. To simplify the existing flow, we designed the shopping cart to be editable via its own slide-out panel. This move vastly simplified the overall process.

UX/UI Design for E-Commerce Platform: UI Concept
3.

We integrated best practices from gamification design to reward customers for brand loyalty and dedicated shopping.

UX/UI Design for E-Commerce Platform: UI Concept
4.

We decided to custom design several illustrations in order to further promote the company’s eco-friendly messaging.

UX/UI Design for E-Commerce Platform: UI Concept

Dev Support

After the initial designs were finished, we remained at our client’s side for as long as they needed.

After all, simply handing over the assets does not mean a true designer’s work is finished. Sketch files, svg illustrations, and animation data were only a portion of the full value we wanted to provide to Fiksuruoka. With this in mind, we audited both the web and mobile front-end programming to make sure that the designs were implemented correctly.

We also continue to help them identify and solve new UX issues that arise.

UX/UI Design for E-Commerce Platform: Dev Support

Additional Support

Since we modernized Fiksuruoka’s brand visuals, we needed to roll out the same approach for other designs in the company. We are a design agency, after all, and once we start working on a project, we make sure that our clients maintain an excellent style and taste in all their designs.

In Fiksuruoka’s case, it means we also worked on:

  • Pitch presentations
  • Illustrations for marketing and videos
UX/UI Design for E-Commerce Platform: Additional Support

start your project with us.

Getting in touch
is easy .
Thank you for your message. It has been sent