Portfolio_Daffa_Alberta_Votary_UIUX_Designer.pdf

Design
Portfolio
Daffavotary@gmail.com
Daffa Alberta Votary

An Interaction & Visual Designer - UI/UX Designer
with over 3 years of freelancing experience
designing digital products and helping
companies, startups, and individual clients
around the world in various design projects (web,
mobile, TV, and handheld POS).
Introduction
Parsley Design System
Freelancer.com
Azam TV
Research Bazaar
Josh Long
Spare.inc
Emulai
Gallos Data
Provenance
4.9
Top-Rated Freelancer

@ Freelancer.com
Daffa Alberta Votary

Billcation - Case Study
A full-scale implementation of
Design Thinking in UI/UX Design to
create a solution that facilitates the
distribution of shared trip expenses
among users.
School Parents App
Unveiling the rationale behind
visual design decisions
Gallos Baloteo
Crafting a digital stadium
management Solution for a one
of Dominican national sport
Some of My Other
Projects
7 showcases
Table of contents Daffa Alberta Votary

User Research Persona Journey Map How Might We
User Stories User Flow Wireflow & Wireframe
Hi-Fi & Prototyping Usability Testing
Pattern Identification
Billcation
A full-scale implementation of Design Thinking in UI/UX
Design to create a solution that facilitates the distribution
of shared trip expenses among users.
#1
Winner of HIMSI’s
UI/UX Design
Competition
1
Daffa Alberta Votary - Billcation Case Study - 2022
The brief
BillCation is an application that helps users to record and
calculate group trip shared expenses more quickly and
accurately using automatic calculations and data
collection. This is an application we (group of three) made
for a design competition. As a UI/UX Designer, I invovled
in all the process of design thinking in order to develop the
proposed solution.

For this design competition, my team and I established
our product's central concept: making group trip shared
expense splitting easy and precise. Our discussion started
by sharing the challenges we faced during group trips. We
all dealt with the same problem: “The hassle and
exhaustion of jotting down shared expenses, figure
out who owes whom, and how much. It's a real time-
consuming.”
On group trips, people often take turns covering expenses.
They need to track who paid for what, who owes money to
others, and calculate each person's share. Double-checking
the calculations for accuracy and attention to detail is
crucial. This process can be time-consuming due to the
need for meticulous data collection and calculations.
The background
2
The process Emphatize
Define &
Ideate
Create Test

First we needed to understand who our users are and
share in the emotions they experience while managing
shared expenses on a group trip. We conducted user
interview to gain understanding of with how they might feel
about the challenges, situations, or circumstances they
encounter.
3
Empathize
User Interview
Goals
Understand and identify the
processes and emotions that people
experience when participating in
group trip shared expenses, along
with their behaviors, needs and goals.
Participant & their criteria
10 people who have participated in a
group trip and involved in shared
expenses during the trip.
Tools
Google Meet, Whatsapp Call, Face to
Face
Process highlight
We implemented Toyota’s Five whys during
interview. Toyota’s Five whys is an interrogative
technique used to explore the cause-and-effect
relationships underlying a particular problem. The
goal of the technique is to determine the root cause
of a problem by repeating the question "Why?" five
times. The answer to the fifth why should reveal the
root cause of the problem.

From research phase, we were able
to gather 2 user groups and able to
understand their behavior, goals,
needs, and frustration the
participants were facing.
4
Define
User Persona

We were also able to map their user
journey to create a comprehensive
visual representation of their
experience. This journey map will
highlight the various stages of
interaction across all touchpoints
when they were involved in shared
expenses.
5
Define
User Journey Map

Furthermore, we created How Might
We (HMW) Questions to foster
creative solutions and maintain our
focus on the issues uncovered in user
interviews.
6
Ideate
How Might We
(HMW) Questions

After deriving solutions from the HMW
(How Might We) phase, we proceeded to
articulate user stories, encapsulating the
specific desires and actions users would
like to see and undertake when engaging
with the app. This user story process
served as a crucial step in refining and
specifying our design solutions based on
a profound understanding of issues
discovered in previous phases.
7
Ideate
User Stories

