Application Design: Project 3_Lo-Fi App Design Prototype

July 05, 2025

Application Design: Project 3_Lo-Fi App Design Prototype

26 July 2025 -

CHONG CHENG TAO (0371072)

Application Design | Bachelor of Design in Creative Media | Taylor's University

Project 3: Lo-Fi App Design Prototype

List

LECTURES

Week 10

Wireframes

Sketch everything and keep your curiosity fresh!
Sketching brings your thinking out for everyone to see.
No images, no details, no colors.
Sketching is accessible, no skill gap and low stakes.
Start using big brush (tend to include less details), using thin pen for detailing.
Quantity > quality, focus on bringing as much as thinking on paper.

Exercise

We started the exercise by sketching the wireframe of the existing apps/softwares in 1 minutes, which is a good method for warm up.

Warm-up exercise

Week 11

User Interfaces (UI)

*Center alignment & Optimal alignment

*60/30/10 color theory

Week 12

As a designer:

Give a specific task.
Observe and take notes.
Introduce the task (e.g. what are you showing, what is the goal?)

As a tester:

Try to complete the task.
Describe your experience.
Give CRITIQUE instead of CRITICISM.
Always start with positive feedback > Details you like > Things to improve > Encourage closure.

Take note on what tester struggle and make mistake. Analyze the problem and improve it.

INSTRUCTIONS

This is the Module Information Booklet for this module:

Application Design: Lo-Fi App Design Prototype

Wireframes
Micro-interactions
Core features interaction
Lo-Fi prototype
SiteMap
Final Submission

Requirement

Once the UX design process is completed, students can now create a low fidelity prototype of the app. Students needs to arrange all the screen wireframes, actions, visual feedback and link them up in Adobe XD/ Figma/ Invision Studio or any other prototype software’s. Students need to document this process with video and produce a document containing detail analysis of this task and the solutions to the problems faced by the testersv

Based on the information gathered in task 1, students will:

Perform usability testing whereby they will invite guests to test out their low fidelity prototype
Gather all the information, response, feedback, pain points observed from the test.

1. Wireframes

In class, we are given 8 minutes in class to have a detail sketch for our redesign app.

Fig 1.1 Homepage wireframe

Here is the way to gain more ideas, do the sketch with different themes (e.g. different shape, kid version, elderly version, futuristic....).

Fig 1.2 Different hompage based on themes

Then, extract the interesting ideas from the sketches, combine with the first version of the pages, make the second version.

Fig 1.3 2nd homepage wireframe

6 Screens

We will need to do 6 screens for the redesign app with clear interaction and navigation. I focused on 2 of the main features, commission request and artwork submission.

Fig 1.4 Commission request

Fig 1.5 Artwork submission

Fig 1.6 Reference

Fig 1.7 First draft Figma wireframe

2. Mirco-interactions

Some micro-interactions are applied on the components and animation.

Components

Some components have the color animation after clicking. This is done by using Smart animation in Figma.

Fig 2.1 Color animation

Screen

Slide in & Slide out animations are used when navigating into subpages, helping the user to understanding their current location in the app.

Fig 2.2 Slide in & Slide out

3. Core Features Interaction

I focus the interaction in 3 features:

Viewing artwork & artist
Receive commission
Upload artwork

The flow is developed based on the user flow documented in Project 2: UI/UX Document

Fig 3.1 Draft prototype

4. User Testing

Here is the sumamry of problem after user testing:

The design of commission cards are lack of identity for different statuses. (e.g. New, Active, Done, Cancelled).
Some icon is confusing (e.g. message & email).
"Receive" might not be a suitable word for receiving commission. Some wording for button would not be suitable.
The flow for receive commission is unclear and too rush, more steps are required within the start and end (e.g. payment received notification, ask for persmission to upload).
User should have a way to access commission status easily.

Link to user testing video

5. Lo-Fi Design

Fig 3.1 Draft prototype

6. SiteMap

Fig 4.1 SiteMap

7. Final Submission

Fig 7.1 Final Submission_Lo-Fi App Design Prototype

Link to Lo-Fi prototype

Fig 7.2 Lo-Fi prototype walkthrough video

Fig 7.3 Lo-Fi App Design Prototype_Slide