Application Design - Project 2: UI/UX Design Document

21/10/2024 - 02/12/2024 / Week 5 - Week 11
Cindy Clarissa Leslie / 0367677
Application Design / Bachelor of Design (Hons) in Creative Media
Project 2: UI/UX Design Document


LECTURES
Week 5: Lecture 5

Significant UX problem: desired information placed in unexpected locations, engage users in navigation as a solution.

Card Sorting Method: 
used to understand how users group and categorise information. determines an organization scheme that aligns with users’ mental models.

displays users a collection of cards, each contains a piece of information (page title, menu item etc.)

Types:
open - users label their own groups
closed - researchers labels categories for users to sort card in
hybrid - researchers and users provide predetermined groups (wildcard)
remote - using available online websites designed for ux

moderated
unmoderated

ask follow up questions to explain reasoning for groups users’ created. 

Figure 1.1 Card sorting exercise in class

Additionally, we were divided into groups and were required to do our first card sorting exercise physically regarding the features of a travelling app. Not only did we suggested new features, we had also create new categories that we thought were more suitable.



Week 6: Lecture 6

Using a card sorting method in order to know what the users think and need.

Role of UX Design:
  • Helps understand users’ behaviour, goals, motivations and needs.
  • Reveals how users currently interact with a system
  • Understanding user emotions during interaction
  • Ensure that the design process is grounded in user understanding

UX Researcher Duties:
  • Developing coherent research methodologies
  • Selecting and recruiting targeted and users for research
  • Conducting individual interviews with clients
  • Utilizing data analysis tools to enhance consumer products
  • Collaborating closely with the product team to steer future directions

Integrated Process

Early stage:
Foundation of understanding - guides initial concept of design directions.

Concept and Iterative Design:
Concept Validation - minimizes the risk of developing features that may not resonate with users.
Continuous Feedback - Designers can test prototypes, gather user feedback, and make necessary adjustments, leading to a more user-centric design.

Launch Phases:
User-Centric Adjustments - helps in making final adjustments based on user feedback from beta testing.
Post-Launch Insights - guides future updates and iterations.

Qualitative research - descriptive, identifies patterns and trends, additionally reasons. Explores user needs and pain points.

Quantitative research - numerical, analysed quantitatively, validates hypotheses, measures usability.

User persona: roughly user demographic (age, goal of using the app etc.)


Week 7: Lecture 7

User persona

Purpose:
Understanding user needs in crafting problem statements, personas aid in strategizing and guiding intelligent design decisions.

What to include:
  • Demographic information
  • Personality traits
  • Goals and objectives
  • Behavioural information
  • Needs and pain points
  • Scenarios and use cases
  • User quotes
Figure 2.1 Card sorting for e-learning platform

Before trying out the user persona exercise, our group was instructed to create a new card sort for our chosen app, to which we chose myTimes (e-learning platform).


Figure 2.2 User persona exercise

We then proceed on creating the user persona based on our chosen app. While I do this exercise I realized that we were continuously searching for potential pain points that could be experienced by actual users in real life, to which they have different experiences.


INSTRUCTIONS




Project 2: UI/UX Design Documents

Card Sorting

Figure 3.1 First card sorting based on Flickr

I started identifying the essential features I could find in Flickr and sorted them into fitting categories that I came up with. The first one only contains existing features that are already available in the app.

Figure 3.2 Second card sorting based on Flickr

Next, I added in some of the new features that I plan on implementing into the app (indicated by the purple colour). I then inserted these into the card sorting platform where I can get participants to test.


Developing survey and interview questions

I had to obtain insights from general users through both quantitative and qualitative method. This is to ensure that I'm able to identify the app's strength, weaknesses and what the user's preferences are, applying these findings will contribute in creating a design that is intuitive.

Quantitative method: survey

50 respondents required
at least 15 questions

Section 1: Demographic Information
Section 2: General App Preference
Section 3: Evaluating Flickr's UI


Figure 4.1 First draft of survey questions

Qualitative method: interview

3 interviewees required
at least 10 questions
target demographic: photographers

Section 1: Basic Information
Section 2: Evaluating Flickr's UI


Figure 4.2 First draft of interview questions


Updated survey and interview questions

Before actually applying the questions into my survey and interviews, I asked the lecturer for feedback and made some changes to improve it. I also ensured that my card sort is appropriate enough for me to use on Optimal Workshop.


Figure 5.1 Final draft of survey and interview questions


Figure 5.2 Survey on Google Forms



Figure 5.3 Voice recordings of interviews (online and physical)


User Personas

After collecting enough responses, I created 3 user personas based on the insight I've gotten, with each of them focusing on a feature in the app. Since I had 4 interviewees and they wanted to keep their animosity to a minimum especially their faces, I created fake user personas based on their problems instead.

Emily Goh: Home feed and Engagement
Liam Mitchell: Personal Portfolio & Customization/Personalization
Chloe Bennett: Community Features

Figure 6.1 User Persona 1

Figure 6.2 User Persona 2