From each user story, we transformed it
into user flow to show the path a user will
take in application to complete the task.
We created the user flow on paper
because it was easier for us at that time.
8
Create
User Flows

After we have a clear idea from the
previous processes, we created
wireframes to provide a clear overview of
the page structure and demonstrate what
interface elements will exist on each
page. We also created wireflows as a
visual representation of the screens and
interactions a user follows to complete
tasks.  
To help us speeding up the wireframing
process, we created this in Figma and
used a plugin called “Ink Wireframe” as it
provides some basic wireframe
components so we didn’t need to create
the new one.
9
Create
Wireframe and
Wireflow

At this stage, we transformed each
wireframe into actual app design in
Figma. We sought for minimalist and
clean design.
10
Create
Wireframe and
Wireflow

11
Features
Automated Bill
Documentation using
Optical Character
Recognition (OCR)
We aimed to streamline bill
documentation, so we offered
automation. By simply scan the receipt
with camera, BillCation automates the bill
documentation process and settles all
shared expenses effortlessly.

12
Features
Automatic Shared
expense Calculations
and settlements
Going through bill after bill to balance
everything is time-consuming. That's
where the App comes in – Our 'Summary'
section allows users to swiftly grasp
balances and payables, along with the
recipients. BillCation automatically
computes the total group shared
expenses from shared expense records
and provides the most efficient and
effective debt settlement process for all
parties involved.

13
Features
Group & Personal
Expense Record
BillCation helps to effortlessly track both
group and personal shared expenses,
providing a comprehensive view of group
and personal financial interactions during
trip.

14
Test
Usability Testing & Results
After the design was completed we tested the prototype
with representative users to verify the usability and
effectiveness of our solution in addressing the problem.
Participants were given the certain tasks to complete
based on the our proposed solutions.

All participants succeeded to do all tasks. But we still had
to dig deeper to see how they interacted with the
prototype and created pattern identifications based on
heatmap, clickpath and completion paths. We also
collected some feedback during the test.
Method
Unmoderated
usability testing
Participant
5 people
Tools
Figma, Maze
Task 1
Avg. Time
29.3s
Success Rate
100%
Task 2
Avg. Time
146.5s
Success Rate
100%
Task 3
Avg. Time
98.8s
Success Rate
100%
Task 4
Avg. Time
25.5s
Success Rate
100%
Task 5
Avg. Time
19.0s
Success Rate
100%

15
Test
Patern Identification #1
3 out of 5 subjects had a hard time
selecting method for recording the expense
and constantly switching between auto or
manual when they first time interacted with
it for the first time during test. This means
that for some users, they were not
confident to determine which method
they should use.
Before After
We found the label didn't explain the menu well or help users
navigate. So, we changed it to something clearer, making sure
users know what happens when they choose options.

16
Test
5 out of 5 subjects got lost in the process
of assigning people to item they bought.
They took quite some time to figure out how
to do it. This means that for some users,
it’s immediately not clear how to assign
people to item they bought.
We introduced a walkthrough with a modal and animated
hotspots to help users assign items in transactions. Additionally,
a 'Help' icon allows users to replay instructions when needed.
Before After

17
Test
5 out of 5 subjects clicked the text label of
the checkbox/radio button instead of the
checkbox/radio button itself. This means
that they expect the text to be a
touchpoint also.
Before After
Originally, users could only tap checkboxes/radio buttons. We
improved it to allow selection via the text label as well.

18
Test
1 out of 5 subjects commented that when
he was selecting the payer and entering the
amount, he got lost on which transaction he
was currently recording and how much the
amount of the spending was due to lack of
reference.
Before After
To tackle this problem, we added the details of transaction name
and the total of expense at Select Payer page.
R, 25
“While choosing the payer and entering the
amount, I forgot which transaction I’m currently
recording and the total amount of the expense,
so I have to go back to the previous page to
check it.”

