A. TYPOGRAPHY AND COLORS

The colour scheme is comprised of vibrant colors to complement and contrast the app’s dark mode style.

B. ICONS

All icons I have used in the project are downloaded from FontAwesome.

C. Logo and Name of App

The logo is simple using the colour schemes of the app, hinting the connection with facial recognition

The name suggests a clear understanding of captions used in the app. I believe it is straightforward and easy to remember as it proposes the idea of the app in the name.

High Fidelity Interface

A. ONBOARDING SCREENS

splash screen, camera and gallery page for choosing an image and the generated captions page

B. CONTENT SCREENS

Previously saved captions menu and search by keyword menu

Link to Figma design: https://www.figma.com/file/wrOK5NDX07AsPz925P9XLq/Caption-App-basic?node-id=103%3A3

C. User Testing

Testing was done with scenario tasks, where 5 users have to rate the experience of the task with :

1- very poor

2-poor

3-average

4-very good

5- excellent

Task 1. This is your first time using this application, can you navigate to the captions display section?

Step 1: locating the camera or gallery buttons to upload an image

Step 2: successfully selecting and uploading image

Step 3: successful scan led to caption section

Average rating: 4.3(Good)

Task 2. You wish to find a certain caption without scrolling down the caption boxes. Can you filter or sort your desired category to help you locate it more easily?

Step 1: locating filter and sort by buttons

Step 2: select multiple filters by clicking on the check boxes

Step 3: select multiple sorting out by clicking on the check boxes

Step4: view of new displayed captions

Average rating: 5 (Excellent)

Task 3. You liked a caption and wish to save it for later use or copy it instantly. Can you easily copy or save captions to your keyboard?

Step1: locate the heart icon and press it to save the caption

Step2: locate the copy icon and press it to copy it

Average rating: 5(Excellent)

Task 4. You wish to go back to previously saved captions. Can you navigate through the app to find the saved captions menu?

Step 1: use the menu bar to find the heart icon button

Step 2: open the previously saved captions

Average rating: 5(Excellent)

Task 5. You wish to search for your own captions. Can you navigate through the app to find the search menu?

Step1: use the menu bar to find the search icon button

Step2: type in a keyword in the provided text box

Average rating: 5(Excellent)

Conclusion: The interface and performance of the app are straightforward and easy to use. Following are the aspects that were pointed out after gaining a deeper understanding of our target audience.

Icons on the menu

Users identified that the search icon had a thicker stroke than the saved icon, making the menu unappealing from an aesthetic point of view.

before

after

2. Not all of the buttons that have been designed are functional – recent, favourites, selfies and settings icon

During user testing, it was noted that the image uploading page has inactive buttons, which, when clicked, do not redirect the user to any other page. This is because those features are currently inactive, but might be running at some point in the future. At this stage, they serve as a complement to the design.