Application Design I / Project 2: UI/UX Design Document
20.10.2024 - 01.12.2024 (Week 4 - Week 10)
Gunn Joey / 0366122
Application Design / Bachelor of Design (Hons) in Creative Media
Project 2: UI/UX Design Document
TABLE OF CONTENTS
1. Module Information Booklet
2. Lectures
3. Project 2
4. Progress
5. Final Submission
6. Feedback
7. Reflection
MODULE INFORMATION BOOKLET
LECTURES
Week 5
Card Sorting
In week 5, we learnt about card sorting. The lecture provided an engaging overview of card sorting, a key user research method in UX design that helps us understand how people naturally group and organise information. It’s a simple yet powerful technique that guides the structure and navigation of websites and apps to better match how users think. By aligning designs with users’ mental models, card sorting ensures the final product feels intuitive and user-friendly.
There are three main types of card sorting: open, closed and hybrid. Open card sorting gives participants the freedom to create their own categories, making it great for discovering how users think. Closed card sorting, on the other hand, uses predefined categories to test specific groupings, which is helpful when you already have a basic structure in mind. Hybrid card sorting blends the two, letting users work within existing categories but also create new ones. A special focus was placed on wildcard categories, which allow users to freely organize information, providing flexibility, uncovering gaps, and sparking creativity. The lecture also touched on the pros and cons of card sorting. It’s quick to set up, affordable and gives direct insights into user preferences, but it relies heavily on participants’ knowledge and can take time to analyze. Despite these challenges, the benefits such as improved usability, enhanced navigation and a more user-centered design, make it a valuable tool.
Mr.Zeon required us to work on a group activity designing a travel
planning app. Using card sorting, we categorized features like
itinerary building, flight tracking and social sharing. This group
activity helped us see how the method works in practice. Overall, the
lecture and activity highlighted how card sorting can transform
complex ideas into user-friendly solutions.
Week 6
Introduction To User Experience Research
In this week, Mr.Zeon lectured us the significance of user
experience (UX) research in designing user-focused and intuitive
products. UX research involves understanding users’ behaviors, needs
and attitudes through observation and feedback, ensuring that
products meet real-world user requirements. This process spans the
entire product lifecycle, from early concept development to
post-launch improvements, making it an essential part of creating
effective designs.
The discussion covered key research methods, including qualitative
approaches such as interviews and usability testing, which help
uncover user motivations and behaviors, and quantitative methods
like online surveys, which gather measurable data to inform design
decisions. A strong emphasis was placed on avoiding biases and
leading questions to ensure insights remain accurate and meaningful.
The lecture also outlined practical steps for conducting UX
research, including defining objectives, selecting suitable methods,
gathering data and synthesizing findings into actionable insights.
Best practices, such as starting research early, testing with a
manageable number of participants, and presenting findings in a
concise and clear manner, were emphasized. Overall, the session
underscored the importance of UX research as a fundamental tool for
creating designs that are not only functional but also enhance user
satisfaction and foster long-term engagement.
Week 7
User Persona
In week 7, we learnt about user personas in UI/UX design. User
personas, which represent the needs, behaviors and goals of a
broader user group. It plays a crucial role in crafting
user-focused designs. These personas are built using real data
from research methods like interviews, surveys, and user
observations, adding a human touch to design decisions. The
session emphasized that user personas help designers understand
their target audience, ensuring the solutions address actual pain
points and align with user expectations. Effective personas are
context-specific, unbiased, and based on accurate, up-to-date
information. They should include key attributes such as
demographics, personality traits, goals, motivations, pain points,
and scenarios. By using personas, teams can improve user
retention, prioritize features.
Mr.Zeon also highlighted the collaborative process of creating
personas, encouraging diverse team inputs to ensure varied
perspectives. Practical steps for crafting personas, from data
collection to synthesizing insights, were outlined, with an
emphasis on making personas realistic and detailed. This approach
ensures that every design decision is grounded in a deep
understanding of the user, ultimately leading to more engaging and
user-centered products.
Week 8
User Journey Map & Digital Card Sorting
The lecture focused on the two critical tools in the UX design
process, which are user journey map and digital card sorting. A
user journey map is a visual representation of the steps a user
takes to achieve a specific goal. It helps designers and
developers better understand user behaviors, emotions and pain
points, fostering empathy and ensuring the product meets user
needs effectively. The map is created through user research,
organising actions chronologically to identify gaps and prioritize
development needs. Best practices for journey mapping include
tying the map to user personas, clearly defining functional and
emotional steps, and aligning with business objectives. Mr. Zeon
provided examples about how journey maps document the phases of
user interaction, such as discovery, planning, booking, and
post-interaction reflections during the lecture. By addressing
these steps, designers can improve the overall user experience and
identify opportunities for optimization.
Digital card sorting was highlighted as a tool to understand how
users categorize and organise information. Participants are asked
to sort content into groups, offering insights into intuitive
structures for navigation and information architecture. Tools like
UXtweak or Optimal Workshop were recommended for conducting
digital card sorting, emphasizing its importance in creating
user-centric designs. Overall, the lecture emphasized these
techniques as essential for improving usability, ensuring
intuitive navigation and creating user-friendly interfaces. These
tools not only enhance the design process but also align products
more closely with user expectations and needs.
Week 9
Site Map and User Flow
The lecture provided by Mr. Zeon focused on the importance of site
maps and user flow in creating user-friendly designs for apps. A
site map shows how pages are connected and structured to guide
users through the platform seamlessly. It helps designers create
intuitive navigation by incorporating insights from methods like
card sorting to align the structure with how users naturally think
and interact. On the other hand, user flow diagrams visualize the
steps users take to complete a task or achieve a goal, such as
making a purchase or resetting a password. These diagrams map out
every interaction, decision point, and pathway, highlighting
potential pain points and areas for improvement. They are
invaluable for refining user experiences and ensuring tasks are
completed efficiently and without frustration.
The lecture also explained how site maps and user flows complement
each other. While a site map focuses on the overall organization
and hierarchy of content, a user flow diagram dives deeper into
the specific actions and decisions users make along their journey.
Together, they provide a holistic approach to designing intuitive
and user-focused digital experiences. Practical advice was shared
on creating these tools, such as understanding user goals,
planning steps in advance, and using feedback to refine designs.
Examples like e-commerce platforms and music apps, demonstrated
how these tools can enhance usability and simplify complex user
interactions. By using site maps and user flow diagrams
effectively, designers can create digital experiences that are not
only functional but also enjoyable for users.
Week 10
MVP and Wireframe
In week 10, Mr. Zeon lectured us an overview of Minimum Viable
Products (MVP) and wireframes, two critical concepts in app and
web development. An MVP is the simplest version of a product that
includes just enough features to satisfy early users and gather
valuable feedback. The focus of an MVP is on core functionalities,
such as booking systems, account management, and payment
processes, allowing developers to test and validate the product
idea with minimal resources. Benefits of the MVP approach include
cost efficiency, risk reduction, and user-centered design that
adapts to feedback early in development.
Wireframes were introduced as essential tools for visualizing the
structure and functionality of an app or website. These
two-dimensional blueprints map out the skeletal framework,
including page layout, information hierarchy, and user flow.
Wireframes focus on illustrating the app’s functionality to
identify potential pain points before development begins. The
lecture emphasized the importance of wireframes for aligning team
members, facilitating discussions and streamlining design
processes. They are quick and easy to create, providing a concrete
reference that ensures everyone on the team is on the same page.
Low-fidelity and high-fidelity prototypes were also discussed.
Low-fidelity prototypes are basic sketches that outline the
functionality and layout, while high-fidelity prototypes are more
detailed, incorporating design elements and interactivity.
Together, MVPs and wireframes help create user-centered,
efficient, and adaptable designs that prioritize essential
features while allowing room for growth based on user feedback.
PROJECT 2
UI/UX Design Document
In Project 2, we are required to produce a comprehensive UX design
document which will provide better directions to design the app after
locking down the app concept and idea. After getting approval from our
lecturer, Mr. Zeon for Project 1, we are now ready to proceed to UX
design.
Things to Include in the Document / Requirements:
1. Introduction
- Purpose explanation and scope of the document, target audience
- Problem of the app is intended to solve
2. User Research
- Detailed description of user research
- Develop survey questions
- Interview
- User persona
- User Journey map
3. Information Architecture
- Outline the content elements of the app and how they will be organised
- Explain the card sorting method that was used and how it helped to organise the content
4. MVP Features (Minimum Viable Product Features)
- App features list
- Identify the MVP that will be developed
Progress of UI/UX Design Document
Research Methodology
In Project 2, we need to design survey questions for mobile application
redesign questionnaire. Our module lecturer, Mr. Zeon required us to
employ both research methods, which are survey questionnaire as
quantitative methodology and interview as qualitative methodology.
Conducting a survey helps us collect helpful data and valuable insights
from a wide range of respondents. This helps me study more details about
the selected mobile application. Moreover, there are 3 respondents
participating in the interview. The purpose of conducting an interview is to learn more about user experience. This
is part of my efforts to gather more data on user preferences toward
the Sasa application.
1. Questionnaire
2. Interview
I have conducted physical interview with users that have uses
Sasa mobile application before. I have set 10 interview
questions after consulting Mr. Zeon.
Click
here
to view the interview video.
Progress of Interview:
Findings:
- Initial Impressions : The app was perceived as messy and outdated, lacking modern design and organization compared to competitors like Sephora.
- Design and Layout : Navigation was difficult with confusing categories. Font size and layout were inconsistent, making the app feel poorly designed. Whitespace in review sections contributes to a lack of content.
- Visual Appeal : The app’s design was considered outdated. Users preferred a more clean and professional layout.
- Technical Issues : Slow loading speeds and poor performance led to users switching to other platforms like Watsons.
- Features from Other Apps: Users suggested adding detailed filters, ratings and reviews with photos, and real-time chat support for improved user trust.
- Critical Improvements : Enhance personalized recommendations based on browsing history. Provide clearer promotions and optimize loading speed to improve user engagement.
- Overall User Experience : The app was compared negatively to competitors like Watsons and Shopee in terms of design, speed, and usability.
3. User Persona
We need to develop at least three user personas based on our
research. By leveraging tools like interviews and surveys to
gather detailed insights about our audience, we can develop
these personas specifically for The Bites App's mobile users.
3 User Persona:
- Pearson Lee
- Lim Sun May
- Jasslyn Khoo
4. User Journey Map
5. Card Sorting
We are required to design a card sorting draft of our redesign
features in Miro. Mr first draft of card sorting was lacking
completeness. Mr. Zeon gave me a lot of useful feedback as
improvements in card sorting. I added many more new features
after consulting Mr. Zeon in class. After that, I consulted Mr.
Zeon online and he gave me a more detailed suggestions for
improvement. In week 10, Mr. Zeon suggested me to combined few
features together to reduce cards.
First Attempt Card Sorting in Miro:
Final Card Sorting in Miro:
The card sorting is done using UX Tweak. Mr. Zeon recommended
us to use this tool to complete the card sorting. There are 7
respondents participating in card sorting activity. The
researcher would design cards and categories following
features in Miro to conduct this activity.
UX Tweak Card Sorting Link:
https://study.uxtweak.com/cardsort/uPkc288RyuEeCATlaJb9v
Results:
The results shows that all cards are placed into all
categories by the 7 respondents. There is no new category
created by respondents. The results show all respondents
grouped similar items such as “Brands”, “Shipping Address”,
“Payment Methods”, “Checkout Button”, and “Profile Settings”
into a particular category, it suggests that this
classification aligns well with user understanding. However,
the rest features are placed in different categories and
receive conflicting labels, it shows potential confusion
about the content. This may suggest a need for clearer
categorization or better descriptions for certain items.
6. Information Architecture Map
After analyzing all the data from the card sorting activity I
conducted, I reorganized it according to my information
architecture map. This process involved outlining the app's main
content and features, with a particular focus on actions related
to vouchers, such as "view" and "apply," to ensure clear and
intuitive navigation.
7. User Flow Chart
Click
here
to view User Flow Chart in Miro.
8. MVP Features
FINAL SUBMISSION
Video Presentation
Click
here
to view in Youtube.
FEEDBACK
Week 5
Mr. Zeon explained to us a briefing on the UI/UX
documents. We conducted card sorting group activity in
class this week.
Week 6
Mr. Zeon suggested me to add more features in my card
sorting. Add different colours for sticky notes to
categorise them. Moreover, we can start developing our
questionnaire and interview questions.
Week 7
Mr. Zeon suggested me to add more questions for
questionnaire and interview, including follow-up
questions to know deeper thoughts of participants for
Sasa app. Mr. Zeon provided a detailed feedback on email
and helped me a lot in this task.
Week 8
I made progress in collecting response for questionnaire
and interview. After completing interview section, I
started doing user personas and user journey map.
Week 9
This week, I consulted Mr. Zeon my user flow and
architecture map. I found them confusing and asked Mr.
Zeon what is the difference of user flow and
architecture map. He explained and taught me how to redo
patiently.
Week 10
List out all the features and how they connect to each
other to build a better user flow.
REFLECTION
Reflecting on Project 2, this experience has been both
challenging and rewarding. It provided an opportunity to
deepen my understanding of UX design and the importance
of keeping users at the heart of every decision. Moving
from the concept approval in Project 1 to creating a
detailed UX design document required me to navigate new
challenges, each contributing to personal growth and a
stronger connection to the process.
One of the most impactful parts was conducting user
research. Designing survey questions required careful
thought to ensure they uncovered meaningful insights
about user needs and behaviors. Through interviews, I
gained a richer perspective, listening to real user
experiences and understanding their pain points. This
process reinforced the importance of empathy in
designing solutions that resonate with people. Building
user personas and mapping user journeys turned data into
stories. It revealed patterns in user behavior and
highlighted areas where the app could address specific
challenges. The information architecture phase was a
thought-provoking exercise in organization and
structure. Using card sorting as a method to arrange
content helped me see how users categorize information
and expect it to flow. This process emphasized the value
of simplicity and logic in creating an accessible app.
The MVP taught me the importance of prioritizing
essential functionalities and focusing on delivering
immediate value to users. This step balanced ambition
with practicality, ensuring the app concept remained
focused and achievable.
Overall, Project 2 strengthened my understanding of UX
design principles and provided valuable experience. It
highlighted the significance of iterative thinking and
user-centered approaches, equipping me with tools to
approach future projects confidently and
creatively.
Comments
Post a Comment