APPLICATION DESIGN TASK 2: UI/UX DESIGN DOCUMENT


21.10.2024 - 02.12.2024  / Week 5 -Week 11

Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media 

Application Design I/ DST60504 / Section 01

Task 2: UI/UX Design Document

TABLE OF CONTENTS

1. INSTRUCTIONS

2. TUTORIAL

3. TASKS

4. FEEDBACK

5. REFLECTION

INSTRUCTIONS

TUTORIAL

CLASS EXERCISES

Week 5 class exercise

In a group of 3 or 4, participants need to write the features down on the sticky note papers and on the whiteboard, categorize the features and group them in categories and features based on the given topic: a travel planning mobile app. Next we have to come up with an idea of app and create categories and features for them in Miro. 

Fig W5.1 Card Sorting with Sticky Notes

Our group decided to work on a "Personal Car App" and use a card-sorting activity to figure out how the features should be organized. The idea is simple: this app is for anyone who wants to take better care of their car without all the stress. Whether it’s tracking maintenance schedules, keeping up with repairs, or just staying on top of fuel expenses, the app will make managing your car easier and more organized. We want it to be a go-to tool for car owners to handle everything in one place, so they can spend less time worrying about their car and more time enjoying the ride.

Fig W5.2 Card Sorting on a personal car app on MIRO


Week 6 class presentation:
Our presentation took place the week after the card-sorting exercise. However, two of our group members couldn’t make it, so it was just the two of us who ended up presenting both exercises. We managed to cover everything and explain our work as clearly as possible.

Fig W6.1 Presentation on the card sorting Exercises
Week 7 class exercise:
Today, we learnt on how to create user personas. We continue from the personal car app with our group and came up with 3 user personas to get a better understanding on how user personas work .

Fig W7.1 User Persona exercise



TASKS

TASK 2: UI/UX DESIGN DOCUMENT

On week 5, we were briefed on the second task where it is mostly on research and writing. We have to get at least 50 interviewees to complete our survey form and at least 6 people for the user testing. 

Determine and verify their target audiences.
● Outline the content element of their app, and exercise card sorting method to achieve optimum information architecture.
● Listing the app features and identifying the application Minimum Viable
Product (MVP).
● Create wireframes for main screens

The outline of the document should include:
  1. Introduction:
    Begin by introducing the purpose and scope of the UX design document. Clearly define the target audience and outline the problem the app seeks to address. Provide context for why this document is essential to the design process.
  2. User Research:
    Detail the findings from user research, including key insights from user personas and journey mapping. Highlight how these insights influenced the design decisions and how they align with user needs and expectations.
  3. Information Architecture:
    Explain the organization of the app’s content to ensure a seamless user experience. Describe the methods, such as card sorting, used to categorize and structure the content effectively. Discuss the rationale behind the final information architecture.
  4. MVP (Minimum Viable Product) Features:
    Identify the app’s core features, emphasizing the functionality included in the Minimum Viable Product (MVP). Clarify how these features address the primary user needs and align with the app’s goals.



Week 5/ Card Sorting for the app chosen

Identify Content: I listed all the pieces of content or features in the Watsons app that I want to include in the card sort. I used Figma for this task, and sort the cards into categories of:
  • Bottom Navigation Bar
  • Home Page
  • Product Categories
  • Shop by Each Category
  • Search & Filters
  • Product Details
  • Discover Section
  • Shopping Cart & Checkout
  • Profile



Card Sorting of current Watsons My app design 


Fig T2.1 Card Sorting of current Watsons My app design in Figma


Card Sorting of New Watsons My app design

I attempted to organize features on how each page might have. The considered new features were:
  • Barcode scanning Feature
    to access the details of a product (after that I realized this feature already exist)
  • Customer-Generated Wishlists & Gift Registries
    allows users to create and share wishlists and gift registries
  • Community Section for Q&A
    engage users with Q&A, product reviews, and user-generated recommendations
  • Gamified Loyalty Program tasks and badges
    users can complete tasks and earn badges to encourage engagement and reward loyalty
  • Categories placed in Home Page
    to improve ease of access, categories should be clearly displayed on the home page for quick navigation

Fig T2.2 Card Sorting of New Watsons My app design in Figma



USER RESEARCH

Quantitative Methodology: Survey Questionnaire

Link to:



After creating the survey on Google Forms, I shared it through various platforms, including Instagram Stories, Teams, and Instagram direct messages. I also used WhatsApp to distribute the form to my friends, schoolmates, and family. Additionally, my parents and aunt helped gather responses by sharing the form with their colleagues and friends at their workplaces. Therefore, thanks to their help, I successfully received 53 responses in total.

Fig T2.4 Survey Distribution




Qualitative Methodology: Interview Questions

Links to:




*question 14 typo: was meihui* instead of Chloe


CARD SORTING ACTIVITY

Links to:

Using UXTWEAK, I set up a hybrid card sorting activity to improve the Watsons app’s user experience. Since the tool limits it to 20 cards, I trimmed down the content and focused on the key features like barcode scanning, product categories, wishlists, etc.

Participants sorted these into five categories: Home, Shopping Experiences, Rewards & Discounts, Account & Personalization, and Community & Support. Their sorting choices and feedback helped me spot patterns and better understand user preferences. These insights will shape a more user-friendly app layout, making it easier for people to find what they need.

Fig T2.7 UXTWEAK preview

Fig T2.8 List of categories and features



