Application Design II / Project 1

on

 

05.04.2023 - 03.05.2023 (Week 1 - Week 4)
Audrey Gracia Djohari / 0348120
Application Design II
Bachelor of Design (Hons) in Creative Media / Taylor’s University
Project 1: App Design 1 Self-Evaluation and Reflection

PROJECT 1: APP DESIGN 1 SELF EVALUATION AND REFLECTION


WEEK 1:

Instruction

Students are required to perform a self-evaluation and reflection based on their mobile application design 1 final project. This project is aimed to document the issues, problems, difficulties and propose solutions to improve the mobile app design. Mobile App design is an iterative process and this task will expose to students the constant improvements one can make to their app. Students are required to submit the documentation in Google Doc for ease of commenting and feedback by the module coordinator.

Last Semester's Final Outcome

Last Semester (semester 3), I designed and reimagine an online flight mobile app of Malindo Air on Adobe Xd. I made the interface looks simpler but add the same time making the features more complex. I also made the color more popping up with more negative space (white space). I did 3 user testings during the process and this is the outcome.
 
Adobe Xd Link: https://xd.adobe.com/view/13a74199-db72-46ca-a0d9-cc71cf23d7d6-46f4/

Fig 1.0: Malindo Air App Mockup


Fig 1.2 Live demo of Malindo Air App

Self Evaluation

1# Header & Footer Margins
  • Before: 
The header title is too close to the camera black square, and the taskbar icons are too close to the bottom vertical line. This happened because during the UI design process, I didn't realize there were camera black square and the vertical line on my iPhone 11 screen. I only realized it after I opened the prototype on my phone. Position adjustment is needed.

  • After: 
I made the size of the purple header box longer and I adjusted the arrow icon and header title to the bottom. I also moved the taskbar icon upward so it won't be covered by the vertical line.

Fig 1.3: Header & Footer Margins (Before & After)

2# Visual Cue on Click
  • Before: 
If the user hovers and clicks the buttons/icons there won't be any changes of the icon's color or shape.

  • After: 
I added a hovering state & click for the buttons & icons so it changes the color of the icons. This way the user will get a reaction feedback on what they click and what they hover.

Fig 1.4: Icon Visual Cue on Click (Before & After)

3# Depth 

Further Reading: https://medium.com/hellotegra/how-to-create-depth-in-ui-design-part-1-c762b652219c
  • Before: 
I did not use any shadow behind the elements. The design looks clean but it appears flat and lacks visual interest. The absence of depth can also make it challenging to establish a clear visual hierarchy within the interface. Furthermore, without depth, the user interface may appear static and less engaging.

  • After: 
Like what is written in the Article by Medium, "Adding a sense of depth to a design can make that design seem more realistic and increase visual interest." So, I added inner & drop shadows to the shapes & design elements such as the taskbar, the wave elements at the top and also the icon bar. Depth in UI design is important because it can enhance usability, provide visual cues, add realism and engagement, and aid in the comprehension of complex information.

Fig 1.5: Design Depth (Before & After)


4# Dropdown Selection 
  • Before: 
I didn't put much thinking on the Seat Class Selection part and I think it lacks information and will make user confused when they see it.

  • After: 
I changed it into dropdown selection with a description "Choose seat class" to make it more obvious. Also, with the triangle symbol, user will know what to click and how to see the seat class selections.

Fig 1.6 Dropdown Selection (Before & After)


5# Minimizing Information
  • Before: 
Some pages have too much information that the user can find confusing and too crowded.

  • After: 
I added a minimize & maximize button so the long information will be hidden in a default mode, if the user clicks the button, then the information will be shown. The aim is to improve the overall user experience by reducing cognitive overload. By minimizing the amount of information displayed, it can help users focus on the most relevant and essential content, making it easier for them to understand and interact with the interface.

Fig 1.7: Minimizing Information (Before & After)


REFLECTION

Experience
If there were no time constraints, I thoroughly enjoyed the process of refining and reevaluating my past UI/UX mobile app design for a flight booking app. It allowed me to delve deep into the details of design  and take the time needed to make significant improvements. Nevertheless, I feel like I lacked sufficient information about this task 1, and was not really aware of the MIB. In hindsight, I should have taken the initiative to familiarize myself with it earlier. Unfortunately, this resulted in me feeling that my efforts during week 1 to week 4 were somewhat wasted, as I primarily focused on class exercises rather than making substantial progress. It wasn't until week 5 that I finally started doing this task.


Observation
Through self-evaluation, I realized the importance of prioritizing user experience over aesthetic appeal alone. I focused on simplifying complex features, streamlining the user flow, and enhancing the app's overall functionality. This re-evaluation process allowed me to address pain points and make the app more intuitive and user-friendly. By embracing this process, I learned to elevate the user experience, making the flight booking app more efficient and enjoyable for its users. As the renowned artist and designer Leonardo da Vinci once said, "Simplicity is the ultimate sophistication." This quote encapsulates the essence of self-evaluation and refinement in design. By continuously refining our work, simplifying complex ideas, and eliminating unnecessary elements, I can produce better designs that are not only visually appealing but also functional, intuitive, and impactful for users.
  
Findings
I found that Self-evaluation and refinement are essential skills for designers. While artistic expression and aesthetics play a role, designers must also prioritize the needs of users and strive to make their lives easier. Design is not just about self-expression, it is about solving problems and enhancing functionality.



Comments

Post a Comment