Elkjop:
Designing
a new
Experience

My Role 

User Experience Designer (NN4M)

My Responsibilities

Strategic vision I Product design I User Research

Background

Elkjop is the largest consumer electronics retailer in the Nordic countries, with over 414 stores (including franchises. Outside of Norway, it is known as Elgiganten). 

 

At the beginning of 2019, they were going for a digital transformation. A completely new mobile native application with more in-store features and a fully refreshed user experience. 

 

This was when they approached NN4M with a brief to design and develop a brand-new e-commerce mobile application.

My Role

I was part of the pitch team and was responsible for the experience strategy and design of the app. 

I was involved with each stage of the process, which included:

  • Initial user research
  • Sketching and wireframing
  • Prototyping 
  • Usability testing
  • Presenting final designs and findings to the clients

 

Project Goals​

While the primary goal of an e-commerce application is to allow people to buy products from their homes and bring customers into the stores, Elkjop wanted to broaden its customer experience for in-store users. 

Primary goals for the application included: 

  • Ability to support users that need help with the installation of an electric product
  • An efficient way of purchasing products
  • Personalisation
  • Steering customers towards popular products
  • Decrease the time people spend in queues
  • Increase customer engagement and retention

Process

We used Design Thinking approach to guide us through the process of developing the product. By following the steps, we were able to thoroughly research the electronics retailer sector before we proceeded to analyze the problem and come up with a product solution. 

 

To differentiate ourselves in an already mature and competitive market, we needed to define a desirable role for the app and how it would meet the users’ needs. We wanted to create something that was going beyond the then-standard eCommerce application. 

A graph of design thinking process

The Discovery

We started our desk research with a competitor analysis. We looked at the main competitor, “Power” and two online base websites, Kjell & Co & Komplett. We needed to understand how those companies were interacting with their users. We took notes of what we believed they were doing successfully, what they were not, and what we liked. Those insights helped us to work on the MVP of the product.  

 

Competitors logo's Elkjop

It was also very important for us to understand the Nordic market and visual trends better. We started by looking at any type of data we could get, checking different websites from Nordic countries and speaking to Elkjop staff. We also got access to prior usability testing, hotjar videos, and a document containing some user complaints/comments. Similar to the competitors’ analysis, we took notes of everything. We wanted to make sure that we did understand the users, their motivations, lifestyle and requirements. 

We designed our persona types and aligned them with our strategy. We wanted to use personas throughout our process to guide any design decisions, priorities and create empathy between the client and our team. 

Elkjop's personas

The next step for us was to hypothesise their user journey, which we could then use to start discussions about the user needs and general user flow of the application. We went back to our research, identified some pain points, must features and general behaviours on the current application.  

User stories of Elkjop Personas

Workshop Time... We Need to Discuss About Those Opportunities

We took our personas and their user journey to run our first internal workshop. Our main purpose was to introduce them to the rest of the team and discuss ways to help our personas reach their goals. It was very important for us to also include representatives from the development team, as we wanted to make sure that everything would be feasible under the specific timelines. 

Results from the workshop: 

  • Features that we could implement (and not)
  • General user flow
  • A better understanding of what type of data is needed from Elkjop in order to move forward with some requirements
  • Adjustments to personas
a photo from the workshop

Our Vision

Whilst our competitors focus on providing a clean and straightforward user journey for online selling, our vision was to help users while shopping in-store. We wanted to provide an easy and smooth experience without massive queues and unsatisfied customers leaving the store. An important part of the experience was the support they could get from the Elkjop staff. We wanted the user to always know what was happening while shopping. 

For example, let’s assume that Ola (our persona) has some questions about a product. She could check the mobile app before getting into the store and book an appointment with an advisor. She could select the exact time to meet the advisor and select the topic (which would also help the advisor to prepare better for the specific product). The application would give Ola a full image of the status and inform her about the advisor’s status. 

The emotional journey flow of our persona Ola

An Architecture Around Our Vision

We broke down the application into four big information architecture (IA) flows: 

  • Shopping Experience
  • Scan & Pay 
  • Scan & Compare
  • Queuing 

We mapped out a detailed IA flow for each category and connected those flows to our personas. 

Before we moved to the next phase, we arranged a meeting with the team and presented the final IA flows. We agreed as a team that we could move forward and start working on some low-fidelity designs.

Time for pen and paper… Well, kind of!

We translated all the IA flows to low-fidelity wireframes and user flows. Meanwhile, we also thought of the different animations that could be used in the app. We then arranged a meeting with the rest of the team,  discussed the designs with the developers and how we would like some interactions. 

Some primary areas of focus: 

 

  • Scan & Compare
  • Scan & Pay
  • Support customers and queuing in-store

 

Introducing Elkjop Mobile Application

User Flows

The flows in the image gallery below are representing our personas journeys

Usability Testing

After the compilation of the final designs, we created a clickable prototype. We then tested it with five participants in the UK.  Users found the application easy to use and very visually nice. 

Here are some other comments made by our participants: 

 

  • Not very sure if I would book an appointment in advance as most of the time, I browse, and then I have questions. It is not very common for me to know the exact wanted brand.
  • I like the option of scanning and comparing. So often, I had to wait for the staff to finish with someone else and then come to help me. Or sometimes, I tried to find an online comparison site at the exact moment. It was time-consuming and annoying. I started taking pictures of the product and researching back home if I remembered it.

However, it should be mentioned here that our usability testing was conducted in the UK and not in Norway. 

Results

The final deliverable was presented to the Elkjop board. The application was well received from the stakeholders, with a result of using our designs and  research findings to help them determine the direction they wanted to take with their new mobile application.

Professional Growth

  • Understanding the market that we were designing for.
    I think this was the biggest challenge that I faced. Yes, we have some general rules worldwide, but every country has a different culture, way of living, interacting with technology, buying products and what is visually pleasant. Not being able to speak to Nordic users at the beginning of the project bothered me a lot. I was not sure that all our hypothesis and research was correct and would work the same for Norway. We could speak to customers in the UK, but we couldn’t assume it was the same. We had to spend a lot of time researching general stats for Nordic customers in our research. If we had users to speak to, we would use this time for something else.  
  • It is not easy to present wireframes that do not have proper text.
    One of the biggest learning in my career was that text is very important at the early stage of the design process. I presented the wireframes with a Lorem Ipsum text initially, but I could see that my team needed clarification during the meeting.  They had many questions about the journey, which could have easily been answered if I had a proper text used. It did not have to be the final one, but at least to give an idea to the people of what this page was.