Application Design Task 2 - UI/UX Document

21st October - 1st December 2024 (Week 5 - Week 10)

Sin Jun Ming 0364638

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

Task 2 - UI/UX Document



LECTURES

Week 5 - Card Sorting
In this week's physical class, Mr. Zeon assigned us to divide into groups of three to four persons for the card sorting activity. Within each group, there will be a moderator and another participant. In order to understand why each characteristic is assigned to a particular category, the moderator must see how the participants perform. Participants must classify the features and create new categories and features depending on the provided topic, which is a mobile app for travel planning. Eventually, each group must come up with a new card sorting method with a self-determined application category and present in front of class.

Grouping with Hanson and Ian

Card sorting result within the group

Week 6
Public holiday, no class for this week.

Week 7 - User Experience Research & UI/UX Document
As we begin to define the research aim for our Task 2, today's lecture provided an overview of user experience research. We learned how to perform user research and other research techniques from Mr. Zeon. We also discussed the card sorting assignment from last week. This week's assignment is to develop a series of online and interview questions. Moreover, we are required to prepare online survey questionnaires and interview questions for our UI/UX Document. 



INSTRUCTIONS


Task 2 - UI/UX Document

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

The outline of the document should include:

1. Introduction
Start the UX design document with an introduction that explains the purpose and scope of the document, the target audience, and the problem the app is intended to solve.

2. User Research
Provide a detailed description of the user research that has been conducted. These could include user persona and user journey map. Explain how the research informed the design decisions.

3. Information Architecture
Outline the content elements of the App and how they will be organized to achieve the optimum information architecture. Explain the card sorting method that was used and how it helped to organize the content.

4. MVP (Minimum Viable Product) Features
List the App features and identify the minimum viable product (MVP) that will be developed.


Week 7 - First phase of Card Sorting
In this week, I discussed my Card Sorting Method with Mr. Zeon and he gave me some feedback like apply different colors for "Added features" and "Original features" cards to differentiate them easily in the cart sorting method; cards can be added if other features are suggested afterwards in the data collection phase. 

Original Features of Encode app is listed as below:
  • Interactive Coding Lessons
  • Code Editor Interface
  • Progress Tracking
  • Skill Selection
  • Challenges/Quizzes
  • Notifications
  • Answer Revealing
  • Help and Feedback
  • User Profile
  • Privacy Policy
  • Coding Exercises
  • Licenses
Encode app card sorting by Sin JunMing


Week 8 - Preparation of Survey Questionnaire
In this independent learning week, we are required to prepare a survey questionnaire for application user research. I decided to use Google Form as the platform to distribute the survey questionnaire. The data collected through the survey will be invaluable in helping me to enhance user experience on the application, and will contribute to a broader analysis of user experience and preferences towards the Encode app.

Requirements
  • Survey Questionnaire - 50 respondents
  • Interview - 3 interviewees

1.0 Survey Questionnaire (5 sections)

Section A: User Demographics
Section B: Application Usage and Preferences
Section C: Introduction to Encode app
Section D: Overall User Experience
Section E: Ratings on Encode app

2.0 Qualitative -Interview Questionnaire (2 sections)

Section A: Interviewee demographics
Section B: User experience on Encode app

Draft Survey Questionnaire

Week 9 - Finalize Survey Questionnaire and Interview
After receiving feedback from Mr. Zeon, changes were made, and the survey questionnaire was finalized. It is then transferred to Google Form and distributed to collect responses. The minimum number of respondents is 50.

Final Survey Questionnaire

Google Form link: 


Interview Questions
Section A: Interviewee demographics
  1. May I know what your name is?
  2. What is your age?
  3. What is your nationality?
  4. What is your current occupation?
  5. Are you familiar with coding knowledge or have you ever learnt coding before?
  6. Have you ever tried to learn coding on a mobile application before?
  7. Have you used Encode before?
  8. How often do you use the Encode app?
Section B: User experience on Encode app
  1. What is your first impression on the Encode app layout design?
  2. What do you think about the colour schemes of the Encode app? Do they suit a learning environment for coding?
  3. Can you try to use the Encode app to complete an exercise and describe the ease of completing the task?
  4. How does the lack of a navigation bar on the app design affect your navigation experience?
  5. Compared to its competitor Sololearn, do you think the Encode app would benefit from having a proper homepage?
  6. What suggestion would you like to give for improving the Encode app?

Interview Video 1- Yong Ping:

Interview Video - Natalie:

Interview Video 3 - Jun Yu:

Summary of interview
1. App Usage: 
All interviewees have not used Encode before.
2. First Impression: 
Layout is clean but may feel confusing because there is too much information. Plus, there is no navigation bar and a proper homepage.
3. Color Scheme: 
Blue color suits the learning environment for coding, darker colors are also preferred for the background.
4. Ease of Completing Tasks: 
The difficulty of exercise is low, an interviewee mentioned that the questions are too simple and the users cannot learn much.
5. Navigation Experience: 
The lack of navigation bar affects the navigation experience badly and it is also time-consuming. A navigation bar should be added to improve the user experience.
6. Addition of a Proper Homepage: 
A proper homepage would aid the users in accessing chapters of learning modules easily and conveniently.

User Personas:
User Persona 1

User Persona 2

User Persona 3

Finalize Card Sorting:
In the final phase of the card sorting method, it is done using UX Tweak. Mr. Zeon recommended us to use this tool to complete the card sorting. There will be minimum 7 respondents participating in card sorting activity. 


Categories and cards

Card sorting result

Information Architecture Map:

User Journey Map:


MVP Features:

Presentation Video:


Final UI/UX Document:
UI/UX DOCUMENT by Sin JunMing



Feedback

Week 6

Public holiday, no class for this week.

Week 7

Apply different colors for "Added features" and "Original features" cards to differentiate them easily in the cart sorting method. Cards can be added if other features are suggested afterwards in the data collection phase.

Week 9

Some questions need rephrasing for better readability. Below is the revised version:

Questionnaire

Which age range do you belong to?

What is your highest level of education completed?

How frequently do you use coding education applications?

Which factors most affect your learning experience on coding education apps?

What type of learning content do you prefer in coding education apps? (Select all that apply)

How intuitive is the navigation within the Encode app?

Which features do you find lacking in the current Encode app?

On a scale of 1-5, how would you rate the following aspects of the Encode application? (1 – Very poor, 5 - Excellent)

On a scale of 1-5, how would you rate the “Learning Modules” page of the Encode app?

How clear do you think the instructions are on the exercise page?

Interview questions

What is your current occupation?

What do you think about the color schemes of the Encode app? Do they suit a learning environment for coding?

How does the lack of a navigation bar on the app design affect your navigation experience?

Compared to its competitor Sololearn, do you think the Encode app would benefit from having a proper homepage?

Week 10

For the interview videos, they can be concluded in a YouTube playlist if the videos are uploaded in YouTube. The link should be included in the presentation slide.



Reflection

From this task, I have gained valuable opinions from the survey questionnaire distributed on Google Form and also my three interviewees who have been very supportive in giving recommendations to improve the app design and user experience. I am grateful to have this much of assistance in this task to complete my UI/UX document for the Encode app, and I will do my best in creating the app prototype in the final project to ensure the expectations are met.

Comments