KoRo Redesign

Shaping food e-commerce startup identity by redesigning online service experience

KoRo is a food e-commerce startup in Berlin. By targeting the millennial food trends, it features long-lasting and vegetarian foods like dried fruits, nuts and nut butter. 5 product concepts are stated to its audience: quality, shortened trading routes, big packages, fair price and transparency & open communication. As the market grew, KoRo wished to expand its business through a makeover of its online shop.

Running user research before redesign was suggested by Yen when she worked in KoRo as a graphic designer. Her advice was taken, and she was put into the leading role of the project. Her plan initially covered from research to design, including user research, experience design, UI to brand design. The project was partially accomplished in the period of Yen’s stay. It results in user journey maps and a UI prototype.

Discovering problems: The key from web redesign to user research

The old website intended to satisfy various needs and included multiple functions beside shopping, yet most sections were not well constructed and therefore easily overlooked by the target users. Moreover, the website lacked communicating its brand identity. Here are several problems that led to the decision to run user research:

  • Massively long pages everywhere.
  • Most sections were ignored by users due to the super long scroll.
  • Most sections required complex teamwork. The insufficient design led to big waste of team effort, time and money.
  • Important information and function such as delivery fee and the voucher insert bar were not well communicated or hidden. It decreased the credibility of the brand.
  • The home page included 5 screen-wide banners and more than 10 segments. It’s easy to lose orientation by scrolling.
  • Design features lacked authenticity and connection with the brand concepts.
  • Repetitive and redundant information was shown on different pages.

Challenges of the company: Unclear brand identity

The study of the website uncovered a fundamental problem of KoRo: the unclear corporate identity to communicate its brand by visual design. As a startup, KoRo obtains problems many startups hold:

  • Unclear vision and corporate principles (what does the design base on?)
  • Lack of proper marketing strategy (what, how and to whom to communicate?)
  • Limited budget (how much to invest in the website?)
  • Inadequate project planning (web features kept changing based on the interest and aesthetic view of the manager)
  • Poor internal communication (who does what and how?)
  • Changing human resource (how to sustain the website?)

These challenges increase the difficulty to redesign and maintain the website. Therefore, it’s necessary to trace back to the root and to investigate the core of corporate identity by user research before jumping into web design.

Challenges of the research: Convince, clarify goal, find resource

One challenging part of the research planning was to continuously convince the managers that it would be beneficial for the business in the long run, while no evident profit was shown at the beginning. Yen discovered 2 reasons why those apparent flaws of the web design were ignored:

  • Manager was reluctant to let go: The manager, who’s also the owner of the startup, built the website. The baby is too cute to let go from his arms. That leaves designers no place to lend hands.
  • Afraid of contacting real users: The business based its service on online data. Staffs had never in contact with users in real world, which made them hard to understand their users.

It was hard, but Yen succeeded at first. Next step was to clarify whether the goal was to redesign the website or to establish a corporate identity. The later would require internal research on employees to learn if they were aligned with the company concepts. The result with a combination of external user research would suggest a necessary reformation of the team structure and assignments. It would make sure employees share and execute the same vision as the company, and hence willingly become advocates of the brand.

Foreseeably, the first suggestion (redesign the website) was taken due to no instant profit from the second one. Therefore, Yen focused the research on only external users. The following challenge was to find resources since limited time and budget were given.

Project Planning

Before research started, Yen acquired insights from Christian Vatter, the founder of Rlevance. With his help, the research plan was structured and refined. The core group included Yen (project lead and designer), Mark (quality manager, helping Yen on project planning) and Roxane (intern, in charge of interviews). They divided the users into four groups:

  1. Potential customers (who haven’t experienced the website)
  2. Returning customers
  3. Unhappy customers (who complained through customer service)
  4. B2B customers

Qualitative Methodology

Each target group consisted of 6 users who were invited to the office or for a phone call for interviews and user tests. Their data were recorded and organised into user journey maps which includes the touchpoints of the service, user actions, feelings and pain points.

