top of page
COOP
Background
Coop is a prominent food chain in Sweden, boasting approximately 800 stores and an online shopping platform that allows customers to buy in bulk without extra charges. As a cooperative, the company is owned by its 3.7 million members.
Coop prides itself on being a green brand in the food industry, and its efforts have not gone unnoticed. Swedish consumers have voted Coop as the most sustainable brand in the grocery retail category, and its sustainability declaration was recognized as the effort of the year.
At Coop, I worked as a UI consultant, where I focused on improving their design system to simplify and enhance the user experience for web, mobile, and online shopping. My work helped to solve some of Coop's key challenges and improve customer satisfaction.
Year
May-Aug 2022
Client
Coop
Role
UI-Designer
Icons for the Design System
As a UI consultant at Coop, I was tasked with reviewing their existing icons. I discovered many duplicates and variations of the same icons, which made it difficult for developers to implement files from Figma into code. To solve this problem, we chose to redraw and simplify approximately 90 icons while giving them three different pixel-weights to ensure scalability. Additionally, we converted all icons to vector format for easier implementation and a more uniformed style.
We aimed to maintain the original motifs of the icons to ensure consistency with Coop's brand identity. We also collaborated closely with the frontenders to ensure that the new icons could be easily integrated into their systems.
Colors for the Design System
As a UI consultant at Coop, I was tasked with reviewing the colors used in Figma and Coop's graphic profile. Upon investigation, I discovered inconsistencies in both color names and codes used by developers, resulting in duplicate colors and new shades not included in Figma's styles. To simplify and streamline the color system, I proposed five categories for color usage.
The first category includes our main colors: black, white, and a black color specifically for black backgrounds, along with Coop's brand color. The second category is reserved for accent colors and those designed for larger layouts. The third category is light colors for background usage, with white and black in varying opacity used to create buttons and components. This approach allows us to design without the need for additional button colors and easily adjust component backgrounds without having to create new color tints.
Other Visual Elements
As a UI consultant at Coop, my role extended beyond the initial scope to include designing recipe-components and reviewing campaign-modules for better product display. During the design process, I identified a problem where the recipe page was not accessible from the product flow, limiting the ability to inspire customers to try new products. To solve this issue, we incorporated recipes from Coop's magazine directly into the product feed, featuring an image of the meal and enticing text to create excitement. Additionally, we added an "add to shopping list" button to make it easy for users to add all necessary ingredients to their list and even change the protein to suit their lifestyle.
Another challenge we tackled was how to display products with different variants, such as Pan Pizza, without interrupting the user's browsing experience. We implemented a simple solution of a "show variants" button that expands to display various versions of the same item, allowing users to explore and compare options without leaving the product flow.
bottom of page