Scene_2.jpg
Rembrandt's secrets to success

An app for enthusiasts for the famous Dutch painter - Rembrandt.

It aims to guide you to understand his unique techniques and appreciate his representative works in an interactive and engaging way.

Individual project

A given task: Create an app for a set of images 

UI/UX

Jan.2020, 2 weeks.

 

Research

01 Discussion

Topic: By which way to categorise the image set would be engaging to the aim target group?

I talked with several classmates in the same painting class, who know Rembrandt more or less.

Findings: A rough ranking of possible interesting ways of exploring those images:

  1. What makes his works prominent.

  2. His talented skills: strokes, light effects..

  3. Different styles during different periods.

  4. By genres, material, size...

1.Rembrandt 174 Painntings HD 170...

2.Rembrandt's Art

3.Rijksmuseum

02 Comparative study

How is the user experience on similar apps?

For the first app, there is no categorisation, the only information is some paintings and their names, not displayed in an engaging way.

For the second, Works are classified by timeline and genres, quite convenient for users to explore similarities and differences between different genres and materials.

The third one is a guide tour app of a museum, the works displayed are recently on show. it concludes detailed explanation, useful for users to explore the story behind.

03 Desk research

To get insights from different angles on appreciating Rembrandt's works. 

Dive into Rembrandt's life experience to figure out the background and social impacts of his representative works.

Many enthusiasts and experts also provided with interesting views on the masterpieces. 

Screen-based interaction

04 Quick sketches & Feedbacks

I drew a low-fidelity wireframe of main functionality, which combined different ways to retrieve images. 

  • History - guide users view works of different periods. I expect a feeling like when they are in a physical gallery.

  • Report - divide the image set by different techniques reflected.

  • Search - search by other practical options such as genres, materials...

I narrowed down and  chose to only focus on the "Report" part, which my tutors and peers considered more interesting 

 

Prototyping & Testing

Home_page_Rembrandt’s_techniques_to_su

Information architecture

A combination of  hierarchical and experience driven navigation

Low-fidelity wireframe

IMG_8733.jpg

Strokes

Composing skills

IMG_8734.jpg
IMG_8736.jpg
IMG_8732.jpg

Light effects

Skills for portraying characters' emotions

Home page

To quickly figure out an appropriate layout of main pages.

High-fidelity wireframe

Hover to play :)

Home page

Light effects

Composing skills

A high-fidelity prototype for usability testing in a real situation.

Usability test

IMG_8683.jpg
IMG_9216.jpg

Testers were required to interact with our app and finish two given small tasks in a separate room, where their interactive behaviours got recorded.

By listening to their real-time feedback and observing their touch behaviours shown on the screen,  I was able to notice  some really detailed problems.

 

Iteration

Screenshot 2020-04-08 at 23.09.09.png

First version

Screenshot 2020-04-08 at 23.10.27.png

Final version

Home page

Explore a more engaging and unique and understandable way to show selections.

First version

Screenshot 2020-04-08 at 23.35.17.png
Screenshot 2020-04-08 at 23.35.28.png

Final version

Introduction part

​Amplify the pleasant experience with interactive methods

Screenshot 2020-04-08 at 23.34.55.png
Screenshot 2020-04-08 at 23.35.39.png

Final version

Introduction part

Find a more geeky way to present information to make it  fit for the target user group better.

 

Final delivery

*All the paintings are from WikiMedia Commons

*The stills of “The Grandmaster” are from https://c.m.163.com/news/a/DVNJK4SN053731LY.html?spss=wap_refluxdl_2018&referFrom=

Thank you for making it here! 🥳

Screen-based interaction