Made by Casey
 The mockup of the app’s  wireflow  ( a combination of wireframes in a format of a flowchart to demonstrate the steps a user will take to complete a task ).

UI Sprint, Creative Economy Week

Prior to the Creative Economy Week, in conjunction with Hari Belia Kebangsaan, this exclusive sprint was held on August 3, 2019, by the Ministry of Culture, Youth and Sports at the International Convention Centre (ICC).

In only two hours, my brief was to design an app which help users find and do their own make-up via camera. It needed to include suggested presets (e.g. colour combinations, make-up, etc.). When users select a preset, it will overlay on their face so they can see what they look like using that make-up combination.

 The mockup of the app’s  wireflow  ( a combination of wireframes in a format of a flowchart to demonstrate the steps a user will take to complete a task ).

The mockup of the app’s wireflow (a combination of wireframes in a format of a flowchart to demonstrate the steps a user will take to complete a task).

 There are three actions (from left to right) in the main screen:  gallery , to access your phone’s gallery,  camera , to take a photo, and  settings , to customise, for example, the type of resolution you would like to export your photo in. To indicate the camera button is primary, it is in a different colour amongst the other two buttons. It is placed in the middle so it is familiar to the user as other existing and popular apps (for example, Instagram and Snapchat) do the same as well.

There are three actions (from left to right) in the main screen: gallery, to access your phone’s gallery, camera, to take a photo, and settings, to customise, for example, the type of resolution you would like to export your photo in. To indicate the camera button is primary, it is in a different colour amongst the other two buttons. It is placed in the middle so it is familiar to the user as other existing and popular apps (for example, Instagram and Snapchat) do the same as well.

 Since this app was designed for the iPhone, the icons were placed in the same area as in the Camera app: gallery on the left, camera button in the middle, and the ‘rotate the camera view’ feature on the right. In UX design, it is vital to simulate this sensation of familiarity, to minimise painpoints and ease the app’s usability.

Since this app was designed for the iPhone, the icons were placed in the same area as in the Camera app: gallery on the left, camera button in the middle, and the ‘rotate the camera view’ feature on the right. In UX design, it is vital to simulate this sensation of familiarity, to minimise painpoints and ease the app’s usability.

 Once a photo is taken (from the “ camera ”) or selected (from the “ gallery ”), specific icons will appear at the bottom of the photo—this is to give users options on which area they would like to put virtual make-up on. Presets are positioned first as the design brief mentions this as a requirement. The row is slidable horizontally.  There are other options, i.e. Lipstick, Blush, etc. However, due to time constraints of this 2-hour sprint, the icons were not drawn.

Once a photo is taken (from the “camera”) or selected (from the “gallery”), specific icons will appear at the bottom of the photo—this is to give users options on which area they would like to put virtual make-up on. Presets are positioned first as the design brief mentions this as a requirement. The row is slidable horizontally.

There are other options, i.e. Lipstick, Blush, etc. However, due to time constraints of this 2-hour sprint, the icons were not drawn.

 Once the preset icon is clicked, a row of presets (labeled as A1, A2, etc.) will appear on the top. This row is also slidable horizontally.  Due to time constraints, the presets couldn’t be customised to high-fidelity, so different colours were used instead.

Once the preset icon is clicked, a row of presets (labeled as A1, A2, etc.) will appear on the top. This row is also slidable horizontally.

Due to time constraints, the presets couldn’t be customised to high-fidelity, so different colours were used instead.