## **Reason**

The old frontpage of skolelyst was confusing for the users and difficult for the content producer to work with.

## **Old design**

**Problems**

* Many different elements with a lot of different looks and feels

* Difficult to quickly scan

* No real hierarchy

* Difficult for content producer to keep track of elements

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FDsoKE8zcIYRgTNf6P9IP%2F6d4a08c6-dfb0-4c2e-bb8b-bb13ca46ebb7.png?alt=media&token=33f2e00a-c6a7-47d6-b24c-ec26c43976b5","id":"6d4a08c6-dfb0-4c2e-bb8b-bb13ca46ebb7","width":754,"height":650,"filename":"original-ee4774471ad50236ddae2522560a6746-2.png","type":"image/png","caption":"","border":false}]}
```

## **New design**

New design is easier to scan. Most important elements are put at the top and less important has space further down. This also made it easier for the content producer to keep track of the different elements.

It's also meant to be easily changeable for the content producer as earlier and they can decide how many large boxes they want vs smaller once depending on what is important at what times of the year.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FDsoKE8zcIYRgTNf6P9IP%2F4a3ab716-d700-4169-a987-c638502cdcae.png?alt=media&token=df716a5b-aaec-46a9-a220-e7e7e01d8477","id":"4a3ab716-d700-4169-a987-c638502cdcae","width":753,"height":1266,"filename":"original-f2e7ae65a0550d38650af5c25f84b4c5-2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FDsoKE8zcIYRgTNf6P9IP%2F84fcd331-7e56-4480-862d-a738646e9368.png?alt=media&token=1fb441db-1836-4002-8aae-a642d05e03cd","id":"84fcd331-7e56-4480-862d-a738646e9368","width":756,"height":1094,"filename":"original-af745e3d07a6e3f588964ec979b02d21-2.png","type":"image/png","caption":"","border":false}]}
```

Skolelyst new frontpage

**Role:** Digital designer — Designs / Prototypes

**Programs:** Adobe XD — design, prototypes and hand-off, Zeplin — hand-off

### **Reason for the project**

The platform that TINE Handel used was no longer supported. Therefor a new platform was needed. This would in turn mean that the experience for the users would most likely change as the new platform would work differently out of the box. To ensure that we would be able to upgrade to future versions it was also important to keep it as out of the box as possible. 

## **Research**

**Surveys**

Task analytics was used to collect information from the users before the project started.​​​​​​​

​​​​​​​**Interviews and user testing**

User testing and interviews were done with the first iteration. Users were filmed and asked question when using the prototype.​​​​​​​​​​​​​​

**Iterations**

The design went through several iterations before we landed on a design. The problem was keeping it as much out of the box to magento 2 as possible without compromising the user experience and the needs of both the users and the company.

## **Things I am taking with me from the project:**

It was a though start to my career. I started the project with working 2 days a week while finishing school and was able to be at the office only a few times before the pandemic sent us home. Still I have learned and can't wait for more.

\- Secure knowledge from testing so nothing gets lost in the heat of the project. 

\- Do more testing during sprints to secure that what you are creating is not going to cause confusion for the users compared to what they are used to. 

\- The first round of testing might not be enough for the whole project as new things can arise and be discovered.

\- Not everything can be anticipated​​​​​​​

\- If something does not work right from the beginning it might be hard to get the users to start using it when it is fixed. Example here is the favorite lists became confusing with how the users expected it to work and some functions were not there at launch. This made several users stop using this feature and even long after the issues were fixed the users had not gone back since they did not know it was fixed.

## **Did we increase sales or user satisfaction?**

Customer have increased their self-service. Our support desk had an increase in contacts in the start, which was to expect since we changed the whole store and modernised it. Several things changed places and the way they had to navigate was new. Still we have seen that the self-service have increased. They are for example having an easier time finding out if the order they made got put in. They call or email less with question regarding this issue.

The time users used to spend to accomplish a task was around 5 and a half minute. After the update it went down to around 2 and a half minute. We managed to save the users almost 2 minutes of time which can count for a lot when they log in to place their order ten minutes before their order deadline.

**After 6 months**​​​​​​​

\- Increase in sales

\- Size of a shopping cart increased. Meaning overall more products in one cart

\- The contact to the support desk has dropped to expected levels

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FeI34nzXfgaHroYfKRleO%2F4603ee1c-0830-45e8-acb9-9d062022874a.png?alt=media&token=aa9289b0-9f04-42a9-b687-8b072e2ff601","id":"4603ee1c-0830-45e8-acb9-9d062022874a","width":1600,"height":1200,"filename":"original-5c4a01aae20e621b76b529b8691a0c81.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FeI34nzXfgaHroYfKRleO%2Fc6fb7d1d-2e6c-4a56-af37-c6f7441396ad.png?alt=media&token=a2b1585f-ba0f-4a98-aaf6-0a62577bde98","id":"c6fb7d1d-2e6c-4a56-af37-c6f7441396ad","width":1600,"height":1200,"filename":"original-b549b358e433316c96935e01abdffbf2.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FeI34nzXfgaHroYfKRleO%2Fb910192d-9bb8-4f9b-8aa9-de729d58e206.png?alt=media&token=482cd70f-c7fe-40dc-951f-d1f1eeb259fe","id":"b910192d-9bb8-4f9b-8aa9-de729d58e206","width":752,"height":564,"filename":"original-4b136a371ffb04eb0897debc08f79d72.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FeI34nzXfgaHroYfKRleO%2F88db8336-87f0-422d-a198-dd065d2fb2df.png?alt=media&token=1e147b53-a5c4-440f-b2b1-b5e7083bc00d","id":"88db8336-87f0-422d-a198-dd065d2fb2df","width":1600,"height":1200,"filename":"original-3f358ef8c875c7e2ad6f3e5515f036fe.png","type":"image/png","caption":"","border":false}]}
```

Redesign TINEHandel ecommerce platform

Book cover design for the polish version of Flight or Fright: 17 Turbulent Tales by Stephen King and Bev Vincent

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FlljrD6ObhAxYJrSu8Bzx%2Fe57803fd-de25-4231-bb1c-2cb55cdbc64d.jpg?alt=media&token=afd5ebe7-7b1e-4acf-8948-28587a95be79","id":"e57803fd-de25-4231-bb1c-2cb55cdbc64d","width":797,"height":600,"filename":"image_processing20220610-10741-dceaq0.jpg","type":"image/jpeg","caption":"","border":false}]}
```

