UI/UX Artifacts
This page contains samples of the typical artifacts associated with
User Interface and User Experience Design created as part of my
graduate program. Designers create solutions to design problems. They
are problem solvers and conceptual thinkers. Graphic design involves
creating visual meaning through the thoughtful manipulation of the
elements and principles, but also typography, positive and negative
space, and imagery of various media.
Site Map
The first step to creating a new site or graphic often starts with
pencil and paper. The designer sketched out ideas until they start
to make enough sense to create a Site Map.
This site map was created using Adobe XD as part of a graduate class
spa redesign project. Site maps should include all pages necessary
to meet the client requirements and reflects appropriate
parent/child page relationships; users can navigate to child pages
by clicking on the corresponding parent pages.
Wireframe
Wireframes provide a simple way to show how the elements of a
webpage would be laid out on the page, before the elements are
added.
This wireframe was created using Adobe XD as part of a graduate
class spa redesign project. There are more pages to the site than
are shown in the image as this is snapshot of the wireframe in Adobe
XD.
Prototype
A prototype is the next logical step in the process where there is
way provided for the us to interact with the wireframe. “Prototyping
is an essential activity to reduce risk and uncertainty as early and
as cheaply as possible, to improve the quality of [our] final
deliverable, and to eventually implement [our] project
successfully.” (Hormess, Lawrence, Schneider, & Stickdorn, 2018).
Electronic prototypes are interactive mockups of a website without
being launched on the Internet, that have the ability to apply
easy-to-understand, portable visual tools. This is a method of
testing that we can use to determine if our design has met our
expectations. The electronic prototype can include more detail, and
will supply an immediate picture of how a website will behave, what
will capture a user's attention, and how that user will navigate the
site.
Persona
Personas, also known as user profiles, are a user-centered website
design research method used to define the typical users of your
website. Personas can be used to answer questions such as these: Who
are the users and how will they behave on the website? Will they
find their way around the website easily? Will the website meet the
goals of those users?
This Persona is a demographical snapshot of a fictional client that
frequents Serenity Day Spa and Salon. Her name is Evelyn Carter and
she is a local business owner located near the Spa. Her business is
a bed & breakfast; therefore, it is tourist-driven. Not only does
Evelyn frequent the spa, but she is often asked to recommend local
salons by her guests. Most of these guests are women looking for
massages after travelling long distances to get to the Inn. Many of
them are repeat guests; they are all comfortable using the site to
register their email for appointments and receiving text message
verifications.
Journey Map
The goal of a web designer is to make a website based on user needs,
we want to view the website from the perspective of the client. A
powerful tool that we use to accomplish this is called a customer
journey map. The purpose is to gain understanding about the path a
user travels and what they experience along the way.
This image is a User Journey Map for a fictional client named Selene
Bishop. She is a 33-year-old archaeologist out of University of
Maine at Orono. She is originally from Camden, Maine, and visits
home as often as possible. When Selene visits, she and her younger
sister, Kera, look forward to spending time at the spa.
Experience Map
The customer experience map is an illustration of the path a client
will take to complete the task of researching the website,
registering, scheduling an appointment, and receiving confirmation.
We want to try to understand the thoughts and feelings they
experience throughout the process of achieving the goal set forth.
In this case we are looking at an experience map for a new potential
client named Selene Bishop. The map shows her path through
discovering the spa’s website and how she felt about her journey.
When she arrived at the site, she was hopeful and had indifferent
expectations. Her initial impression of the site was pleasant
enough, but she quickly became annoyed when she couldn’t immediately
find the services she was looking for.