INFORMATION ARCHITECTURE MAP

Link to:




USER JOURNEY MAP

Link to:

Fig T2.10 User Journey Map



USER FLOW CHART

Link to:

Fig T2.11 User Flow Chart




MOBILE APPLICATION UI/UX DOCUMENT 


FEEDBACK


WEEK 5

General Feedback 

  • include group picture in blog
  • start finding users for survey (minimum of 50)
  • create questionaries

Specific Feedback 

  • have to analyze all features of app in figma

WEEK 6

General Feedback

  • -

Specific Feedback 


WEEK 7

General Feedback

  • -

Specific Feedback 

    • -

    WEEK 8

    ILW

    WEEK 9

    absent

    WEEK 10

    General Feedback 

    • -

    WEEK 11

    General Feedback 

    • -

    Specific Feedback 

    • overall of Card Sorting looks good and correct
    • connect 'browse products and events depending on the deal' to 'product details'
    • put the 'end' after successfully purchasing a product



    REFLECTION

    Experience

    In this task, I learned so many new things, like how to do card sorting, create maps like user flowcharts, and analyze user feedback. At first, looking at past students’ work was super overwhelming. It felt like there was so much to do, and I honestly didn’t know where to start. But as I went along, things started making more sense, and I managed to organize my work better.

    Mr. Zeon was really helpful and patient with all of us, guiding us through the tasks step by step. Did I mention? He’s actually so humorous and easygoing! It made the whole process feel less stressful, and I appreciated how approachable he was whenever we had questions or got stuck. Looking back, I do regret not showing my progress or asking for feedback sooner. I think it would have made my work a lot better because sometimes, working alone means you miss things or second-guess yourself. There are parts of my project that I’m not fully happy with. If I had asked for feedback earlier, I could’ve spotted and fixed those things more easily.

    Even though it was tough, I actually enjoyed the process. It was satisfying to see everything come together, and I feel like I’ve improved a lot in understanding user-focused design. Next time, I’ll definitely try to involve others more and not leave everything until the last minute. This task was a good learning experience, and it showed me what I need to work on for future projects.


    QUICK LINKS


    TASK 1: MOBILE APPLICATION PROPOSAL

    TASK 2: UI/UX DESIGN DOCUMENT

    TASK 3: LO-FI APP DESIGN PROTOTYPE

    FINAL PROJECT & E-PORTFOLIO



    Comments

    Post a Comment

    Popular posts from this blog

    APPLICATION DESIGN II TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION

    Image
    24.04.2025 - 15.05.2025  / Week 1 -Week 4 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Task 1:  App Design 1 Self-Evaluation and  Reflection TABLE OF CONTENTS 1.  INSTRUCTIONS 2.  EXERCISES 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS CLASS EXERCISES WEEK 3 EXERCISE To redesign a boarding pass based on prioritizing the main information. We were given an information page and we worked in groups to design a boarding pass. process Outcome WEEK 4 EXERCISE To create a task flow chart/wireflow chart for a booking app. Our group have chosen a cinema app (booking movie). Task flow chart for cinema app TASKS TASK 1: APP DESIGN 1 SELF-EVALUATION & REFLECTION  For this task, we need to reflect on the final project we created in Mobile App Design 1. The main goal is to evaluate the app we designed, identify what didn’t work so well, and think of ways to improve th...
    Read more

    INFORMATION DESIGN EXERCISES

    Image
    03.02.2025 - 17.02.2025  / Week 1 -Week 2 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Information Design / GCD60504 / Section 01 Exercises TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  EXERCISES ↪ EXERCISE 1 ↪ EXERCISE 2 4.  FEEDBACK 5.  REFLECTION LECTURES INSTRUCTIONS CLASS EXERCISES EXERCISE 1: QUANTIFIABLE INFORMATION Objective: Quantify raw data and visualize information through a photograph. Create a visual representation of numerical data that allows for easy interpretation and analysis. Instructions: Gather a set of objects and categorize them based on quantifiable factors such as color, shape, or pattern. Arrange the objects in a presentable layout or chart. Clearly label the quantities and data using written indicators (e.g., pens or markers). Example Objects: Box of LEGO pieces Jar of buttons Jar of marbles Set of colorful rubber bands M&Ms, coins, or other small items The goal of this exercise is ...
    Read more

    APPLICATION DESIGN FINAL PROJECT & E-PORTFOLIO

    Image
    11.11.2024 - 12.01.2025 / Week 8 -Week 16 Emily Goh Jin Yee / 0357722 / Bachelor of Design (Honours) in Creative Media  Application Design I/ DST60504 / Section 01 Final Project: Hi-Fidelity App Design Prototype & E-portfolio TABLE OF CONTENTS 1.  LECTURES 2.  INSTRUCTIONS 3.  TASKS 4.  FEEDBACK 5.  REFLECTION INSTRUCTIONS TASKS FINAL PROJECT: HIFIDELITY & E-PORTFOLIO After completing the low-fidelity app design prototype, I transitioned to the high-fidelity version. To start, I used the Color Shades Finder tool to refine the color palette. One of the issues with the Watsons app is its lack of a consistent color theme. While the current colors somewhat represent the brand and make the app recognizable, they can also feel overly distracting. For the high-fidelity prototype, I focused on creating a more cohesive and simple color theme. In the existing app, green, blue, pink, and various gradients are frequently used. For this redesign, I chose colors...
    Read more