19
Test
2 out of 5 noted that certain titles or labels
didn't effectively convey the intended
action, leading to confusion. This means
that for some users, some labels or titles
are hard to understand.
Before After
We found the label didn't explain the menu well or help users
navigate. So, we changed it to something clearer, making sure
users know what happens when they choose options.
R, 25
“After inputting expense there is menu called
‘Select Members’ which was confusing at
beginning. We choose members for what?”
H, 25
“The term 'Select Members' in the top bar title
can be changed to 'Select Participants' and/or
'Who are involved in this expense?’”

20

21
Key takeaways
User Involvement Drives
Design
One key lesson was understanding
the pivotal role of users in the design
process. Actively engaging them in
the process and incorporating their
feedback ensures that our app
authentically addresses their needs
during trip expense management.
Intuitiveness is Key
The project emphasized the
importance of making the app easy to
use. A straightforward interface with
clear visuals and simple navigation is
key for users to adopt and enjoy the
experience.
Discovering Root Issues with
the 5 Whys
We discovered the effectiveness of
the 5 Whys approach, borrowed from
Toyota. By repeatedly asking "why,"
we uncovered the root causes of user
problems. This method guided our
design, addressing core issues more
precisely

Enhancing Home Page Refining Spacing Selecting Icons
Color Aesthetics Style Guide and Component Management
School Parents
App
Unveiling the rationale behind visual design decisions.
22
Daffa Alberta Votary - School Parents App Project - 2022
The brief
This app is designed for parents of kindergarten kids. It
provides them with essential information such as a
calendar, payments, check out request (when parent
arrives to school and request his kid from the app), daily
activities (activity feed), chat (school - parent
conversations). As a UI Designer, I was responsible to
redesign the app based on the requirement provided by
my client.

The background
My client approached me to help improve the UI. The app
was functional at that time but he felt like the app wasn’t
visually appealing. They provide me with screenshots of
the app that needs to be redesigned. He also asked me to
do the tablet version.
Scope
My client wanted to have the following pages to be
redesigned
Home Pag
Activity Calendar Pag
Chat Room Pag
Feeds Pag
Log In Pag
Profile Settings Pag
Check Out Request Sent Page
23

24
Analyzing Current App Design
First, I had to analyze the app using the screenshots provided by my client. Upon closer examination,
I identified areas for improvement
Enhancing the current home pag
Refining the color schem
Addressing inconsistent spacin
Replace the current icons with ones that are more representative and share a similar style.
Home Page Activity Calendar Page Feeds Page Payment Page Chat Room Page

25
Enhancing the Current
Home Page
The old home page felt quite bare, with
only user information on display. Since
the home page is the starting point of the
user journey and also acts as a summary
of the information users might want to see
or know, I introduced several crucial
content sections: Today’s Activities,
Pending Payments, and Recent Payment.
These details are valuable to users, and
having them right on the home page
streamlines everything – I don't even need
to lift a finger.

I also redesign the Request Checkout
CTA section as the existing section
wasn’t recognizable and barely legible.
Design Decision

26
Refining the color
scheme
My client didn’t give me any guidelines
regarding colors and I had freedom to
choose any color. In my opinion, the
existing use of color wasn’t visually
pleasing. As you see on the right, the
primary color of the app was orange but
the button was red, and even chat bubble
was dark blue. I redefined the use of color
to make the app more pleasing to look at.
I also generated tints and shades of each
color I used to ensure a harmonious and
visually appealing color palette
throughout the app. The color used in the
design is documented in Style Guide.
Design Decision

27
Addressing inconsistent
spacing
As you see in existing chat page, left side
area has wider space than right side area.
I rectified this inconsistent spacing
throughout the entire page by
implementing and outlining a grid guide.
The grid guide can be found in the Style
Guide.
Design Decision

28
Replace the icons with ones
that are more representative
and share a similar style.
Icons are, by definition, a visual representation of an
object or action. If that object or action isn’t clear to
users, the icon immediately lose it practical value and
becomes a visual noise. As you can see, for example,
the feeds page used “Gears” icon which commonly
used to represent settings page. I addressed that
issue by replacing the irrelevant icon with more object
or action representing icon.

