Improvning the Coop experience
← back to work

Improvning the Coop experience

2020

In 2020 I spent some time at the creative agency Animal as a UX/UI-designer. My main client was Coop, one of the largest grocery chains in Sweden. I assisted with designing part of their online platform for grocery shopping, recipes and Coop Bank. I got the opportunity to help with several projects within Coop and contribute with different skills.

User experience improvements

During my time I collaborated and designed suggestions, ideas and examples of new concepts for different parts of Coop.se:

  • The save calculator
  • The loan calculator
  • UX-research of the global market

Coop save- and loan calculator

The contribution I'm probably proudest of is the save- and loan calculator. The goal is to give the user a quick idea of how much they either can save or loan when using Coop Bank. I was asked to create some concepts and ideas around these needs and came up with a couple. Straight away, I thought that the feature demands good feedback, a clear communication to the user of the results of an action, and early on I wanted to create interactive prototypes.

The save calculator

After some research, I wanted to make the save calculator different from other competitors. I wanted it to be both fun to use and to have a visual appeal – when seeing it, you just want to pull that slider! When working with a lot of numbers, it is also important to provide the user with just enough, and in a clear way.

A screenshot of a concept for the Coop save calculator

Another screenshot of a concept of the Coop save calculator

Concepts of the save calculator

The use of emojis as "categories" make it feel simple enough to just fool around with, to engage users to interact. This design was used for the save calculator, which is not as "serious" as the loan calculator.

Video showing the interaction of the save calculator

Loan calculator

With the Coop Bank part handling loans, I wanted something more serious but still with a good visual appeal. In similar fashion, I reused elements but skipped the fun feeling with emojis, and went for a more strict way of presenting.

Screenshot of a Coop loan calculator concept

Concept of the loan calculator

A step by step interaction

I was also asked to explore a step-by-step version of the loan calculator, which gave it a more playful vibe. With the step-by-step version, Mattis assisted me with many decisions and use of assets.

Step by step interaction example

Step 4 out of 4 in a step by step example

Concept of the loan calculator in a step-by-step version.

Design systems and beyond

This was also my first real encounter with working with a big, already existing design system. I had the chance to contribute in some way, and the save- and loan calculator iterations came with a couple of components that I could assist in designing and/or tweak a bit to fit the product.

Showcase of some components Johannes designed

UX research of the international market

Animal have improved Coop.se for a long time, and new design decisions and functionality are implemented continuously. For a big part of the site, which I can't describe in detail, we needed insights not only from the web analysis but also from the international market. My focus was to find why design decisions were made and what made them good. I was able to find some valuable redesign walkthroughs, and how other international brands prioritized content and functionality.

By applying the discoveries together with best practices, new ideas and examples came to life in the Coop domain. This was all collected and presented as a keynote to the product team.

My part

What I did:

UX and UI design of Coop and Coop Bank concepts, creation of new and existing components, exploration and UX research of the global market and prototyping.

What I learned:

How larger teams work and get around, working with big clients, use a large design system, to constantly show your work to others to gather insight.

What was hard:

Working with a large design system is challenging and I had to take steps back and respect the foundation that the system is built upon. Communication with big clients can be difficult and close contact with the team is very important.


© 2024 Johannes Alvarsson