Application Design I

-


30/03/2021 - 14/07/2021 / Week 1 - Week 15

Ngu Kah Shin / 0347666
Application Design I / B' in Creative Media / Taylor's Design School

Project 1 & 2: UI/UX Design Proposal Documentation
Project 3: Lo-fi Protoype
Project 4: Complete Mobile App Design
  INSTRUCTIONS  


  PROJECT 1 & 2: UI/UX DESIGN PROPOSAL DOCUMENTATION 


 1. EXPLORING & UNDERSTANDING
Before starting on any writing down of ideas, I felt it was important to educate myself on mobile app user interface design prior to coming up with any ideas. Mr. Hafiz gave us the following helpful resources to get us started; nevertheless, I found that I needed to do some additional reading to fully grasp all he had covered.
In Maham Chapal's The 6 key principles of UI design, it was stated that a website's conversion rate might be increased by as much as 200% simply by having a well-designed user interface!

1. Clarity
        - only 8 seconds to grab user's attention
        - questions to ask yourself when designing:
    • Is your navigation intuitive? 
    • Are users directed and encouraged to move from one page to the next with ease?
    • Have you used highly visible buttons that prompt users into clicking them?
    • Is the purpose of each element on your product, website or application, clear and easy to understand?
    2. Familiarity
        - usability is closely linked to familiarity 
        - users depend on interfaces that is familiar to their digital experience.
        - ensure that all elements are in sync throughout the interface.
        - benefits of interface with high familiarity:
    • increases user retention
    • easier for UI designers
    • reduces the learning curve 
 3. User Control
        - allow users to reverse their actions easily
        - exit button is clear

 4. Hierarchy
        - creates an order of importance, directing a user’s attention
        - make information easier to consume & navigate
        - can be achieved by changing:
    • color- bright stand out from muted background
    • size- big stand out
    • font- bold brings emphasis
    • negative space- give breathing room!
 5. Flexibility
        - efficient for all kinds of users
        - flexible UI examples:
    • Shortcuts for performing frequently used steps with a single click
    • Advanced search features
    • Incorporating filter bars
 6. Accessibility
        - When designing products and websites, meet the requirements of WCAG (Web Content Accessibility Guidelines).
        - incorporate accessibility:
    • Use the WebAim Color Contrast checker to create strong color contrasts
    • Ensure all your images have corresponding alt attributes
    • Ask yourself if users can easily navigate your website via the tab key on your keyboard
Reading up on... Case Studies: Grab app
Grab is one of the most successful startups in Southeast Asia, and its services include ride-hailing, food delivery, logistics, and payment. By studying the work of other designers and reading about their processes, I was able to improve my understanding of UI designs considerably. It was enlightening to see how they dealt with obstacles and how they went about their work.


Fig 1.2 Going online and switching jobs

Redesigning the transport booking experience for Grab app by Rice Tseng
Fig 1.3 Motion principle for Grab service

Other case studies:

 2. LECTURE LEARNINGS  

Mr Hafiz's lecture slides:
Fig 1.4 Module's Lecture Essentials PPTX by Mr Hafiz

What is expected in the documentation of proposal :
Fig 1.5 Module's Lecture Documentation PPTX by Mr Hafiz

Mr Hafiz's wise words I have jotted down during class:
  1. DO NOT use stock images!
    • What if you can never find the images again? You'll have to pay for the image if the client insists on using that placeholder image you thought you'll never use! 
  2. Include killer feature in LO-FI prototype
    • a hook, unique selling point that makes the product/service indispensable
  3. For User Playtest, later on, we don't have to include checking the latency time for users to find a certain button or explore a certain feature but can definitely consider if we do deal with clients one day.
  4. Read up on relevant case studies to help further understanding of designing
  5. Allowed to use either Figma or Adobe XD 
During the next class, I proposed my idea of redesigning the Taylor's App. Mr Hafiz used my proposal idea and discussed in class. 

Fig 1.6 Feedback from Mr Hafiz
 3. IDEA DUMP ON MIRO BOARD  

Allllll my ideas, references, SWOT analysis, and other useful tidbits in regards to the proposal are laid out in the Miro board below. There's no need for me to blabber anymore here!

Fig 1.7 Miro Board


 4. DESIGN PROPOSAL DOCUMENTATION! 

As soon as my idea and Miro board findings were approved by Sir Hafiz, I proceeded with the proposal.

Fig 1.8 Design Proposal (PDF)

Feedback: 
  • for sketch wireframe, show navigational arrows
  • (next task) add comparison as case study (current app)
  • (next task) user persona cut down to just 3
  • (next task) have 3 user playtest for the lo-fi wireframe prototype

  PROJECT 3: LO-FI PROTOTYPE 

 1. EXPLORING & UNDERSTANDING
As soon as the UX design phase is finished, a lofi prototype should be prepared, followed by usability testing. We're supposed to compile every bit of data on the test's results, including user reactions, comments, and any problems they encountered. 

Here are some guides provided by Mr. Hafiz:

Fig 2.1 Elements and designs for mock posters from Canva


Fig 2.2 Lo-Fi Prototype 

 2. USER PLAYTESTING! 

General question flow asked in user playtest:

Personal info:
1. Name, age, occupation.
2. What is your field of study
3. Where are you currently studying in?

Tasks:
1. Take attendance for Application Design class
2. Show your student ID
3. Find out what class is happening on Wednesday of Week 7
4. Imagine you are a new student. You are trying to find a guide that might be helpful to you as a new student.

Overall experience:
1. On a scale from 1 to 5 (1=not at all likely, 5=very likely), how likely are you to recommend this app to a friend?
2. How frequently would you use this app?
3. How was the experience of using the product to complete this task?
4. How easy or difficult was it to navigatWhat areyour thoughts on the design and layout?



Fig 2.3 User Playtest (MP4)

After the playtest with three users, it was concluded that several of the functions and designs might be improved. Mr. Hafiz provided me with some feedback as well. The improvement changes can be seen in Fig 2.4 and 2.5 below:

Fig 2.4 Changes in Timetable page

Fig 2.5 Changes in My Modules page


  PROJECT 4: COMPLETE MOBILE APP DESIGN  

 1. COMPARISON BETWEEN ORIGINAL & REDESIGNED


Fig 3.1 Comparing original version and redesigned version


Fig 3.2 Video walkthrough for Redesigned Taylor's Mobile App

Figma file : 

https://www.figma.com/file/vB4aNiaoRWxaSZWhgbT0k4?node-id=0:1
  REFLECTIONS  

Designing an app is always very fun to me! I thoroughly enjoyed myself doing this project. Learning the process before making a prototype, using Figma and dissecting the user play tests to further improve my app was very enlightening and eye opening. There were the stressful times like chasing deadlines and juggling between the different subjects but all in all, redesigning an app we as student have to use everyday, into something much greater was super fun! I feel grateful for all the help from our laid-back yet extremely supportive guide and lecturer, Mr Hafiz :)

Comments

Post a Comment