1. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
1 | P a g e
User-Centered Design
An Interactive Design for
the Boys & Girls Club of Bloomington
Hyon Kim, Michael Levin, Donald Lewis

2. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
2 | P a g e
Overview
In this project our team met with the Boys & Girls Club of Bloomington in order to discuss
any potential issues they had with one of their processes, and whether they could benefit
from a user-centered design. After meeting with the organization, we determined that
they would benefit from an event planning and file storage system. We developed a paper
prototype of the program and, after testing, iterations of the prototype.
Our goal for this project was to look for nonprofit organizations around the Bloomington,
IN area. From this resulted the wonderful organization, the Boys & Girls Club. This is a
fantastic organization that has helped change the lives of thousands of young children and
teenagers around the nation. When we came into contact with the Boys & Girls Club, they
discussed with us the issues that they have been having within their organization. After
hearing what difficulties they have been having, we were able to narrow in on one specific
problem. Once we defined the problem, as a team, we began to brainstorm the solution
and created scenarios of how to resolve it. After completing the ideation stage we were
able to move forward to the next step of the process which was prototyping. From
prototyping, we were able to create a solution for the problem that the organization gave
us. After creating our prototype we began usability testing. This would allow us to receive
feedback on our solution and in result give us the opportunity to make necessary changes.
We then proceeded on to have a finished prototype that would be the intended solution
for the issue of the Boys & Girls Club.

3. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
3 | P a g e
Problem Identification
The Organization
For our user interface design, we chose to work with the Boys & Girls Club in Bloomington
Indiana. The Boys & Girls Club is an excellent choice because of their extraordinary work
that they have accomplished as a nonprofit organization.
The Contact
Within the organization we have made contact with Jeff
Baldwin. Mr. Baldwin is the Executive Director of the local
Boys and Girls Club here in Bloomington, Indiana. His
experience and knowledge is unparalleled to others within
Boys & Girls Club due to his 8 years of volunteer work with
the organization. During the interview that we had with Mr.
Baldwin, he brought to our attention that Boys & Girls Club
has had some difficulties with organization and storage of
files.
The Problem
The paper files of patrons and events were simply stored in boxes in a storage space. From
this, in cooperation with Boys & Girls Club, we decided to create a better organized digital
storage system design. The organization as a whole would benefit from our design due to
a more efficient and organized task development system. In result from this; volunteers,
donors, and the youth in the local community, would have a better experience with Boys &
Girls Club overall.

4. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
4 | P a g e
Project Research
Process
d.Mindsets
Show Don’t Tell
Volunteers would be able to spend more time focused on the children in the Boys & Girls
Club then on organization, event planning, and storage space.
Focus on Human Values
We know and understand that the volunteers at Boys & Girls Club are extremely busy with
daily tasks and helping the lives of many children. Our design would help save time and
cut down on the work the volunteers are given.
Craft Clarity
Our goal is to create a program that enables better organization of Boys & Girls Club
events and also allows for storage space to be saved.
Embrace Experimentation
Ultimately we want to build a program that will be accessible through Boys & Girls Club
computers in which allow them to store digital copies about events (past, present, and
future). These digital records would consist of paperwork, photos, personal information,
and locations to name a few. This would help save storage space but more importantly,
the Boys & Girls Club’s organization would be enhanced and event information would be
at volunteer’s fingertips.
Be Mindful of Processes
Currently we are in the beginning stages of the process and our brainstorming ideas and
discussing potential designs.
Bias Toward Action
Along with discussing how to solve the problem we are also discussing ways in which we
can disable the problem from occurring again. This, in the end, will allow us to create a
very effective result.
Radical Collaboration
During the process of planning and creating our design we will consult with others to help
give the best overall answers. These others will be of high educational background and
understand the purpose of our mission as well as understanding the benefits that it will
produced.

5. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
5 | P a g e
Modes
Empathize
When visiting the Boys & Girls Club, the
executive director informed us that their
biggest problem was organization. Upon
discussing the issue of organization, he
brought to our attention that majority of
the unorganized work were files on events for the children.
Define
We stated that the Boys & Girls Club’s
biggest problem was their disorganization
of paper files. From this, it was clear that we
would work to develop a way for the
volunteers to save time and become more
organized with their events by digitizing their files and paperwork for events.
Ideate
We came up with the idea of creating a
program that would enable the Boys & Girls
Club volunteers to neatly organize their
events for the children. The program will
allow data such as time, location, date,
names, and reason, to be stored safely on digital records. This would let volunteers save
time on planning and record storing along with minimizing storage space.
Prototype
We will build a prototype that will best
resemble our design in the most effective
way. It will be a program that will be
accessible through Boys & Girls Club’s
computers in which will have stored data
about events. Icons and tabs will help volunteers easily navigate through the program as
well as find the information they are looking for.

6. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
6 | P a g e
Test
During this mode we will test our design. This
will allow us to receive feedback on what we
have created. From the feedback will be able
to see in flaws in our design or things that
could be improved upon. This will allow us to
create the most effective design possible and enable the Boys & Girls Club to be more
organized.
Example of an upcoming event of the B&G club
Methods
Interview Preparation
We had a limited amount of time to meet with the Boys & Girls Club, and so in order to
get the most out of the interview, we first prepared ourselves and the topics that we
wanted to discuss with the director, Jeff.
Following the advice from the dSchool’s Bootcamp Bootleg document, we wanted to allow
our conversation to flow freely so the director would feel comfortable about discussing his
opinions without worrying about any expectations we had for him. However, we also
wanted to be prepared with questions to get the conversation flowing.
To do this, we brainstormed some general questions regarding the club’s current systems
and processes that could lead to the discussion of possible issues and solutions. We
planned to build on the answers to these questions and go into more detail as the
conversation developed.
We also read the Bootcamp Bootleg document thoroughly for tips on how to interview for
user centered designs, and to prepare ourselves on what to listen and look for during the
interview.

7. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
7 | P a g e
Assuming a Beginner’s Mindset
In order to not have any preconceptions or misconceptions of the club and their needs, we
approached the interview with a beginner’s mindset. Though we did know a little about
the club and their activities, we allowed the director and the volunteers to fully explain to
us about the organization and their processes.
During the session we observed the actions and behaviors of the director, as well as the
volunteers and students who were present at the time. We accepted all of the information
they offered without judgement, though we did think critically about what we were hearing
and seeing. We tried as much as possible to not try to lead the conversation, but to follow
along and listen and watch everything going on around us carefully.
Interview with Empathy
Since we only had a short amount of time with for the interview, we wanted to learn as
much as we could about the club and its natural environment while we were there.
With every question we tried to go as far the conversation could take us in order to have
as good of an understanding as we could about their thoughts. We asked some “obvious”
questions, just in case there was any information or gap in thought that we were missing.
We tried to have questions that would lead to stories about specific instances of issues,
especially since the director believed that generally, their systems and processes worked
well for them. However, despite his insistence that they did not have any issues, we noticed
some inconsistencies between his words and what we saw at the organization, which had
some things that could have been improved upon. However, we did not mention these
things during the interview, and tried not to suggest answers to our own questions, so as
not to lead him into saying things just to meet our expectations.

8. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
8 | P a g e
Findings
From our research, we configured four profiles with characteristics of people that would be
associated with the Boys & Girls club. These characters would benefit from our design, as it
would enable them to receive the most out of the events hosted by the Boys & Girls Club.
The characteristics that make up these profiles consist of Education, Experience, Favorite
Quotes, and Hobbies. Within our profiles, Sandy would be the most common user of our
design for that she is a volunteer. Susan is an event coordinator, Kayle is a donor, and Sid
is a student who participates in the Boys & Girls Club. These characters are who our design
will influence and benefit the most. Sandy will have the ease of scheduling, filing, and
recording events. Susan, as event coordinator, will have the organization of events at her
fingertips. Kayle’s donations will be organized and easily recorded for events. Last but
certainly not least, Sid will be a part of an organization that will be organize and help
change his life for the better.
Susan Price
Event Coordinator
Education: Bachelor’s in Marketing/Advertising
Experience: Worked as Advertising Director for the Indiana Daily
Student for 13 years. She joined the Boys & Girls Club in March of
2014.
Favorite Quote: “Two paths in a woods diverged. I took the one
less traveled, and that has made all the difference.” – Robert Frost
Hobbies: Susan is very active with the Exchange Club of Northside Bloomington, and
enjoys scuba diving and reading.

9. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
9 | P a g e
Kayle Johnson
Donor and Parent
Education: Bachelor’s in Education
Experience: Has worked for the past 7 years in a variety of nonprofit
settings in the Indianapolis and Bloomington communities.
Favorite Quote: “You should never be proud of doing the right
thing. You should just do the right thing.” – Dean Smith
Hobbies: In her free time, Kayle likes to spend time and cuddle with her two dogs.
Sandy Peterson
Volunteer Intern
Education: School of Public and Environmental Affairs student at
Indiana University
Experience: 6 months of interning at the Boys & Girls Club
Favorite Quote: “We make a living by what we get, but we make a
life by what we give.” – Winston Churchill
Hobbies: Soccer, cooking, and reading novels.
Sid Wilson
Student
Education: 9th Grade South Bloomington High School
Experience: Been with the Boys & Girls Club for 3 years.
Favorite Quote: ……
Hobbies: Playing billiards and video games.

10. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
10 | P a g e
Design Brief
This design brief is an attempt to lay out the explicit parameters for our creation of a more
efficient system of storing past and future event data for the Boys & Girls Club.
Below are the following parameters we will put in place in our program design:
Purpose
The purpose of this design will achieve a more organized space for The Boys & Girls Club
to store event information. Keeping relevant information on file, in one specific program,
will allow Boys & Girls Club to recall specific information including the date of the event,
sponsors, partners, venues, guests, selected speakers, etc. Boys & Girls Club will be able to
customize all of their tabs for their ultimate convenience. We will make the program as
easy to use as possible in order for the highest efficiency to take place.
Location
This program will be located on the central computers at the Boys & Girls Club.
Authorized Users
The event organizer should be able to access this program anytime to keep organized and
use information from past events, but all employees should be able to look at the data. It
will be up to the organization to put restrictions on whom may use the program.
Security of Data
Only Boys & Girls Club employees should be able to have access to this program.
Although the data is not valuable in others hands, it is still important to keep an
organization's records within its employees.
Time to Access Resources
We are creating an easy to use system that stores event information. The time to look up
or enter in information should take as little time as possible and be very easy.

11. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
11 | P a g e
Prototype Design and Testing
Prototyping for Empathy
To begin our initial process of prototyping it was important that we received all the
information necessary to do so. This started with the user giving ideal information about
what it was that they (the Boys and Girls Club) needed or needed to improve upon within
the organization. This enabled us to brainstorm the idea of creating a program that would
better organize the Boys and Girls Club’s events.
Our creativity for this design came from truly understanding the needs of the Boys and
Girls Club and the effects it would have on the purpose of the organization, the kids. With
that in mind, we were able to create a prototype that seemed realistic and task oriented.
From there, we went on to develop a prototype design of our organization program. This
consisted of paper prototyping in which we create papered screenshots of what it was that
we were trying to create. This gave a visual effect of what the overall program design
would come to look like.
Testing With Users
After our paper prototype was created it was important to test it so that we could receive
feedback on our design. The perfect contender for this was a volunteer who helps out at
the Boys and Girls Club. She has been an intern at BGC for 6 months now and deals with
and handles the events.
We started off by laying the paper prototype in front of her. Then after, we gave her the
task of inputting an event into the system by touching the necessary tabs that are written
on the paper themselves. She used her finger to point to the tab, this acted as the cursor
that would be displayed on the computer screen. After pointing to a tab we would place
the “click!” cut out on the tab she chose and then lay the next piece of paper over it. This
portrayed the screen changing to the inputted tab clicked on. The process continued until
the event was inputted and scheduled to be on the intended date that was desired.
Our goal for this was to receive feedback on the ease of usability that the user
experienced. Complications that the user had would give us data on where to improve
upon. Options that were available that she liked and thought were useful were kept. All
movements that the user conducted were noted and recorded. This allowed us to have
concrete facts for later implications that could be necessary.

12. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
12 | P a g e
Prototype to Test
We created a paper prototype to capture
the idea of using a new software for
storing event data. The paper prototype is
important because it is an easy way to
iterate a design to create the best possible
model for the software. We created our
paper prototype with many different
scraps of paper layered over each other.
We used black and red sharpie for for
different representations. The red sharpie
represent when the user is typing or
figuring out what they want to enter into the empty space.
User-Driven Prototype
We had our user go through our paper
prototype as if it were a real online
experience. They “clicked” on the buttons
they wanted to click and “typed” in the
information they wanted to include.
We took pictures of their decisions and
turned their process into a minute video.
Our prototype started out not working
very well with a user. When explained, it
could be understood, so we had to iterate
and came out with our final prototype.
We wanted to make as many details as possible for our usability testing in order to get the
highest quality feedback from our users. This is important because it will make the process
of making the software a lot easier when the design is already in place, tested and
successful.
Our user liked our idea of a clean, easy to view design. Although tough to depict through
a paper prototype, we had to explain some of the features of our features like being able
to stack the event data in a specific order and be able to view information to compare it
with other data that has been saved.

13. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
13 | P a g e
From our first prototype, we included a way for the user to see these actions with the
prototype by using cut out square of each category the user added and were able to move
around the squares depending on the user’s preference. This provided our user with a
more realistic prototype.
As for the design, our user liked the design overall but gave us some suggestions that we
added including a button that brings you back to where all the events are. To the right you
can see a photo of the original “add category” feature that we put. We have redesigned
and developed a more successful iteration of that feature that you could find in the video.
Creating a fluid and easy to use prototype was most important to our client. We focused
on a minimum amount of features to create the most efficient program possible.
Link to video: https://www.youtube.com/watch?v=5D_WIoMFHhU&feature=youtu.be

14. Kim, Levin, Lewis I300 HCI Spring 15 User-Centered Design
14 | P a g e
Conclusion
We interviewed an employee of Boys & Girls Club in Bloomington to figure out if there
were any current processes that they needed to improve. They came up with the need to
improve their data for events. They currently have all of their data scattered in files and
wanted us to create an efficient program that could replace it. Our final iteration focuses
on the ease of storing, finding, and sorting through event data. With our program it is a
great way for employees and volunteers go through their past even data as well as create
and manage events that they are preparing for. This software would be important to Boys
& Girls Club because their events directly affect the amount of change that they could
make happen in our community. With more organized events with bigger and more
sponsors, Boys & Girls Club will continue to strive while adjusting to tech-friendly
environment we live in.
References
Boys & Girls Club. (2015, January 1). Who We Are. Retrieved April 16, 2015, from
http://bgcbloomington.com/about-us/
Institute of Design at Stanford, & d.school. (n.d.). An Introduction to Design Thinking
Process Guide.
Institute of Design at Stanford, & d.school (n.d.). Bootcamp Bootleg.