The formats of questions were designed to address different groups. Except for the B2B clients, users were invited to the office for the interviews and user tests with compensation like Amazon (for potential customers) or KoRo vouchers (for returning customers). The question forms consisted four parts:

  • General background information
  • Online behaviour and preferences
  • Experience with KoRo (except for potential customers)
  • Tasks / user test
  • Feedback

During the meetings, tasks were assigned to users. They were asked to find out information about specific products or functions of the website. The tasks covered the complete online shopping experience from searching to payment and extended to additional features of the website (e.g. price graph, food journals, grading section). The test helped to identify the pain points of the current online service and find out whether the additional functions were useful for the users.

Data reaffirms the pain points identified before running the research.

The collected data reaffirmed the pain points Yen initially pointed out before running the research. Those includes:

  • Pages were too long.
  • Contact information was not transparent. The contact page provides only a contact form. Many users would choose to find the phone number and email address in the “Impressum”.
  • Shipping information was hard to find.
  • Input bar for vouchers was not recognisable and confusingly shown twice during the check-out process.
  • Product categories created confusion.
  • Hard to find the product detail information like ingredients or storage.
  • The interface failed to communicate the available service. The users often requested information which had been provided.
  • Technical flaws: Long loading time, misspelling, broken links, missing photos, incoherent product information, wrong product certificates (bio, vegan etc.), popular products often out of stock.

Prototyping: Redefine home page

The redesign of home page tries to solve the following problems:

  1. The super long page and full-length banners led to lost in navigation.
  2. Most users did not scroll down till the bottom of the page. Information like food journals and podcasts which attracted users were easy to overlook.
  3. Repetitive info was shown in the footer.

The prototype provides the solutions as following:

  1. Refine sections.
  2. Use header and drop-down menus to reduce page length and provide a clear overview of available products and info like food journals and podcasts.
  3. Redefine header. Use slides to promote multiple new products. The fullscreen banner design gives room to different types of ads and photo styles.
  4. Redesign the product launch section to optimise the launch process. The original product launch photo required a longer and more complicated working process with photographer, designer and marketing. The redesign of the interface ensures products can be launched fast as soon as the first white-background photos are ready.
  5. Reorganise footer to show a clear overview of additional info and corporate values.

The entry page provides room for different types of banners and photo styles.

Drop-down menus provide a clear overview of products and info like food journals and podcasts.

Product launch section satisfies the need for the tight launching schedule if only white-background photos are delivered at the beginning by the photographer.

The new price development eliminates the staff photos and reasons of change which often gives insufficient information.

Footer communicates clear navigation of service and values KoRo holds. Contact info which is demanded the most by users is now easy to access.

Return the product overview to the functionality of shopping

Redesign of the product overview page focuses on shopping functionality and filter design. Instead of using the search bar, some users prefer to apply the filter for finding specific products. Clear filter navigation enhances the searching experience.

Rearrange the priority of product details

User tests discover that most users do not scroll down product detail pages beneath the product detail sections. The additional info such as price graphs, grading sections, testing and food journals could interest them but often be overlooked. However, these sections are often the most time-consuming tasks for employees. The question arises whether providing these sections is necessary and how to exhibit them will fit the interest of different parties.

The prototype provides the solutions as following:

  1. Refine sections.
  2. Bring info users requested the most to the front, including ingredients, storage, shipping and instruction of the product (FAQs).

Adjust the priority of product detail users gain at first glance. Demanded info like ingredients, shipping and FAQs are now easy to access.

A thorough research will help to uncover the essential value a corporate holds.

In a combination of daily design tasks and management besides research and scarce resource Yen could use, she would not call it a successful project. The good thing is, she had recognised the importance of establishing corporate identity and developed her thoughts in human-centred and experience design. In her interpretation, corporate identity is like the root of a brand. It is not just a commercial representation to boost the sales, but an agreement with its customers and employees. The tree grows on the firm corporate identity will blossom in various aspects. And thorough research will help to uncover the essential value a corporate holds.