This overview details the UI/UX design process at our company, Propeller Labs. We pride ourselves on partnering with leading companies to create digital solutions. Innovative design, through effective process, has positioned us to become a leading partner in building digital products.

1. UI/UX
Process
© Propeller Labs, Inc.
Proprietary and Confidential

2. Design

3. UI/UXWeek 1: Kick Off. Work Sessions for User Research and Market & Competitive Research. Review
Existing Style Guide and Brand Requirements. Ethnographic Study for Early Product Prototyping.
Week 2-5 (5-Day Sprints): Our focus for each 5-day sprint is to present a problem, propose a
hypothesis, and prototype and iterate on solutions that meet both design, technical, and business
requirements. Incorporated into these sprints are: Environment & Research and Personas & User
Flows. The majority of iterative design thinking happens in: Wireframes & InVision and Sketch &
Patterns. Identifying the path forward includes prep and feedback using Zeplin & Interviews.
Week 6: Finalize Design. Produce Assets & Updated Style Guide for continued use and product
extensibility.

4. 5-Day

5. Mon.Environment
We start by setting the stage for
collaboration. Although basic,
having the tools and people
necessary for a successful sprint
are by far the most important.
Our environment includes
whiteboard space, multi-color
markers, post-it pads, dot
stickers, roll paper, tape and
snacks!
A collaborative, objective-
oriented exploration of a
core problem. Through
research, internal interviews,
and product mapping, we’ll
aggregate all our learnings at
the end of the day.
Research
Once the stage is set, we identify
the problem and our goal. This
may vary depending on the
project, but it could start with a
large product feature (e.g. P2P
Marketplace App // How do we
make a marketplace that is
trusted?). Then we begin writing
down lists of competitors, key
personas, relatable design
patterns, and features.

6. Tues.Personas
Key personas are critical to our
following user flows. We’ll not
only understand who to
empathize with for end-user
design cases, but we’ll also know
who to interview once we’re
ready to present.
Armed with knowledge and
fresh minds, we’ll roll out a
sheet of paper and handout
post-it pads. A combination
of existing ideas, remixes,
and new, innovative
approaches to answering the
problem.
User Flows
Without a clear stopping point,
the user flows are meant to get
all core screen states or user
action states in a horizontal flow
on roll paper. This allows us to
understand the complexity of a
task, but also allows us to
understand all possible variations
of product usage based on the
end-user.

7. Wed.Wireframes
We eliminate implausible flows
and decide our best paths
forward. Jumping into digital, we
use our wireframe kit in Sketch.
For some, tools like Balsamiq
mimic this portion. The goal is to
identify all design elements in a
screen, with enough fidelity to
understand functionality but not
enough to misinterpret as actual
design.
Knowing the objective,
audience, and end goal, we
can focus on picking the
best possible solution to the
problem. With a focus, we
can begin increasing our
design fidelity to LTF: lowest
testable fidelity.
InVision
For project collaborators, internal
domain experts, and the Client,
we put our high fidelity
wireframes into a clickable
prototype to test our flows and
ultimately, our hypothesis. A
facilitator will ask specific
feature-related questions like
“How might you start a chat?” to
test assumptions and designs.

8. Thurs.Sketch
After we’ve tested our
wireframes and made feedback-
related adjustments, we start
designing high fidelity UI in
Sketch, a vector-based tool.
Making use of artboards and
symbols allow us to recreate and
duplicating screens or elements
to design for all states.
Turning up the nob on color
and design, we’ve quickly
validated concepts with low
fidelity wireframes, while also
setting up a blueprint for
interface design.
Patterns (Craft)
We also use 3rd party tools like
Craft, by InVision, to populate the
UI with placeholder text, image,
and pattern content. This saves
time and provides a more
complete picture to both the
end-user and the developer
working on the project.

9. Fri. Zeplin
Removing the need for a design
spec sheet and copious notes on
measurements, Zeplin is a tool
that transitions design to
development, where pixel-perfect
margins, object sizing, color
hexes, and exportable assets are
all contained in an organized
screen-by-screen interface.
Whoa, look what we’ve
accomplished in just 5-days!
Yes, there’s more refinement,
but we’ve created well-
defined foundation
continued design iteration
and are confident enough to
move onto another core goal.
Interviews
We conclude with another round
of external interviews with the
client to finalize our output to
dev and catch any remaining
edge cases that may have arisen
during the UI design phase.

10. Talk
Looking forward to
working with you.
propeller