Figure 6.3 User Persona 3


Digital Card Sorting

Initially, I tried using Optimal Workshop to collect data, however found that all my responses were inaccessible once my free trial ended, which is why I had to convert in using UXTweak instead. Though free, I had to narrow down the cards to 20, to which I tried to select out the most essential ones only.


Figure 7.1 Final cards for digital card sorting

Figure 7.2 Results of digital card sorting


User Flow Chart

Based on the results I've gotten from the card sorting, I created the features I will be using in my user flow chart. I categorized them by the main pages that can be found in the navigation bar.

Figure 8.1 Feature list

LINK TO MIRO

Figure 8.2 User Journey Map in Miro


Final Project 2: UI/UX Design Document

Figure 9.1 Final Canva slides


Figure 9.2 Final Pdf submission


FEEDBACK

Project 2: UI/UX Design Documents

Week 6
Directed Feedbacks

Card sorting looks okay for me.

Refer the word file for you interview questions and questionaires feedback.


Figure 10.1 Feedback document from lecturer


REFLECTION

Experience

I basically learned the whole process of researching before creating the actual design, and I never knew how detailed and complicated it actually is. Though i didn't struggle much in the interview process especially in finding specific people since i know a good amount of creative photographers, I found the survey part harder. I wanted to include actual active flickr users, therefore i promoted the survey onto forums and apps but still struggled in reaching the quota. Furthermore, time management was essential especially with the completion of slides. I've managed to conquer these challenges from determination in a way, I kept promoting my survey everywhere to the point where I felt a little annoyed of myself too but it doesn't matter anymore as I successfully completed the task. 

Observations

Based on the surveys, especially the card sorting, I've observed how every users would have different perceptions. Users have different ideas on how things are categorised, where features are located. A good design would need to align with a majority of user's needs. Therefore I found how empathy and understanding other people would be one of the most crucial aspect in ui/ux.

Findings

I've definitely found that the research is way more complicated than how people would generally expect. Not only that but it's a long process, really emphasises on networking and time management. Overall, served an experience that i could definitely apply in a real working setting in the future when I make it as a designer somewhere. :)

Comments

Post a Comment

Popular posts from this blog

Advanced Typography - Task 3: Type Exploration and Application

Image
16/6/2024 - 22 /7/2024  / Week 9 - Week 14 Cindy Clarissa Leslie / 0367677 Advanced Typography / Bachelor of Design (Hons) in Creative Media Task 3: Type Exploration and Application LECTURES Link to  lectures 1 to 4 Link to lecture 5 INSTRUCTIONS In this task, we were required to propose specific problems and how we could design a font in order to solve them. These proposals were collected in slides format and proposed to the lecturer in order to decide which ones were good enough to do. Research Figure 1.1 Slides for proposal. Week 9, 16/6/2024 In the end, I chose to create an extension based on my old font and go with the final idea of creating a font for a band, I wanted to be able to present their metalcore music that showcases how different songs in the album is able to be loud and sharp, while some of their songs are on the softer side. Figure 1.2 Original logo/typeface for the band. Week 9, 16/6/2024 Setting the original typeface as a reference itself, I wanted to be ab...
Read more

Application Design - Project 3: Lo-Fi App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Project 3: Lo-Fi App Design Prototype LECTURES Week 11: Lecture 11 Usability testing Evaluate a product or service with representative users The aim is to detect usability issues, gather qualitative data, and assess overall user satisfaction. Create scenarios for the participants, observe how they use it and gain insights. (3 different scenarios for 3 different users) Create a low fidelity wireframe first (does not contain graphics nor colours, just the main idea of the whole layout) UI Kit Should include aspects of the design: typography colour palette iconography INSTRUCTIONS Project 3: Lo-Fi App Design Prototype UI Kit As stated in the lecture, the UI kit should be created first to predetermine the design's typography, colour palette and iconography in order to ensure that it stays as consistent as possible. The kit will then be used as a f...
Read more

Application Design - Final Project: High Fidelity App Design Prototype

Image
2 /12/2024 - 7/1/ 2025  / Week 11 - Week 14 Cindy Clarissa Leslie / 0367677 Application Design / Bachelor of Design (Hons) in Creative Media Final Project: High Fidelity App Design Prototype LECTURES   PROJECT 1: MOBILE APP PROPOSAL PROJECT 2: UI/UX DESIGN DOCUMENT PROJECT 3: LOW FIDELITY APP DESIGN PROTOTYPE INSTRUCTIONS Project 3: Lo-Fi App Design Prototype Design process Figure 1.1 Deciding on the final colour scheme At first, I was struggling a lot in deciding on the final colour scheme. I had a lot of different experiments switching from dark to light mode. Since there are 3 official brand colours, I had to choose one of the colours instead as I figured that the purple that I initially planned on using wasn't able to reflect on the brand. At the end, to ensure a strong branding, I eventually chose blue as the accents with additional pink from the logo as the numbered notifications and other interactive elements especially in liking posts that could add to the design in a ...
Read more