UX Design / Exercises and Final Project (all in one)
Get link
Facebook
X
Pinterest
Email
Other Apps
-
02.04.2022 - 09.12.2022 (Week 1 - Week 15) Abigail Kartika
Darmowinoto / 0350525 / Bachelor of Design in Creative Media UX Design
/ Taylor's University Exercises and Final Project (all in one)
What is UI? What is UX? UI: More like the concept / tool UX: The experience / feeling of the user -> how a person feels
about interacting with or experiencing a product.
Usable: design, structure, and purpose are clear and easy to use
Equitable: helpful to people with diverse ability and backgrounds
Enjoyable: the design delights the user
Useful: solve user problem
Experience mostly based on Emotion, AI - run by logic, Experience - run by
emotion; which is not easy to decided. User Experience always
comes before and after User Interface.
User Experience also come from ambience, like when buying games; the sense
of colors, musics, character designs that blends into one and create
satisfactory, or when buying Starbucks, and the smell of coffee, relaxing
and cozy places which blends into one. So the main point of User Experience
is satisfaction of users' feeling.
When finding a problem, analyze the problem by doing this:
WHO is affected by the problem?
WHAT is the problem?
WHERE does this problem occur?
WHEN does the problem occur?
WHY does the problem occur? WHY the problem is
important enough to solve?
Sometimes people are clueless when there are no sign / instruction on doing
something. Thus, the effective way is to make something "how, subconsciously
it should be done".
fig 1.15, Users can be Anyone, Week 5 (26/09/2022),
source: lecture
fig 1.16, Users can be Anyone, Week 5 (26/09/2022), source:
lecture
User can be anyone, they aren't always designer, so they may have
difference in experiencing something.
What's inside User Journey Map?
User Persona
Scenario
Goal
User Persona Goals:
Context
Humanizing Data
Data informed instead of driven
User focused experience
Return and Retention
Examples of User Journey Map:
fig 1.16, Examples of User Journey Map, Week 5 (26/09/2022), source: lecture
WEEK 9 (28/10/2022): "UI UX Documentation"
Documentation consist of these things:
1. Overview (define)
Project’s goals, objectives and vision
Project summary
Problem (HCW)
Solution (SWOT)
Definition (Role/Duration)
2. Discovery (empathize)
Essentially includes user personas, empathy maps, user journey
maps, interviews, market research, and any other information that
pertains to the customer.
Market Research
User Research
User Personas
Key Findings
3. Design (ideate)
Summary of initial concepts and sketches of how the product’s journey
began + thought processes behind the product’s features. Also include
sprints and brainstorming sessions reports
Sketch
Wireframe
Usability prototyping
Key Findings
4. Prototype
Consisted of 3 big phases; wireframe, mockup, prototype. Presented
to stakeholders to explore the product and understand the context
behind usability testing and design concepts.
Summarize your UX documentation and include the project’s goals,
objectives, and vision. Allows every stakeholder to read about the
UX design process and how the product has evolved.
Engineer
Developer
Video Prototype
6. Improvements
References, giving context to the product’s lifespan from the initial
concept to the current iteration.
User onboarding is basically a process in the start of the app
screen that increase the likelihood of the user to use the
app. The use of onboarding is very crucial and it helps to
decide on whether the new user will use the app or not.
fig 2.1, Module Information Booklet of User Experience
fig 2.2, Timeline of User Experience Module
Exercise 01: Inefficient Item WEEK 1 (29/08/2022) : Norman Door Look for things around you
which you find problematic and put in the Miro Board.
Examples:
fig 2.3, Exercise 1
Exercise 02: User Persona WEEK 2 (05/09/2022) : User Personas USER PERSONAS are researched and proposed representations
of your target user. Each Persona would be framed from real user
discovery by researching and observing their:
needs
goals
behavioural patterns
The aim of this exercise is to allow you to gain valuable insights on
your users’:
requirements
wants
demands
You are to design 1 main user persona.
Exercise 03 & 04: Empathy Map and Project Definition
WEEK 3 (11/09/2022) : Empathy Map
Create an empathy map of the user.
The goal isn’t to correctly classify information, it’s to identify with
the user. This exercise isn’t about logging every emotional and
behavioral aspect of the user, but focusing on the target audience and
understanding his or her world as it relates to your work. Going too broad
will get things off track.
Change or streamline the categories
to work with the session goal, persona or available data. For example, if
the persona is a purchasing manager at a B2B company, feelings might not
have been relevant or revealed by the research. Make whatever changes are
needed to ensure the outcome is useful and the session is productive.
A design audit is basically a checkup to make sure that the
company is expressing itself consistently across all channels and
touch points.
Touchpoints:
What users are actually seeing and engaging with throughout their user
journey, and remedy any inconsistencies
Touch-points are external (for the users), such as visuals, written,
and verbal communications that range from the website to ads to social
media marketing and advertising, events, workshops or webinars hosted
to the actual product launch and the product itself.
There are dozens, if not hundreds, of touch points in their journey to
and through the journey to your product.
Is their experience consistent and trustworthy, or erratic and
unpredictable
WHY? Building consistency is building trust
WHAT? Any style guides or existing design systems Website pages
(screenshots) Logo in all formats and use cases Web ads / third
party integration Standalone landing pages, marketing campaigns,
and all their collateral Classes, workshops, presentations,
promotional speaking engagements Social media content Original
design files vs. what’s live right now
Exercise 06: User Journey Submission
WEEK 5 (26/09/2022) - posted in Task 2
Exercise 07: User Experience Survey WEEK 8 (18/10/2022)
You are to create a User Experience Survey(Questionnaire) regarding the
Product that you have chosen to redesign.
Asking for customer
feedback before redeveloping/developing a product is ideal and would save
the project a great deal of money and effort.
The exercise: You
are to come up with 10-15 survey questions to be applied to a selected
user persona. You should survey at least 5 of these individuals.
First Before coming up with the questionnaire, first you
would need to establish what you expect to get out of the questionnaire,
how will it help you improve the product, define pain points and even
identify what to lose or to keep in the product. Thus you would need to
detail the following:Deciding on what and how to measure. Sampling
from your user persona's Analysing the data; finding trends. Turn
the data into information; storytelling
Second Look
into this https://surveysparrow.com/blog/user-experience-survey-questions/ Provides 60 questions sample that you can use for your survey. You
could use between 10-15 of these questions and customize it for you chosen
product and user persona. The answers may be open ended (subjective),
which would provide quite a number of opportunities. Or it could be
objective and the participants would choose from a series of answers, this
would allow you to create quantitative graphs, etc.
What benefit did the product provide? Example, problem’s, challenges
that the product solved; what was found useful by the users?
Pain Points: identify what’s Usable or what isn’t usable.
The user’s experiences and expectations of the product and whether it
was Enjoyable.
Other than the target users, would the product benefit other users?
How equitable would the product be rated?
Final Provide the key findings by compiling it, into a
comparable flow in presented in your MIRO board. This will be used to
redesign the app. Which is the next Assignment where you will be building
Wireframes.
Final Project:
We are divided into several group of 3-4 thus later will start to
redesign our chosen app covering from the onboarding until the
wireframes of certain feature.
Exercise 01: Inefficient Item WEEK 1 (29/08/2022) : Norman Door We were tasked on
looking some items that are made inefficiently and confusing the
users. The items can be anything existed in campus or just random
things in home.
First I looked on some items around me, if it's required to
look for something with bad UX, it's hard to find, but
whenever it isn't needed, I always find some :'). So after
several look up on some items, I decided to go with the usb
drive.
Why??
USB drives always equipped with male plug to connect with the
computer ports. There are the void side and the filled side.
Whenever we wanted to insert the plug, it's always difficult
and inconvenient to use in fast-paced
situation. It's kind of feel annoying even it's small thing, when we try to
insert the dongle but missed the plug. So, this is what I came up
with:
fig 3.2, Exercise 1 Final, Week 1 (04/09/2022)
Exercise 02: User Persona WEEK 2 (05/09/2022) : User Personas
As for the UX Design exercise, I'm planning on using the
same application I used on Application Design. Monny. To
determine the user persona, first, I did the market
segmentation:
fig 3.3, Market Segmentation, Week 2 (12/09/2022)
After that, I created the user persona following the format
provided. I named my targeted users as Charlie and Celine.
fig 3.4, User Personas, Week 2 (12/09/2022)
Exercise 03 & 04: Empathy Map and Project Definition
WEEK 3 (11/09/2022) : Empathy Map
I'm trying to create empathy map, first, I learnt to be the user,
Charlie. I empathize on how I would feel if I was her. I dive down
to the applications' interface and workflow. Thus I found some
pain points that I think can be discussed.
Other than that, I also try to learn from another similar user
(real data) by reading the play store reviews to enhance the
findings.
fig 3.5, Empathy Map, Week 3 (17/09/2022)
WEEK 4 (19/09/2022) : Project Definition
Following on that, I started to fill up the project definitions,
the purpose, the objective of the project in the provided
questions:
fig 3.6, Project Definition, Week 4 (25/09/2022)
Exercise 05: Design Audit
WEEK 5 (26/09/2022)
Moving forward to week 5, in the practical session, Mr. Hafiz
tasked us to learn the design audit. These are some of the
contents needed:
1.
Web ads / third party integration + Social media content
fig 3.7, web ads, Week 5 (26/09/2022)
2.
Any style guides or existing design systems
Standalone landing pages
Logo in all formats and use cases
Original design files vs. what’s live right now
fig 3.8, style guides, logo, original design, Week 5
(26/09/2022)
3.
Painpoints
fig 3.9, pain points, Week 5 (26/09/2022)
Exercise 07: User Experience Survey WEEK 8 (18/10/2022)
In order to improvise the UX Design we need to conduct a survey which
later be asked on minimum 5 people.
First I breakdown on things that I need to do:
fig 3.10, to do, Week 8 (18/10/2022)
From that, first I created the survey outline:
(to note: his survey is combined with the survey I did for
application design, thus, some questions may contain about the
interface).
fig 3.11, survey breakdowns, Week 8 (18/10/2022)
From that I started to create the questions and make the Google Forms,
and spread it and I got 56 respondents:
fig 3.12, surveys, Week 8 (18/10/2022)
Other than that, I also did some interviews, for the subjects, I chose
it from my targeted persona:
After being briefed by the Final Project, we were divided into
several groups, which later we would decide on whose application
is going to be used.
I was put into Group 1, which I am in a group with my other 2
colleague, Luisa Audrey and Syarafina. The day after class, we
decided to go on a group meeting to decide whose application is
chosen. Each of us started to present our work, Luisa
with Elisi, Syarafina with her Apple TV app, and me with Monny, my finance tracker app.
fig 4.1, each of our presentation (Apple TV and
Elisi), Week 9 (29/10/2022)
Syarafina and Luisa both agree on using my application, Monny. The
reason is because Monny have less pages than other apps, and Monny
has lots of potential to be used. The app is unique, it offers money
tracking with various challenge and currencies, but at the same time
it lacks in both the User Interface and User Experience.
After we decided, I introduced them more about Monny, all the
(+)/(-) of the app, the interfaces, and others. I'm showing
my Miro board:
fig 4.2, Miro Board of Monny, Week 9 (29/10/2022)
We targeted on creating the wireframe by next week. We divided on
who's going to work which part, mine is "home" and "data center,"
Luisa is settings and My Monny, and Syarafina will go for Account
and Quest, from my previous hamburger menu sketch. Thus, here're my
part:
At the same pace with the Application Design project, I started to
create the main screen, the home, I created based on my previous
sketch. After I finish, I started to create the "data center"
part. The original app put the choices in rows, which I felt that
way isn't really efficient, thus I came up with the idea of making
the choices into image icons.
fig 4.3, My Part, Week 10 (29/10/2022)
Week 10 (04/11/2022)
Sir Hafiz confirmed on what app each groups are using. After that,
Sir Hafiz taught us about the onboarding part.
Week 11 (07/11/2022)
At the meeting time with Mr. Hafiz, we were asked on about the
app. Since one of the member, Syara couldn't come, Luisa and me
presented about the app, from how it works, what are the pain
points and what's the challenge, as written in my Miro. Then, we
were briefed on our next steps, finishing onboarding, and
wireframes by next week.
We scheduled our next meeting,
Thus, we decided to do another Discord meeting to discuss about the
project furthermore. We show each other the screen we
did. This is Luisa's part:
fig 4.4, Luisa's part, Week 10 (04/11/2022)
Syarafina didn't do her part. But then after we discussed this, then
we decided to see the MVP of the Monny's since if following this
hamburger menu, it didn't cover up through all the screens. So after
we broke down the MVP we came up with these:
fig 4.5, Monny's MVP, Week 11 (10/11/2022)
We decided to create new job to do;
Expense Tracker and Flexible Currency will be held by Syara
Challenges and Budget History will be held by me
Recurring Mode and Multiple Accounts will be held by Luisa
Syara volunteered on doing the onboarding, since she's experienced
in that.
For the challenge part, I decided to reuse the feature that I used
on Application Design:
fig 4.6, Challenge feature, Week 11 (10/11/2022)
For the budget history, I decided to go with something like this,
because in the original app we can't know easily which one we have
done, which one is for this month, thus I make something clearer.
Also, in the fig 3.7(left) the original app has no (+) button. To
add that, we need to access it from Home Screen, which is not
efficient enough in my opinion, thus I add a (+) button:
fig 4.7, budget history feature, Week 11 (10/11/2022)
Week 12 (14/11/2022):
Today is the next consultation day with sir Hafiz. We haven't finish
our onboarding which is Syara's part, thus, we just show our interface
for the wireframe. She thought it's not due that day. So, we basically
have nothing to show, except the wireframes.
Sir Hafiz recommended that if we came up to the home screen the first
thing that we saw are the spending we did, so we need to recreate the
interface because the style from my application is a bit different. So
I came up with these:
fig 4.8, homepage, Week 12 (14/11/2022)
We continuing on doing each of our parts.
Week 13 (21/11/2022): no class - election
There's a reminder on Google Classroom about the submission. The
notification said 28/11 is our submission. Thus we panicked, and asked
sir, he clarified that the submission is due on 2/12, after the
presentation. We are relieved. But still, we still have a lot to
do.
First of all we need to finish up with the wireframes. Mine was
already finished, and Luisa did some for her part. I haven't seen
Syara's.
After that, me and Luisa discussed on the questions to ask, since
Syara will focus on the onboarding. We came up with these questions:
fig 4.9, questions, Week 11 (21/12/2022)
I saw on the XD when I was checking on the works we did, she did her
onboarding:
fig 4.10, onboarding, Week 14 (28/12/2022)
I feel it's neat and clean, it delivers the features of Monny. But I was
expecting more... I imagine if it was like a guidance, using the Coach
Marks, Tooltips, or Guidestones, but it's okay we don't have much time
left, thus I add this since Monny can't could save, it only can backup
to Google Drive:
fig 4.11, onboarding 2, Week 14 (28/12/2022)
I saw that Luisa did her part:
fig 4.12, Luisa's part, Week 14 (28/12/2022)
While waiting for Syara' part to be done, I tried to finish the Notion
submission.
fig 4.13, Notion, Week 14 (30/14/2022)
After that I saw Syara finally finished her part also, because she
thought I'm doing the home part.
fig 4.14, Syara's part, Week 14 (01/14/2022)
Finally I get to see the feature we have and the buttons that can
work, thus, I suggested to Luisa that we made the specific version
of the questions, and we came up with these:
fig 4.15, User Testing Question, Week 14 (01/14/2022)
After we finish each of our part, we crosschecked whether everything
is fine. Everything is fine, except Syara's part because she forget
to add the preview of the (+) button, thus she copied from Luisa's
and made this:
fig 4.16, Syara's part 2, Week 14 (01/14/2022)
After everything is fine, we started to do the User Testing, which
we divide into 1 each person and later we summarize together, and
here's the result of my user testing:
fig 4.17, my user testing part, Week 14 (01/14/2022)
fig 4.18, Luisa's user testing part, Week 14
(02/14/2022)
fig 4.19, Syara's user testing part, Week 14
(02/14/2022)
From that we can conclude the findings:
From the user testing we conducted, we can conclude that the new
design’s UX is way better than the original app, which doesn’t pay
attention to small details like for example; the division of the
income and expense sections button, the (+) buttons, etc. With the
new design, it’s easier for users, especially if they are new user
to understand the flow of the app. However, in the new design,
minor pain points still need to be fixed in order to enhance the
overall UX of the application.
So here are the things that need to be fixed:
fig 4.20, Things needed to be fix, Week 14
(02/14/2022)
After that, we started to fix each of our parts, and this is the
outcomes:
I feel like since I have to add the preview of the budget we
spent, if I switch the on progress to be on top, the hierarchy
will be bit confusing, thus I remain the sequence, and I just
add darker shade to make users' attention come straightly to the
on progress one. I also add the Monny's ear as a symbol that
this one is ongoing now. For the users to know whether they
successfully add new budget, I add white rectangle beneath the
new plan which later will disappear after 0.8s.
From all the exercises that have been given, I am increasingly
interested in this topic of user experience. the challenge is where we
can learn about being other people, but on the other hand, it is also
interesting and quite challenging to learn. in carrying out the user
experience what is most needed is empathy in positioning oneself above
other people's shoes. To be a successful UX Designer, I need to grow
my empathy and keep on analyzing people.
It's a fun project, I can experience in working on a team. But what I
reflect is we didn't to things on our full capacity since we don't have
much time, and maybe it's because me as the app owner / leader lacks in
communication. But overall even in short period of time, we did good and I
think it's should be fine.
"Everyone" is not an answer that we can give when we were asked on
"Who's the user," sometimes proper targeting is needed in this business,
because only few companies in the world are large enough to supply the
whole market.
USER SEGMENTATION
User segmentation is needed to do proper targeting - it's a process of
dividing users into groups that share similar characteristic. By doing so,
we can serve contents appropriately and effectively to certain targeted
audience.
MARKETING AND EXPERIENCE SEGMENTATION
Two type of segmentation:
Marketing
Focused on creating effective marketing strategies for a product’s
target audience. A market segment is a group of people that:
Have a common set of needs that they want to fulfill using your
product.
Are distinct from other segments (different segments have
different needs).
Respond similarly to a market stimulus.
Communicate with each other. Since they have a shared set of
needs, they can form communities and share the message with their
peers.
Goal: to create a message that resonates with a segment and
make it circulate inside a segment
Experience
Series of interaction of users with the products.
Focused on knowing the needs of the user
USER CHARACTERISTICS
Required to know the segmentation, covers up: demographic, geographic,
behavior, and technology aspects.
CREATING USER PERSONAS
Collect information about real people who interact with your product and
start to find patterns; where the characteristics of users overlap, you
can build an archetype, or persona, that represents those users
collectively.
Few things that you want to focus on when working on personas:
Psychological aspects of a target audience (How do users spend
their free time? What image do they want to project? What
people/brands are they influenced by?)
User behavior (free vs paid users, new vs returning users)
Cultural segmentation (appropriate cultural references)
HOW TO CONDUCT USER SEGMENTATION
State the goal
Measure user engagement
consider:
Time users spend interacting with products.
Customer journey milestones.
Unhappy paths.
Tie user segment with business goals
Don't create narrow segments (too many narrow segments make it
harder to adjust your design to different types of users and make it
harder to analyze the results of the adjustments.)
Introduce changes in your product based on segments
Purpose: to create reliable and realistic representations of
your key audience segments for reference.
Should be based on qualitative and some quantitative user
research and web analytics.
Effective personas (as written in the web):
Represent a major user group for your website
Express and focus on the major needs and expectations of the
most important user groups
Give a clear picture of the user's expectations and how
they're likely to use the site
Aid in uncovering universal features and functionality
Describe real people with backgrounds, goals, and values
Questions that can be asked during personas development:
Elements of persona:
Persona Group (i.e. web manager)
Fictional name
Job titles and major responsibilities
Demographics such as age, education, ethnicity, and family
status
The goals and tasks they are trying to complete using the
site
Their physical, social, and technological environment
A quote that sums up what matters most to the persona as it
relates to your site
Casual pictures representing that user group
REFERENCES:
Assistant Secretary for Public Affairs. (n.d.). Personas | Usability.gov. Retrieved September 7, 2022, from
https://www.usability.gov/how-to-and-tools/methods/personas.html
What's a Jump Link? Jump Link or sometimes known as Anchor Link is a link that can direct user to a specific section of the post. Steps: Prepare your blog Add the HTML code Copy Permalink / Link Add the permalink + # Breakdown: 1. THE BLOG To create a jump link, first, create the documents, so it'll be easier to plan the jump link 2. HTML Add html code: <span id="LIST"></span> on a specific part where you want to jump to 3. PERMALINK Open permalink and copy the link 4. JUMP LINK Choose the text to place the link, then paste it like this: Link#NAME https://abigailkartikadarmowinoto.blogspot.com/2021/12/how-to-create-jump-link.html#NAME
Comments
Post a Comment