The existing app used 2 types of icon, filled and
outlined. In the design I used outlined icon and I
replaced the filled icon with the outlined icon. I did
this so all icons has similar style to enhance the
aesthetic appeal of the app.
Design Decision

29
Mobile Version
Home Page Activity Calendar Chat to School Feeds

30
Mobile Version
Side Bar Log In Profile Settings Check Out Request Sent

31
Tablet Version
Home Page Activity Calendar Chat to School

32
Tablet Version
Feeds Side Bar Log In

33
Tablet Version
Profile Settings Check Out Request Sent

34
Colors
Style Guide

35
Typography
Style Guide

36
Grids
Style Guide

37
Design Components
Style Guide
I prepared and defined some
components that I use in the design
for the developers to be analyzed. I
applied atomic design principle for
managing the components.

38
Key takeaways
Streamlining
Information
Recognizing the home
page as a critical starting
point, introducing valuable
content sections, and
redesigning crucial
elements streamlined user
experience, emphasizing
the importance of
thoughtful design
decisions.
Creating a Nice and
Consistent Look
In the absence of color
guidelines, refining the
color scheme for visual
appeal taught the
importance of consistent
color usage and
documenting choices in a
Style Guide to ensure a
harmonious and pleasing
visual.
Using Grids for a
Clean App Layout
Addressing inconsistent
spacing through a grid
guide highlighted the
significance of an
organized layout. A
consistent grid system
ensures visual harmony
and a polished design
across various sections of
the app.
Making Icons Clear
and Beautiful
By introducing relevant
icons and establishing a
standardized style, we
enhanced visual cohesion,
resulting in a clearer and
more appealing visual
language.
Daffa Alberta Votary - Gallos Baloteo Project - 2021

Gathering Requirements Information Architecture
User Flow Hi-Fi & Prototyping
Gallos Baloteo
Transforming the Baloteo experience: Crafting a digital
stadium management solution for a one of Dominican
national sport
39
The brief
I created the Gallos Baloteo App, a digital solution for
managing animal fight matches in Dominican Republic
stadiums. As a UI/UX Designer, I was responsible for
designing the MVP, from icons, illustration, mockup,
prototype, and collaborated with my client and iterated the
process based on the client feedback.

Baloteo is animal fight match held in stadium. It’s one of national sport of
Dominican Republic. My client wanted to have this PWA as a all-in-one digital
solutions to help stadium to manage the Baloteo and give fans or participants
more interactive experience. This application is one of several I've designed
during my tenure at Gallos Data, including apps for regular users/fans and
stadium owners, totaling 5+ applications. I have a very tight deadline of three
months to complete all these applications, including this one.
The background
40
Daffa Alberta Votary - Gallos Baloteo
The process
Gathering
Requirement
Ideate Create
Gathering
feedback
Project - 2021

42
Gathering Requirement
I participated in discussions with the client to gather requirements. He already
had a clear vision of the desired functionalities and provided photos and
documents outlining his idea. I also actively engaged in discussion to
understand the current activity flow, user problems, and preferences. I
leveraged his insights to comprehend the challenges users face since direct
access to potential users was not feasible. However, after the design was
finalized, my client engaged with multiple stadium owners and Baloteo workers
to gather valuable feedback.
The user and audience
The user and audience for this app
are the Baloteo workers on the
stadium. They are the ones who
managed the Baloteo process. My
client said that they’re mostly not
tech-savvy so I needed to make it
simple and straightforward.
Scope
There were some main area my client
wanted to cover in this app
Animal receiving phase
Matchmaking phas
Match phase
Problem
Baloteo management was
disorganized, involving a
significant amount of paperwork
Receiving process could cause
long queue line and long wait
times. A participant could bring
more than 1 animal.

41
Daffa Alberta Votary - Gallos Baloteo
Understanding Baloteo Process
Project - 2021
Receiving the animal
Owners bring animals, registering
each under a team name with their
ID
The chemist inspects for
normalcy, tagging animals as
normal or rejected
Workers collect animal details,
tagging them as normal or
rejected
Animals are stored in numbered
cages by reception sequence.
Matchmaking
Worker creates matches for
normal-tagged animals using
formulas, producing a match
sheet
Animals are assigned to blue or
white sides based on the majority
of white feathers at their tails.
The match
The judge decides match outcomes
—win, draw, or lose. Matches can be
canceled if any issues prevent them
from proceeding.

