UX/UI designer-developer | I am a UX/UI Designer-Developer and storyteller who loves working with companies and solopreneurs who aren't afraid to live out of authenticity. https://www.linkedin.com/in/darbyslaton/

1. Hi, I'm Darby
UX/UI Designer-Developer
I design & develop websites for startups, brands, and entrepreneurs.
1.

2. Spoiler alert if you want skip my
process and see the finished website,
you can take a peak if you want to
page 18-20
My story
Projecting good vibes since 2013
2.
Click Here

3. Did you know brand identity will affect your user
experience?
3.
My mission
To transform uninspired brands into a friendly,
personable companies so that your users will
have greater experiences with your business.
My process
I help you get clarity on business goals and help
your company draw out your unique voice and
message.
Then I do a deep dive into your users' worlds
and their needs, wants, and pains.
.

4. Research helps us
understand and empathize
with the story of people's
lives, which reveals problems
they face and get to know
their wants and desires.
As a result, we have the best
chance to find key product
opportunities and create the
rich customer experience to
server our users' the way they
deserve.
My methodology to finding
your company's creative voice
is tied to my experience as a
business coach. I help clients
get past the fluff with deep
coaching sessions.
I know how to ask powerful
questions to find out a
companies why and the story
they want to tell. This process
is also heavily data-driven. My
unique process is both an art
and a science.
Looking at the experience as
a whole is my strength. I love
looking at it as a whole
because great experiences
extends beyond the screen.
Building brand assets that
reflect your authenticity will
help you stand out from the
crowd.
I am experienced in
sketching, rapid wire-framing,
prototyping, and front-end
development.
The sweet spot
My 3 areas of Focus-The work I do
Product & User Research Visual designing & branding
ABOUT ME
Prototyping & Code
4.
1. 2. 3.

5. ARIA'S CASE STUDY
Aria received these deliverables
Sitemap
Wire-frames
Persona
Mood board with brand assets
Mock-up
Website
Usability testing results
Case Study
Aria's Online Art Portfolio Experience.
Role I Played
Marketing & user research report
User flow & customer journey
map
Brainstorming sketch
Prescriptive report for possible
rollout of phase 1 & 2
Aria is a fictional character, I know there are
some limitations but I believe this project will
be able to highlight my skills, philosophy and
mindset.
Aria is an independent digital artist and puzzle
enthusiast whose work intersects geometric
abstraction and portraiture. She is based in
Portland, Oregon.
Who Is Aria?
To finish this project in a two-week period as a
sole UX/UI designer-developer. Alongside this
goal, I also built this case study.
Goal
This is an end to end solo project. Every step
in this case study was done strictly by me.
Project planning, research, design, and
development.
For more info 717-990-6999
5.
Aria's artwork

6. Understand the
user experience
Empathize w/ the
user
Brainstorm
design solutions
ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
User research
Market analysis
Affinity mapping
SWOT analysis
Developing
problem
statement
User persona
Brainstorming
MoSCOW method
Wire-framing
Site map
User flows
User journey
Branding
Prototyping with
HTML & CSS
Testing
Making site live
My goal is to create an MVP website to help an
artist market her work and be easily contacted
for commissions.
User Flow & Journey Brainstorming
Developing the
solution
Wire-framing &
Prototyping,
The tasty ingredients of Aria's project include...
6.
1. 2. 3. 4.
Affinity Cluster

7. FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
Phase I
Phase II
Phase III
Phase IV
Screenshot of the Typeform survey for user research
1. Understanding the user’s experience.
I created an online Survey for those who purchased art online & had 10 participants
7.
The majority of online art purchasers are once a year.
The majority of art buyers are women.
People buy art online more than in person.
The objective to this survey
To gain empirical data to challenge any and all hypothesis, and to discover the
psychographic pf the purchasers of art online i.e. what are their needs, motivations,
attitudes, and pain points.
The 3 hypotheses
1.
2.
3.
*Phase two will share the findings of this survey.

