Wireframing is about
quickly sketching out
ideas to visualize your
thinking. Keep it
simple—no images,
details, or colors.
Start with broad
strokes, then add light
details with a thinner
pen. Focus on
quantity over
quality
to explore more ideas.
Sketching is accessible
to everyone and helps
make your design process
visible and
collaborative. Stay
curious and keep the
ideas flowing!
Week 12
This week we learned how
to create components and
microinteractions in
Figma. Mr. Sylvain
showed us how to use
variants to create a
component that changes
color.
Project
3: Lo-Fi
App Design
Prototype
Description:
After the UX
design
process, it is
time to create
a low-fidelity
prototype of
the app. We
need to
organize all
the screen
wireframes,
actions, and
visual
feedback and
connect them
in Figma.
After that, we
need to
conduct
usability
testing,
invite
customers to
test our
low-fidelity
prototype, and
collect all
the
information,
feedback, pain
points, and
feedback
observed
during the
testing
process. We
need to record
the whole
process with a
video and make
a document
with a
detailed
analysis of
the testing
tasks and
solutions to
the problems
faced by the
testers.
Initial
Lo-Fi
Prototype
Week
11
Sketches
We
need
to
make a
rough
sketch
of our
project
based
on our
user
flowchart
so
that
we can
modify
it and
have
an
overall
design
idea
for
it.
Fig.
1.1
Sketches
Fig.
1.2
Sketches
Reference
I
searched
for
and
downloaded
some
language
learning
apps
because
I
wanted
a pro
version,
in
addition
to the
basic
Duolingo.
It was
a
commercial
version
for
language
learning,
with
more
official
language
content.
So, it
should
be
more
formal,
mature,
and
business-oriented.
I
browsed
through
some
official
apps:
Baicizhan,
Liulishuo,
and
Bubeici.
I also
browsed
works
from
Pinterest.
Fig.
1.3
Reference
Sitemap
Fig.
1.4
Sitemap
Week
12
Make a
Figma page
based on
the user
flowchart
and the
draft
drawing.
Only need
to make
the main
home
page.
Wireframe
Fig.
1.5 Screenshot
of
the
process
in
Figma
Then I started
doing simple
micro-interactions
on my wireframe
to make sure the
application was
simple to
render.
Micro-interactions
1）Status
Change
When a
user
clicks a
checkbox,
the system
uses a
checkbox
animation
to
indicate
that an
action has
occurred.
For
example,
checked →
unchecked,
or vice
versa.
Fig.
1.6 Status
Change
2）Overlay
When the
user clicks
on an
element,
this
interaction
is
triggered.
After
clicking, an
overlay is
opened to
display the
card's
floating
content. The
name of the
floating
component is
displayed.
The pop-up
floating
layer will
be displayed
in the
center of
the screen.
The user
clicks on
the
background
to close the
floating
layer.
Fig. 1.7
Overlay
3）Screen
Slide-in
and
slide-out
animations
are used
when
navigating
into
subpages,
helping
the user
to
understand
their
current
location
in the
app.
Fig. 1.8
Screen
Low-fidelity
prototype
(Overall)
Fig. 1.9 Overall Lo-fi Prototype
Fig. 1.10 Overall Lo-fi Prototype
User
Testing
Video
&
Feedback
1）User
Testing
(1):
Yee
Qin
Fig.
1.11 User
testing
video
User
Testing
(2):
Ivory
Fig.
1.12 User
testing
video
User
Testing
(3):
Phang
Ann
Fig.
1.13 User
testing
video
2）Feedback:
User 1
Yee
Qin:
1.
Were
there
any
areas of
confusion
or
incomprehension
in the
prototype
navigation?
Yes, I
found the
flow
generally
clear, but
there were
a few
minor
issues.
For
example,
when I
clicked
back, the
back
icon's
interaction
was a bit
messed up;
instead of
returning
to the
previous
page, it
did
something
else.
Also, the
"View
other
analyses"
button was
a bit
small and
difficult
to read.
2.
What
do you
think
of the
analysis
of
errors
in
answering
questions?
I found
the
error
analysis
very
helpful.
It not
only
pointed
out my
mistakes
but also
explained
why my
answers
didn't
work in
a
business
context.
This
helped
me learn
how to
adjust
my tone
and
vocabulary.
I
especially
liked
the
suggestions
for
better
alternatives.
3.
What
do you
think
of the
upfront
personalization?
Do you
find
it
helpful
or
annoying?
I actually
found it
very
helpful.
Being able
to
pre-select
my
industry
and
learning
goals made
the course
feel more
relevant.
It made me
feel like
the app
understood
my
situation.
Just make
sure the
number of
questions
isn't too
long—ideally,
keep it
under six.
4.
On a
scale
of 1
to 10,
how
would
you
rate
the
overall
user
experience
of the
redesigned
app?
I give
it a 9
out of
10. The
design
is
clean,
the
navigation
is
intuitive,
and the
business-focused
content
is
well-thought-out.
If the
prototype
is fully
functional
and
well-polished,
it will
become a
useful
tool for
professionals
learning
English.
User
2
ivory:
1.
Were
there
any
areas
of
confusion
or
incomprehension
in
the
prototype
navigation?
No,
the
prototype
is
straightforward
and
intuitive.
The
navigation
flows
smoothly,
and
the
visual
cues
are
strong
enough
to
guide
users
effortlessly.
Testing
the
prototype
exceeded
my
expectations;
it was
genuinely
fun
and
engaging,
which
encourages
continued
interaction.
The
design
cleverly
keeps
motivation
high,
similar
to
Duolingo’s
gamified
learning
approach.
2.
What
do
you
think
of
the
analysis
of
errors
in
answering
questions?
The
error
feedback
is
helpful
and
informative,
supporting
learning
rather
than
just
pointing
out
mistakes.
3.
What
do
you
think
of
the
upfront
personalization?
Do
you
find
it
helpful
or
annoying?
It’s
helpful
and
not
intrusive.
It
makes
the
experience
feel
more
tailored
and
relevant.
4.
On
a
scale
of 1
to
10,
how
would
you
rate
the
overall
user
experience
of
the
redesigned
app?
9/10.
It's
visually
appealing,
smooth
to
use,
and
motivating,
with
only
minor
room
for
improvement.
User
3
Phang
Ann:
1.
Were
there
any
areas
of
confusion
or
incomprehension
in
the
prototype
navigation?
Not
much;
the
prototype
had
easy
navigation,
which
was
not
confusing
at
all.
2.
What
do
you
think
of
the
analysis
of
errors
in
answering
questions?
It's
very
helpful
to see
analysis
and
informative
3.
What
do
you
think
of
the
upfront
personalization?
Do
you
find
it
helpful
or
annoying?
It's
thoughtful.
I
don't
find
it
annoying,
actually.
4.
On
a
scale
of 1
to
10,
how
would
you
rate
the
overall
user
experience
of
the
redesigned
app?
I
would
rate
it 8
out of
10, as
it's a
thoughtful
designed
prototype
that
provides
help
in
learning
languages
1)
Reduce
the
number
of
steps
that
are
not
needed.
2)
Adjust
the
app
style
to
be
more
professional
and
formal,
and
modify
the
mascot
owl
design
to
make
it
more
business-oriented.
3)
Focus
on
the
homepage.
4)
Add
a
progress-sharing
function,
export
reports
to
the
boss,
provide
content
at
different
learning
levels,
provide
professional
learning
paths
such
as
business
communication,
meeting
skills,
etc.,
and
provide
analysis
functions.
5)
Add
a
progress
chart
for
learning.
Week
13
Integrate
all
frames;
the
overall
look
is
very
neat,
and
it
is
easy
to
adjust
the
spacing
and
intervals
between
elements,
making
sure
that
the
text
and
elements
are
the
same
size.
The
colors
look
coordinated,
with
blue
as
the
main
color.
The
font
is
a
bit
small,
but
a
size
of
16
is
best.
Simplify
the
design
adjustment
process
and
maintain
a
unified
design
style.
Reflection
Through
this
project,
I
gradually
learned
how
to
draw
inspiration
from
existing
apps
to
make
my
own
designs
more
concise
and
easy
to
use.
With
only
a
few
weeks
left
for
the
prototype,
I
had
to
manage
my
time
efficiently
and
iterate
quickly.
I
needed
to
rethink
the
overall
design
of
my
app
because
I
was
redesigning
a
commercial
version
about
learning
languages,
which
had
a
certain
professionalism,
unlike
the
original
children's
language
learning
app.
When
linking
the
prototype
screens
in
Figma,
I
found
that
the
interaction
logic
was
a
bit
confusing—especially
when
different
results
appeared
depending
on
the
user's
clicks.
Some
screens
were
repeated
but
slightly
modified,
and
some
were
still
fixed.
I
had
to
make
sure
that
all
versions
were
accurate.
This
made
the
user
experience
more
complex
and
more
difficult
to
arrange
clearly.
And
I
also
added
content
about
team
analysis
and
ways
to
exchange
experiences
and
practice
speaking
in
the
community.
This
made
me
think
for
a
long
time,
and
I
had
to
design
the
same
style
as
the
original
Duolingo.
In
this
process,
I
found
that
designing
an
app
is
not
only
about
visual
beauty
but
also
about
how
users
navigate
it.
Although
it
was
a
challenging
experience,
I
am
proud
of
everything
I
learned
and
created.
I
gained
a
deeper
understanding
of
user-centered
design
and
interaction
processes,
which
will
definitely
inform
how
I
design
learning
platforms
in
the
future.
Comments
Post a Comment