Color Palette App

Designers:         Johan Krogh Eide og Kristine Sørensen
Duration:           Ongoing
Where:              Oslo
Software:           Illustrator, Balsamiq and Photoshop

 

About the project
 

When it comes to redecorating and painting interiors, it can be difficult to determine which colours to match with each other, and not to mention the colours that will go well with the interior you already have.

We will use the paint manufacturer Jotun as an example for the project. As of now they offer inspirational colour palettes and images put together by professionals. We wanted to create a service where the customer can make their own palettes based on Jotun’s colour selection, materials and other interior.

Prototype

1. Jotun app icon on the home page

1. Jotun app icon on the home page

2. Information about the service. Choose whether to create a new palette or go to your saved
palettes

3. When you start a new project you are presented with a page that is separated into two sides. Your palette is on the left side and will stay stagnant no matter what action you do on the right side



On the right side you have three choices you can navigate between by pressing the icons on the bottom right corner

 

4. Drag the color from the color chart into the palette

5. Adjust the size with two fingers diagonally

6. Tap to attach color in the palette

7. Drag to the left and press X to remove

 

8. Press the camera in the menu to proceed to the service Capture Color

9. Tap the camera icon on the Capture Color page to add or take a new picture

10. Take a picture of an item that has the color you want to find

10. Take a picture of an item that has the color you want to find

11. Your image is uploaded on the Capture Color page

 

12. Select a place on the image where you want to find a similar Jotun color

13. It comes up several suggestions on colors that are similar

14. Select the color you think is most similar and drag into the palette

15. Suggestions on other colours that match appears that you can drag into the palette. When you are ready press the material icon

 

16. Press the material icon and chose the material you want

17. Drag the preferred material into the palette. Then press the download icon at the top of the palette when you are happy with your result

18. The palette appears on the entire screen. 

 

Maling i butikk liten.jpg
You can send the palette by e-mail, print it out or order a copy from Jotun. You can bring this to your local paint shop or to the store to buy furniture or interior items

You can send the palette by e-mail, print it out or order a copy from Jotun. You can bring this to your local paint shop or to the store to buy furniture or interior items

Mock-ups

Mockups of the design using Balsamiq

TEST

We downloaded the pages as a PDF so that we could simulate the use of the app on an ipad. We got help from an external interaction designer to test the app, so we could see what he understood and what seemed natural for him. This was very rewarding and we identified several areas for improvement and what was not intuitive.

    RESULTS FROM THE TEST AND CHANGES TO PROTOTYPE.

    • Make it more clear from the start what is the ultimate goal and communicate this in a visual way (no text) 
    • Making the icons even clearer / easier to understand
    • Enhance the end results, reinforce the feeling that you has reached the goal.

    PRELIMINARY CHANGES ON THE PROTOTYPE AFTER THE FIRST TEST

    Jotun app screens v01_2.jpg
    Jotun app screens v02_2.jpg
    Nye og gamle iconer.png

    Added shadows to the colored squares in the menu to make it clear that it's individual items and that they can be tapped and dragged. Changes to the icons to make them easier to understand.