Responsive Web Design

1. Project 4:
Waste Management
Michael Coblenz, Alia Friedman, Vasant Menon
Interaction Design Studio 1 - December 9th 2018

2. Table of Contents
Ideation & Research 3
User Stories & Personas 8
Screen Maps & Wireframes 16
Iterations 18
Final Design 25
Presentation & Takeaways 26
2

3. Conception
To start we brainstormed a list of possible domains and their respective clients
in the waste management field in which to design our responsive website.
We went as broad as possible. We were in the discovery process of our design.
Compost
E-waste
Furniture waste
Curbside pickup
Chemical Waste
Biomedical waste
Recycling
Contamination
E-waste
Public event management
Campus bins
Batteries
3

4. Guerrilla Research
We conducted guerrilla research on several different possible applications, including wastewater
management, landfill conversion for land re-use, E-waste, and food waste. The pages above give
examples of our research.
Our guerrilla research was a blend of the information we gathered by calling some local distributors in
those fields and asking about how their business worked and the information we gathered available on
the internet.
The process was quick and dirty, but informative.
4

5. Electronic Waste
We selected electronic waste
disposal as the focus for our work.
Electronic waste is a common,
practical problem, with
stakeholders in both businesses
as well as everyday consumers.
We decided our electronic waste
management company would be
based out of Pittsburgh.
5

6. More Guerrilla Research
We traveled to Evolution
E-Cycling to learn about
the recycling process and
the needs of the
stakeholders.
Evolution E-cycling is a local electronic
waste company and graciously offered a tour
and interview to provide practical insight into
the problems of the domain.
6

7. Lessons from Interview
Data security is a key requirement of businesses that need E-waste disposal services.
Regulations play a big role in the electronic waste management business in the state of Pennsylvania.
Companies are required to prove they are recycling their E-waste and can be frequently audited.
90% of customers for most electronic waste companies are corporate.
Most electronic waste management companies are small with 10-12 employees. Good communication is critical for efficiency.
Some businesses send representatives to watch the destruction process to ensure data security. Watching destruction is time-
intensive and boring.
The business owner deals with routine details of client interactions, which are repetitive and take time that could be better spent
managing the business.
We now completed the define stage in the
design process. The information that we had
gathered had given us a better idea what our
website should address and where the
problems lay in the current system.
7

8. Customer Journey Maps
Through our guerrilla research we were able
sketch out customer journey maps on the
corporate, individual and business owner/service
provider end.
Sketching out the customer journey maps
allowed us to better understand the pain points in
the process and to imagine features we could
redesign/add to better service our clients.
8

9. Personas
We designed four personas to describe relevant stakeholders. The
personas helped us focus our work on a design that would benefit key
users of the system.
All of the personas were amalgams of real people who we discovered
were involved in the process during our guerrilla research phase.
9

10. George Harrison
George is head of IT at Acme Medical Records
Corporation, a mid-size company. George is
responsible for making sure Acme is compliant with
the government regulations regarding protection of
sensitive data. If any of the computers went missing
or the data leaked, he would find his job in
jeopardy.
Values
His values include a right to privacy, thrift, and
family.
Interest
George is interested in minimizing cost of disposal,
including time required by staff to coordinate and
supervise disposal.
10

11. Susan Dawkins
Susan is a manager at Big Swan, a local grocery
store. She has a small apartment, which is cluttered
with old equipment, including a broken answering
machine and a cell phone. She is looking for a
convenient way to recycle her unused devices to
clean up her apartment.
Values
She values convenience because she needs to work
long hours at Big Swan in order to make rent.
Interest
She enjoys connecting with others, such as her
grandson and fellow employees at Big Swan.
11

12. Seyit Hupkens
Seyit is founder of an E-waste company in Pennsylvania. He
founded Betatech after noticing a PA law change that now requires
businesses to properly dispose of their old electronics. Seyit
manages a staff of 10 people. He spends most of his time handling
requests from customers and managing the company’s finances.
Values
Seyit values keeping his employees happy and keeping the
business running in the long term so that he can support his family.
He enjoys feeling like he’s working hard.
Interest
Seyit wishes he could spend less time communicating with
individual business customers, who need frequent updates
regarding the status of waste that may contain sensitive data.
12

13. Karana Rulek
Karana Rulek manages the warehouse, supervising
the 8 people who do the day-to-day work in the plant. She
is interested in keeping her workers focused on the most
important jobs and making them more efficient at their
work. She’s particularly concerned with the record-keeping
burden of the job.
Values
She values autonomy and self-reliance.
Interest
Karana realizes she won’t be able to take over the
company when Seyit moves on because it’s a family
business. Therefore she values learning about running a
business so that she can start her own company someday.
13

14. Storyboards
We used storyboards to explore how our responsive website could be
beneficial to different types of users and to better empathize with some of
the issues they might face.
Creating the storyboards helped us imagine some of the very
important features our users might want and to illustrate how some of
these features might have very tangible benefits for them.
Business Owner Individual Customer Service Provider
Corporate Customer
14