Book cover for Flight or Fright: 17 Turbulent Tales

As Servicegrossistene has gotten a new logo and new identity the vehicles they drive also needed an update. Small changes have been made as the new and old logo is to live together for a while.

Changes made:

* Colors updated

* Logo and wholesalers name together as new profile says. Logo is therefor centered where just the name just to be.

* A new set of images has been chosen to use on the trucks and the cut has been made to use the same degrees in angle as the new logo

* The fonts used are also updated

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FnbT7Ohuzgq97zh4o4Jji%2F3af3c483-5b4e-4007-a4dc-12d180621e74.png?alt=media&token=39d926db-50ee-42b6-914f-3136aafe8716","id":"3af3c483-5b4e-4007-a4dc-12d180621e74","width":754,"height":560,"filename":"original-b71b7b11e3041fc6ae4167e4c20fc85f.png","type":"image/png","caption":"","border":false}]}
```

## **Electric version**

The electric version of the trucks have small difference to set them a part a little bit. It has a text that says "100% electric" and one that says "I am driving emission-free".

The "100% electric" text changes depending on what the car is using as fuel, but these rules only apply to the emission-free trucks.

The "I am driving emission-free" text is formed in such a way to make it look like the logo for the spesific wholesaler is saying it. It can also be written in either one of the two forms of written norwegian, bokmål or nynorsk. It's up to the individual wholesaler to decide which one they want to use.

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FnbT7Ohuzgq97zh4o4Jji%2Fb420b694-924a-44e8-8368-f28d70132d0a.jpg?alt=media&token=7b81b039-2dcd-47a0-bb48-2a2056556441","id":"b420b694-924a-44e8-8368-f28d70132d0a","width":754,"height":560,"filename":"original-11ce9ca3fb8bea273fc024936d3bf174.jpg","type":"image/jpeg","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FnbT7Ohuzgq97zh4o4Jji%2F726f88aa-5807-41ee-9533-3afb67227594.png?alt=media&token=9f1ef6d9-0db3-48ac-83f7-56fa3c2da86b","id":"726f88aa-5807-41ee-9533-3afb67227594","width":1905,"height":1025,"filename":"original-99c7284aa949266cb97b7dd46c19239e.png","type":"image/png","caption":"","border":false}]}
```

## **Food cart**

```cv
gallery
{"layout":"hscroll","images":[{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FnbT7Ohuzgq97zh4o4Jji%2Fb9f9df3f-89d4-439c-a17c-321c8197b787.png?alt=media&token=91128b05-47e9-47bb-8be5-9499d229a781","id":"b9f9df3f-89d4-439c-a17c-321c8197b787","width":720,"height":419,"filename":"original-e4aa1f5e24a1e7622c145e15cc8838fa.png","type":"image/png","caption":"","border":false},{"src":"https://firebasestorage.googleapis.com/v0/b/maitake-project.appspot.com/o/pages%2FscHdrKID6XXh8DdrrNSHrFCitNf2%2FnbT7Ohuzgq97zh4o4Jji%2F73914454-e665-4bdc-9927-671de4a55654.png?alt=media&token=92b4413e-70e0-4780-a096-9fd3e51d3ae7","id":"73914454-e665-4bdc-9927-671de4a55654","width":720,"height":432,"filename":"original-f696f8b10f9e248508c5777faf7575e9.png","type":"image/png","caption":"","border":false}]}
```

Truck graphic

Digital designer

Digital Marketing Club's 8 week program

TINE Project school: Project management and communication

Part of the team that helped make the stand that won best stand at UMAMI 2023

Best stand at UMAMI

Deltid. Ble originalt med på teamet som en appdesigner, men tok fort på meg ansvar for design og utvikling av hjemmeside. Jobbet også med brukeropplevelse i webportal, lage prototyper og brukertesting av grensesnitt.\
Var også med på filming og redigering av klipp for salgsfremmede bruk.

UX-designer & front-end developer

Full stack designer. Jobber med grafisk og digitalt design. Alt fra messemateriale til ikoner og brukeropplevelse. Ansvarlig for SG sin visuelle identitet.

Digital designer & merchandiser

Deltid. Enkeltpersonforetak. Fokus på webdesign, men jobbet også med design av bokomslag, ikoner, visuell identitet og annet.

Freelance designer

Digital designer med hovedansvar for brukeropplevelse på TINEHandel, tine sin b2b e-handel nettside. Inkludert redesign og videreutvikling av nettsiden. \
Jobbet med brukeropplevelse, brukerreiser, workshops og testing. Satte opp regler og prosess for testing av skisser og prototyper. Ledet testingen og delegert arbeid.\
Var superbruker for admin løsningen for nettbutikken, magento 2. Selvopplært i bruk av page builder, magento sitt CMS verktøy. Lærte opp andre avdelinger i bruk av dette verktøyet.

Amund Bjørnstad

Contact

Work Experience

Education

Features

Certifications