43
The features
The app's features were designed with the central goal of simplifying Baloteo
management for workers while ensuring transparency and interactivity for
participants and fans. My client want to have this following features in the app:
Animal receiving
Quickly adding animal by taking
the most important informations at
the moment of receiving the
animals. Workers can finalize the
remaining details later, allowing
for a swift transition to receiving
the next animal and reducing the
overall processing time
Ability to edit, approve, and
exclude animals
Live receiving process information
that can be seen on regular users’
app
Matchmaking
Generating match and selecting
matching metho
Manage match sid
Announce matc
Print match sheets
The match
View match list, results, statistics,
and animal participating lis
Edit match result

44
After understanding the requirements and features, I created information
architecture and then presented them to my client. This allowed me to have a solid
foundation for discussions on the app's structure and functionality. Information
Architecture help me to organize and structure content of the app. I aimed for a
straightforward and clear navigation experience throughout the app by organizing
content logically, making it easy for users to find what they are looking for.
Ideate
Information Architecture

45
After creating the information architecture, I developed the user flows to map
out the navigation and interaction within the application.
Ideate
User Flow

46
I skipped wireframe process and and
went straight to creating mockup of my
ideas because I had a tight deadline. In
this process I also invited my client to the
design file so he could easily review it
and leave feedback through Figma’s
Comments. I ensured that the app has
clear labels, incorporating visual cues
such as color and icons to seamlessly
guide users and facilitate interaction with
potential users.
Create
Hi-Fi

47
Features
Animal Receiving
Quickly adding animal by taking the most
important information (Owner account
number, team, betting amount and
betting preference) at the moment of
receiving the animals. Then the worker
can move out to next animal waiting in
line. Workers can revisit the added animal
later to complete all required information
and decide the status of the animal
(approve or exclude).

Users can see any receiving process
updates (live feed) on regular user’s main
app.
Main Receiving Page Add animal Complete animal information

48
Features
Matchmaking
There are three methods: Regular,
Special Honor Guest and Versus. After
generating matches they will be directed
to ‘Arrange Side & Matches’ page where
they can manage the matches and
arrange animal side in every match. There
are 4 categories: Live Matches, Available
Matches, Unmatched, and Excluded.
When matchmaking is done they can
announce the matches.
Select Matching Method Arrange Side & Matches Announce Matches Pop-Up

49
Features
Match On-going
Showing matches, results, event statistics
and participating animals.

Match results is determined by the judge
through judge panel in stadium but the
worker can edit match result when
needed.
List of matches Match results Edit match result

50
Features
Statistics
Showing matches, results, event statistics
and participating animals.

Match results is determined by the judge
through judge panel in stadium but the
worker can edit match result when it’s
needed.
Overall Statistics Team With Most Wins Fastest Match

51
Create
Prototype
After designing all the screens, I created
the prototype to validate the ideas. My
client shared it with the stakeholders for
gaining feedback.

52
Gathering Feedback
Stakeholder Feedback
My client arranged several meetings with baloteo workers and stadium owners
across the country. He shared the prototype to them and the feedback was
positive. They were happy with this solution. There were no significant changes
made from the initial design. At the early 2022, the app was under
development.
However, as of middle of 2022, this project needs to be halted because my
client perceives a lack of commitment from the stakeholders. My client is
exploring alternative opportunities to implement this solution, though not in the
Dominican Republic in the future.

