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.
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 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.