Project Case Study

1. Bill on the Hill App and
Responsive Website
Kagiso Khaole

2. The product:
Bill on the Hill is an app and responsive
website designed on Adobe XD which is a tool
to help young adults learn about proposed
bills that affect their community.
Project overview
Project duration:
7 Day Sprint in July 2021

3. The problem:
As members of their local community, young
people are the least aware of new proposed
bills how they will affect them. They are also
the group least likely to pursue information
about these bills.
Project overview
The goal:
Make it simple for young people of the
community to learn about proposed bills and
how they will affect their community.

4. My role:
Lead UX Designer and UX Researcher
throughout the duration of the project.
Project overview
Responsibilities:
• UX Researcher : develop qualitative and
quantitative research models; analysizing
data; emphathizing with users; defining
problems
• UX Designer : Understanding user needs;
ideation to solve user problems; design
prototyping; Testing

5. Understanding
the user
● User research
● Personas
● Problem statements
● Competitive audit
● Ideation

6. User research: summary
In order design for the needs of the end user, I conducted interviews and generate empathy maps
in order to better understand the users. Through the research I identified a primary user group of
young people who just want summaries of proposed bills.
This user group was a close match to my assumptions of what Bill on the Hill users would be. The
research showed that, apart from time, prospective users were predominantly mobile users.

7. Persona 1: Cass
Problem statement:
Cass is design intern
who needs a quick
way to be informed
about new proposed
bills because she
wants to be a more
responsible member
of society.
Cass
Age:
Education:
Hometown:
Family:
Occupation:
24
University
Rosebank
Orphan
Design Intern
“Life is a journey. We learn and
reinvent ourselves daily.”
Goals
● Expand their
knowledge
● Get involved in
local matters
● Stay productive at
all times
Frustrations
● ”I don’t know if
there’s any hope
without a degree”
● “My dream is to
attend college”
Cass is a design intern living alone in a small town which
has a history of corrupt politicians. She knows she needs to
be more concerned about new bills and the impact they
have on their community. She spends most of her time
surfing the internet and social media on her mobile phone.

8. Persona 2: Dru
Problem statement:
Dru is a novice in art
who needs mobile
friendly free tutorials
because he can only
find time to learn
during his commute
to work.
Dru
Age:
Education:
Hometown:
Family:
Occupation:
25
College Degree
Eldorado Park
Single
Botanist
“We, the youth of this country, must
take social and political issues
seriously.”
Goals
● Aspiring activist
● Maximise every
dollar spent
● Stay on-the-go
Frustrations
● ”Free resources are
lifesavers but they
usually suck..”
● “This isn’t mobile
friendly…”
Dru is trying to switch careers after spending 4 years
studying botany and 2 years an intern, he now realizes that
his passion is civil activism. He’s trying his best to make
due with information on official websites on his phone
during his one hour commute to work but the amount of
reading required is too much for this medium.

9. Competitive audit
I researched both official and un-
official sources of information on
proposed bills.
Tone is an opportunity to
differentiate, as the competition
does not speak to young people.

10. Ideation
With young people in mind, I followed up my Crazy Eights and
How Might We exercises with various ideas on the interface.
The thinking varied from a Google search and Instagram UX
styles, to even a verision I called “the Tinder of Proposed Bills"

11. ● Digital wireframes
● Low-fidelity prototype
● Usability studies
Starting
the design

12. Digital wireframes
Digital wireframes
The app was designed to
minimize distracting
elements and focus on a
single task.
Bill review screen keeps
attention on the summary
and directs the user to take
action by voting.
Hierarchy is
used to draw
the users focus
onto the bill
content
Leveraging
consistency
and proximity
for voting
buttons

13. Low-fidelity prototype
Lo-Fi Protype on Adobe XD focused on driving a
sequential user flow with one main task per window

14. Usability study: parameters
Study type:
Unmoderated usability study
Location:
South Africa, remote
Participants:
5 participants
Length:
4.5 minutes

15. Usability study: findings
Whilst all the user were able to start and complete the flow, there were
opportunities to enhance the over user experience
Users wanted to feel like
they have completed an
action, and get send back
to start it all over again.
Completion Simplicity Search
Fewer UX elements would
add value to the design.
Focus is critical.
Complex search helps
only if you know what you
are looking for. Discovery
is also as powerful tool.
1 2 3

16. ● Mockups
● High-fidelity prototype
● Accessibility
Refining
the design

17. Mockups
The visual design of the app
honed in on the voice and
spirit of young people.
The single button start
worked really well, standing
out on an otherwise
purposely muted yet
captivating home screen
Before usability study After usability study

18. Mockups
Leaning into one of my
earlier sketches, “the Tinder
of Proposed Bills”, I reduced
the number of inputs on the
Bill summary screen to two
options, Reject or Support.
The Undecided option didn’t
seem useful on further
inspection. Simplify.
Before usability study After usability study

19. Mockups

20. High-fidelity prototype
Hi-Fi Prototype on Adobe XD introduced consistent colour
scheme and some variety with animations between transitions.

21. Accessibility considerations
With this being a mobile-
first design, one-handed
control was a key
accessibility
consideration.
Also useful for other
users, eg. Standing in a
subway train,
Used the accent blue
sparingly to maximize
contrast and visibility.
Use of negative space
increased through each
iteration without
sacrificing useability.
Used meaningful links
and minimization of
inputs required to aid
users with motor
impairments, screen
readers to avoid
unnecessary keystrokes
and input error.
1 2 3

22. ● Information architecture
● Responsive design
Responsive Design

23. Sitemap
The sitemap was iterated
on to reduce the screens to
the minimum required to
deliver a comprehensive yet
concise experience on
larger screens as well as
mobile.

24. Responsive designs
Took a mobile-first approach and
followed a progressive enhancement
approach to create the desktop version

25. ● Takeaways
● Next steps
Going forward

26. Takeaways
Impact:
I believe that this case study demonstrates
how good design can make even complex
issues more open and accessible…
”Wow, ok. This is nice!”
What I learned:
The design process follows a sequence for a
reason. Each step builds on itself, bringing you
closer to the user and broadening your view of
what possible solutions should be…

27. Next steps
• Ensure full user
experience
• Replace placeholder
text with final copy
Check all elements
interact in a common
way on iOS and
Android
• Review accessibility
• Review low scoring
observation from user
feedback
• Develop some of the
low priority insights
• Document designs and
elements
• Share links to Adobe
XD with engineering
team
1 2 3

28. Let’s connect!
The best way to find me...
Connect with me on LinkedIn
(https://www.linkedin.com/in/kagiso-khaole/)