15. Speed Dating
After we created our storyboards we
used them to "speed-date" by
showing them to different people and
asking them what they thought about
our storyboards and whether they
thought our designs were addressing
our persona's problems.
We received a lot of feedback about
people's personal attachment to their
phones, the role environmentalism
plays in how they recycle and whether
some of the features we were offering
were too generous and could
incentive misuse.
• "How do I set-up an appointment?" - Interviewee
• "It shows the positive side of technology!" - Interviewee
• "Poor George." - Interviewee
• "Why is this monitor floating?" - Interviewee
Quotes
15

16. Screen Maps
Once we understood who our users were, we sketched out the different paths they would use when navigating our website
and examined how we could streamline their interactions.
We divided the white board between the business side which we defined as encompassing the service provider and the
business owner.
The other half of the board represented the customer side which was split between corporate and individual customers
because these two groups of users represented two very different use cases.
Business Side Individuals Individuals
16

17. Wireframes
We first began creating our wireframes by all
meeting together and then deciding what screens
we wanted to wireframe.
We chose specific screens to wireframe based
upon what we thought would showcase the most
value gain for our stakeholders.
It was important that we generated our ideas in
parallel so that we would not prematurely commit
to one design.
We set a timer for 10 minutes and came up with
as many ideas as we could and then regrouped.
Using the best parts of everyone's designs we
sketched out our final wireframes (shown on left).
17

18. Welcome Page - Desktop
We started making low fidelity digital prototypes of some of
our wireframes in grayscale and then transitioned to color.
Our user research found companies
placed a high value on electronic waste
companies having proper certification
which is why we displayed BetaTech
certification prominently.
Companies value data security
which is why we thought it was
important to emphasize that in
BetaTech's slogan.
We realized that users accessing the
welcome screen in the desktop versions were
most likely corporate customers. We therefore
prioritized the request pick-up button in the top
left.
18

19. Welcome Page - Mobile
We realized that users accessing the welcome screen
in the mobile versions were most likely individual
customers looking to find the nearest drop-off location.
We therefore prioritized the drop-off location by placing it
as the top target.
Some of the biggest differences between the desktop
and the mobile was the arrangement of the buttons. We
also increased the target size of the buttons and cropped
the image.
The mobile site was assumed to be the primary portal in
which employees of BetaTech would login. The login
button was placed below request pick-up in order to
conserve space at the top.
19

20. Servicing the Service Provider
The buttons were placed on the left so that they would
not accidentally be pressed. Perceptual affordance was
also taken into account when deciding the type of button
and target size.
The importance of communication between business
owner, service provider and employees was something that
was touched upon in user research.
We wanted to design a system which allowed for better
communication about workflow and placement of inventory.
Employees in the warehouse are frequently on the go and
therefore need to access that information via their mobile
phones.
20

21. Order Up
Companies are audited frequently. We therefore wanted to design a system which would allow for
meticulous record-keeping on behalf of BetaTech and allow companies transparency into the process of
data destruction. Our dashboard allowed companies to track their order.
We created a personalized account for each corporate customer which allowed them to access the
inventory of previous orders as well as certificates of destruction and videos of the process.
21

22. Business Owner
We wanted to design a dashboard which would allow the business owner to be able to
quickly and efficiently communicate with his/her clients, issue certificates, manage orders
and be able to quickly understand cost of space and expected revenue.
There was significant discussion about how to
show what was a button and could be interacted
with and how to use the menu for navigation.
By placing the menu on top and making it look like
tabs and using a dark blue background to
emphasize the buttons the design communicated
to the user the answer.
22

23. Attending to George
Through our user research we found that in a lot of cases company reps
must be personally present to witness the destruction of their companies
electronics. The whole witnessing process can be long and painful.
We therefore wanted to design a feature which
would allow the IT people to livestream the
destruction of the hardware as well as providing
video copies of the destruction.
The idea behind the livestream was that before an item
was destroyed it would be scanned. The computer would
then timestamp the video at that point to indicate the
destruction of that serial number.
However, we had significant difficulty using design to
communicate that idea and went through multiple
iterations in order to try and better communicate that idea.
23

24. Logo and Pick-Up
Although majority of users are corporate and
need to be in continuous contact with BetaTech,
individual users do not have a continuing
relationship with BetaTech.
They need to get information about nearest drop-
off locations quickly and efficiently.
Often they will need to access that information on
their mobile but occasionally they will use a
desktop.
We designed our drop-off pages to be clutter free
and to only give relevant information.
We wanted to design the logo of our
company to have a recycling icon in it.
User feedback however did not interpret
the logo as an "a" as intended.
More iterations would have been
beneficial.
24

25. Final Designs
25

26. Presentation and Take-Aways
We wanted to communicate narrative
during our presentation. Our journey into
the field of E-waste management showed
us it was all about interconnecting
relationships between the business owner,
service provider, corporate and individual
customers.
We tried to base our presentation
around presenting how our four personas
all tied together and how our responsive
website satisfied a critical need for each.
Ultimately we all learned a lot during the process of creating a responsive
website. Coming into the process we were all fairly weak in visual design but
working together gave us a chance to grow. We tried to use our talents in
narrative and systems thinking in the ways that best suited us.
We especially learnt the importance of thinking ahead when it comes to
having the technology already set up and running when presenting.
More time to iterate on our visual language would have been key to
perhaps having stronger design communication, but we hoped that by having
a disciplined interface in typography, color and layout we were able to
overcome some of that short-falling.
26