Application Design - Project 3

Week 11- Week 15

Guan Wee Lun/0364012
Application Design/Bachelor of Design in Creative Media

Project 3: Wireframe

---

Content Table

1. Lectures
2. Instruction 
3. Progress
4. Reflection

---

Instruction

---

Progress

Requirement

After completing the UX design process, students will create a low-fidelity prototype of their app. They'll use a prototyping tool like Adobe XD, Figma, or InVision Studio to arrange their wireframes, define user actions, and add visual feedback. The goal is to connect all the screens and create a clickable, interactive version of the app.
To document this process, students will create both a video and a detailed written analysis. The analysis should cover the steps taken and the solutions to any issues encountered during testing.
In this phase, students will invite guests to test the low-fidelity prototype. As the guests interact with the app, students will perform usability testing to gather valuable feedback. This includes observing user behavior, noting pain points, and collecting all responses and feedback.

Inspiration/References

Pinterest Board

Figure 1.1 Artstyle reference = Minimal Mono

Figure 1.2 box reference

Figure 1.3 mono color tone

Figure 1.4 Layout references

Figure 1.5 side bar reference

For the references part, most of them can be said as minimal style that make the user interface clean and energic, which can let the user be more interested in the interface, design, my expectation for interface design is to be clean and minimal

Sketches

Figure 1.6 homepage ideation 1

Figure 1.7 homepage ideation 2

Figure 1.8 profile/sidebar ideation 

Figure 1.9 homepage ideation 3

Figure 2.1 license ideation

Figure 2.2 homepage ideation 4

Figure 2.3 sidebar ideation

Figure 2.4 homepage sketches

Figure 2.5 Profile page

Figure 2.6 icon layout

Figure 2.7 renewal ideation

For the sketches part, I just sketch out based on the reference and what in my mind, the overall layout design not including the flow inside

Micro-interactions

Figure 2.8 navibar Transition

Figure 2.9 drop down Transition

Figure 3.1 drop down Transition example

This is the transition that i am using for my wireframe, simple transition that can be archived 

Site Map

Figure 3.2 sitemap/user flow

Basically, the user will enter the apps then go into profile page, the profile page view the digital license, 

user testing

Summary of feedback from user

• Driving License Renewal: The user suggested the "Competent Driving License" button was too small and needed a box around it to indicate it was a selectable option. They also found the renewal process easy.
• General Feedback: The user thought the design was "more clean" and "more modern" compared to the old version. They suggested that the font size could be bigger for elder users, and noted that the words in the original design were "too light" and "too tiny."

Lo-Fi prototype walkthrough

Figure 3.3 wireframe overview

Working file

Submission

APPLICATION DESIGN _ PROJECT 3_LOFI APPDESIGN PROTOTYPE by GUAN WEE LUN

 

---

Feedback

Week 11

• In screen, it can be scrollable, don't just fixed on size of screen

---

Reflection

Project 3 was all about bringing my design ideas to life with wireframes and a low-fidelity prototype. It was a crucial step to test the functionality and user flow before diving into the final design.
I observe that how poor is for user experience feedback from project 2 that not all can be use to frame this ui.
The usability testing was the most frustrating part, as I need to show my friend a wireframe that without any image and color, they will need to test it under my guidance, as there will need icon in button to show it's function, I will need to verbally introduce how is my apps going to work in project 4