53
Key takeaways
This project represented my first major
involvement as a UI/UX Designer in the
early stages of my career, offering a
multitude of valuable lessons. I’m genuinely
thankful for the opportunity and the trust my
client placed in me.
It’s Better to Listen to Users
Early and Often
If direct access to users is not
possible, relying on the client's
understanding can provide valuable
insights. However, involving actual
users is preferable, as it ensures a
more thorough and accurate grasp of
their problems and needs.
Understand the Capabilities
and Preferences of Users
Recognizing that potential users
might not be familiar with technology,
adapt the design to be simple and
straightforward. In future projects,
prioritize understanding users to
create an app that suits their needs
and abilities.
Collaborate Effectively with
Clients
Active collaboration with clients is
vital throughout the design process.
Regular communication and
feedback loops ensure that the final
product aligns with the project's
goals and meets both client
expectations and user needs.
“I have worked with Daffa on projects ranging from small to more
significant in terms of complexity and time commitment. I can only say that
no matter the task, Daffa took those tasks with keen detail accomplishing
them to my team's satisfaction. Ultimately Daffa’s communication skills
and UI made it an easy choice for us to pick him. It was the best hire
decision we made for our team. Daffa has gone beyond the call of duty
during the different projects he completed for us. You will be surprised in a
good way because there isn't a project that is too small or too big for him.”
R, Co-founder of Gallos Data

Some of My
Other Projects
54
Daffa Alberta Votary - Some of My Other Projects

Dynamic Energy
Map Web App
Design
Dynamic Energy Map is a web
application enabling users to visualize
real-time and forecasted data on
electrical energy supply, storage, and
demand.
As UI/UX designer, I involved in
designing the initial concepts of
functionality and visuals. I also
created interactive prototypes for my
clients to showcase to stakeholders.
55
The design helped my
client to secure funding
from Germany and South
African government agency
to build the pilot scheme.

azam tV app
Design (for
Smart TV)
Azam TV provides affordable, high
quality television entertainment to
families across sub-Saharan Africa. In
this project, I was involved in
designing their smart TV app.
As a UI/UX Designer, I designed the
app's visual and functional aspects,
prioritizing intuitiveness through the
implementation of industry best
practices for smart TV applications
56

Parsley Design
System website
design
Website Design for Parsley Design
System. As a UI designer, I was
responsible to create hi-fi design
based on requirement and create
website assets and styled imageries.
57

Research
Bazaar website
Redesign
Research Bazaar is a market research
marketplace that enables buyers to
quickly find, compare, and start
working with the most suitable
market research companies
companies and freelancers.

As a UI/UX designer, my
responsibilities include improving the
existing design to be more visually
appealing and intuitive that work well
on different devices, organizing all
information effectively in a user-
friendly manner.
58
“Daffa helped us in designing a web and mobile platform meant for market researchers. He
surprised us with his quick grasping skills in understanding, not just the technical aspect of
the UI designs we were after but also thinking through the business problem end to end and
helping us get intuitive designs for our product. Thanks to his patience, we were able to
iterate on our designs with him and thanks to his brilliance, we were able to enrich our
product with an amazing user experience!”
M, Research Bazaar

EmulaiWebsite
Design
Emulai is a blockchain analytics
startup. Emulai provides financial
analysis and an API history of
possessions for every wallet that has
ever existed, along with extra artificial
indicators that track the profitability of
each trade.

As a UI/UX designer for this project,
my responsibilities was to design the
website to encourage users to join a
waitlist for Emulai.
59

I’m Dead App
Redesign
I’m Dead is an app that primarily used
for collecting estate planning
information.

my responsibilities was to redesign
the app based on requirements
provided by my clients.
60

Freelancer’s
IBM Center for
Cloud Training
Landing Page
Redesign
IBM and Freelancer have merged
together to create and support the
ecosystem of cloud developers. This
program aims to help close the skill
and talent gaps hindering cloud
adoption.

my responsibilities was to redesign
landing page.
61

Portfolio_Daffa_Alberta_Votary_UIUX_Designer.pdf

Recommended

Recommended

More Related Content

Similar to Portfolio_Daffa_Alberta_Votary_UIUX_Designer.pdf

Similar to Portfolio_Daffa_Alberta_Votary_UIUX_Designer.pdf (20)

Recently uploaded

Recently uploaded (20)

Portfolio_Daffa_Alberta_Votary_UIUX_Designer.pdf