8. Key findings and Takeaways from research
2. Empathize with the
user
Connecting the dots in my research discovering themes, pain
points, wants, and desires of users.
An artist being approachable and being able to connect
to the artist was the driving factor to purchasing art
online.
The 3 hypotheses were set against the data from the user
research. It is true that women are the main art buyers online
and that people buy art online more than in person however,
one of the hypotheses were wrong, i.e. that are was mainly
purchased one time a year.
What was discovered is that art was purchased multiple
times a year.
Biggest takeaways,
1.
2. Aesthetics was the reasoning behind these purchases.
3. Quality was more important than viewing art as an
investment.
Going over my notes for the next step
9.
FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
8.
Phase I
Phase II
Phase III
Phase IV

9. Persona
“ H o w m i g h t w e c r e a t e
a p o r t f o l i o w e b s i t e
f o r
A r i a t o d i s p l a y h e r
a r t w o r k a l l , a n d m a k e
i t e a s y f o r u s e r s t o
c o n t a c t h e r f o r
c o m m i s s i o n s ? ”
Problem Statement
ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
Here I transformed findings from the
surveys, interviews and research into a
problem statement and a persona.
Hand-drawn persona, Theresa Romero
9.
The persona & problem statement will be the foundation to this project.
All decisions will be made based upon this data.

10. 3. Brainstorm design
solutions.
Then I moved into brainstorming solutions for Aria.
Some of the ideas generated will be for possible future roll-outs
11.
FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
Phase I
Phase II
Phase III
Phase IV
10.

11. Evaluated data using the MoSCOW method to narrow down
the solutions according to our clients budget and time
constraints and the data that was gathered by the user
research (put this at the end recommended two other roll-
outs of this first iteration).
Reason for this choice
4. Developing the solution.
Narrowing down my options.
White-boarding using the MoSCOW method
Decided on THESE solutions:
1. I decided the must have for Aria is a website with 3
pages, Portfolio, About, and Contact.
2. For the contact form there needed to be a clear call to
action with a simple layout. This feature directly correlates
to the most significant pain point uncovered in the research
of being difficult for users to connect to the artist.
3. Aria requested to have her social media links in the
Footer of the website.
12.
FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
Phase I
Phase II
Phase III
Phase V I
11.

12. FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
Wire-frames for Home, About & Contact page
The next step in the design, for a faster
iteration I drew the wire-framing with marker
and paper.
12.

13. Sketched out Aria's Site Map
I built upon the wire-frame design creating
a site map to identify the paths of the
website.
ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
13.
The goal is...
To keep this site clean & easy to navigate. Our user
persona, Theresa' pain-point, is not being able to connect
directly to the artist.

14. User-flow + User Journey.
My sketches of Aria's Task & Wire Flow
ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
14.
The goal is...
To create a good user journeyfor Aria's website and
reduce cognitive load by making the website clean
with natural transitions and flows.

15. 2.
1. 3. 4.
5.
Creating Aria's Brand.
My process for developing Aria's five elements of style for Aria's board.
The goal
To demonstrate
Arias' approachable
personality comes
through & that she is
easy to connect with.
The essence of the brand
What drove the branding
was Aria's art that was
geometric shapes using
the contrast of colors
that were bold or neutral
in nature.
The logo is an abstraction
from Aria Osolos' name.The
choice of pink in the logo
was to exude her
humanness. The O in the
logo abstractly resembles
the Earth for the geometry
of nature.
15.
FOR MORE INFO 717-990-6999
ARIA'S CASE STUDY
Researching: Creating my mood board Finding the pattern of colors that Aria &
I agreed upon
Typography experimentation
& final choice
Rough sketches on my iPad using the
app Procreate
Logo & logo mark
Insight: Design decisions

16. Aria's
Finished
Website
16.
After 2 weeks and 52 cups of coffee,
hours of non-stop Spotify streaming,
and locking myself in my man-cave
finally I present ...

17. ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
17.
I implemented a 12 point grid. I
used the white space to let the
design breathe and make it easier
for users with the simplicity of the
web design

18. ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
18.
Aria wanted her users to be able
to connect with her also on social
media. In addition, using the larger
font makes it easier to find &
lessens eye strain.

19. ARIA'S CASE STUDY
FOR MORE INFO 717-990-6999
19.
The copy here serves a a big purpose. As
you know, the biggest complaint about
online art buyers is that they cannot get in
touch with artist.
This copy explicitly gives a promise to the
user that this will not be their experience.

20. FOR MORE INFO 717-990-6999
The outcomes, what I learned,
& challenges of this project etc...
ARIA'S CASE STUDY
20.
I ensured the website was delivered on
time without any scope creep and quickly
got the product to market.
There were challenges of my own bias. I
had to resist making assumptions- it may
have been too close to home as an artist
who sold work online. This was partly kept
in check with the collected data.
Another challenge I had was, finding direct
client competition that were at the same
business maturity as Aria. I solved this by
finding up-and-coming artists online and
then checking their portfolios.
Since Aria is not an actual client, I am aware
that there is a lack of real-life constraints, and
there are many more variables in a real-life
scenario when working with a living breathing
client.
I am beginning to do contract work. This will
give me real-world experiences that I may add
(depending if there is a NDA) these future
projects to my portfolio.
I would have gone deeper into my brand
design process.
Business outcome/s
What I learned
The limitations & challenges I faced
What I would like to have added to this project

21. FOR MORE INFO 717-990-6999
The outcomes, what I learned,
& challenges of this project etc
ARIA'S CASE STUDY
21.
Also ,due to the constraints of time
that I gave myself, I realized that if
there was more time for the project
or if I was working with a team.
I could gain a wider net of target
users to participate in qualitative
and quantitative research.
This was by no means the only aspect
of what I left out, but one of the most
notable instances is when I noticed a
gap in my data. The gap was insight
into the difference between those who
bought prints vs. originals.
The blind spot happened with my
survey and interviewing for the first
round
I resolved the issue by reaching out
directly to those who took my survey
and wrote them a direct message to fill
this gap in data.
I found out that out of the 10, 5
purchased both.
The limitations & challenges continued
Things I left out
Due to the size of this case study, I had
to leave out the process of my
Facebook poll and interviewing. The
data contributed to the problem
statement and developing the user
persona.

22. FOR MORE INFO 717-990-6999
Studying my craft.
What I am learning about currently
1. I am reading Branding: In Five and a Half Steps by Michael Johnson I
want to dive deeper in designing a better process for projects building
brand systems
2. This podcast How To Draw A Startup by Mark Grambau is about
illustration in tech and I am reverse engineering their process for building
branding systems using illustration.
3.Illustration For Designers by Greg Gunn is a course that I am currently
taking.
ABOUT
22.
My self-directed curriculum
I learned by practicing JavaScript everyday for the past year. I also dove
deeper into UX/UI theory and practical knowledge through books,
courses, and experimental projects.

23. FOR MORE INFO 717-990-6999
Studying my craft.
UI design & illustration
Sketches wire-frames &
design concepts
Sitemap & prototype
design
Visual designing &
branding
Figma, Sketch, Photoshop,
Illustrator, Procreate, &
Affinity Designer
Notion & Trello
Field study & observation
User flow, persona
creation, & Usability
testing
Design Skills
Copywriting
User empathy and
design thinking
Project management
Information Architecture
Social media marketing
Information architecture
Motivational speaking
Coaching
Online course creation
Other Skills
Front-end development
Interaction & responsive
web development
React/JavaScript ES5,
ES6
Html-5/CSS3
Rest API
Git/Gitbash
Npm & Yarn
JSON
VS code
Development Skills
The Ultimate Guide to UX
by David Travis
Intro To UX Design by
SuperHi
Visual Design & Branding
by SuperHi
Plan, Design + Code
Your First Website by
SuperHi
CSS Grid by Wes Bos
Courses I’ve taken
Ui Breakfast w/ Jane
Portman
Front End Happy Hour w/
host Ryan Burgess
UX Hustle
Podcast I like
Events
ABOUT
23.
Sketching User
Experiences: Getting The
Design Right & The Right
Design by Bill Buxton
Don’t Make Me Think:
Revisited by Steve Krug
Books I love

24. The next step
If you like what you see, feel free to reach out to me
darbyslaton@gmail.com
(717 ) 990-6999
Let’s connect
CONTACT
24.