1
transitgoalz2017
Nastassia • Yang • Allen • Davor
EXP 442:
Interface Design
transitgoalz2017
Nastassia • Yang • Allen • Davor
ASSIGNMENT
Create a wearable interface of the Chicago Transit app with a specific focus on bus transit.
TARGET USER
People who are familiar with the CTA bus system. Millennial commuters. They know where
they are going. We want to make the app more convenient and hands-free.
Research Methods
PHASE 1
Competitive Testing • • • • • • • • • • • • • • • • • • • • • • • • • 1
Content Inventory + Audit • • • • • • • • • • • • • • • • • • • • 3
PHASE 2
Questionnaire • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •5
Informal Interview • • • • • • • • • • • • • • • • • • • • • • • • • • •7
PHASE 3
Brainstorm Graphic Organizers • • • • • • • • • • • • • • • •8
Storyboards • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • 9
PHASE 4
Design Workshop • • • • • • • • • • • • • • • • • • • • • • • • • • •11
Rapid Iterative Testing • • • • • • • • • • • • • • • • • • • • • • •12
FINAL PROTOTYPE • • • • • • • • • • • • • • • • • • • • • • • 14
CONCLUSION • • • • • • • • • • • • • • • • • • • • • • • • • • • 20
1
Phase 1 Research Methods
Competitive TestingContent Inventory + Audit
COMPETITIVE TESTING
Team Transitgoalz2017 conducted research through competitive testing in order to evaluate
the usability of our competitors products. Being aware of what is of similar products on
the market is key to building the next best product. It is important to analyze the strengths
of other companies and improve on them even more. Competitive testing also allows us
designers to find out what’s lacking on the market. If there are any loop holes in design
or feature expectations, those can be filled to get shared target audiences to prefer our
product.
For this method we tested the Apple Watch Series 2 and the Fitbit Charge 2, two of the
most popular wearable interface products out on the market at the moment. We focused on
end-user behaviors and reactions reviewed on Amazon.com to determine the usability and
learnability of these products.
APPLE WATCH SERIES 2
Fig. 1 Apple Watch
displaying CityMapper app
Customer reviews of the Apple Watch deem it convenient, easy to use and a nice break
from your IPhone. You can choose which apps from your phone get put on your watch
and you get an abbreviated version of the app. If you want more information, you tap
the screen and it takes you to the full app. The customizable alerts let you decide how
much you want to be distracted by your technology while ensuring that you get the alerts
you think are most important. Reviewers are fond of the new GPS feature on the watch
which will vibrate multiple times before the GPS signals a turn. Overall, it’s looked at
as a well-designed product with high-quality materials and it works seamlessly with the
iPhone. One of the reviews summed it up by saying “Do you need it? Probably not. But it’s a
great little gadget that makes life with an iPhone more convenient”.
There were not too many negative reviews on the Apple Watch besides the price.
We would like feature similar customizable and GPS features on our transit tracking
interface.
2
FITBIT CHARGE 2
Fig. 2 Fitbit Charge 2
wristband
Based on customer reviews, the Fitbit Charge 2 seems to be the top fitness tracker on the
market right now although it is not perfect. If you’ve connected the Fitbit Charge 2 to
your phone, any text messages or call notifications appear on the display of the device
so you don’t have to open your phone to read them. GPS features are also available
when you sync with your smart phone. Some user pull back came in reviews about
device setup. They mentioned that setting up the various features to be displayed is not
intuitive. There also seemed to be overall disappointment in the build quality and that
the device left something to be desired. The band is made of a comfortable silicone and
but display appears to be a “cheap” appearing plastic. While the device won’t impress
on looks, it is noted as low profile and comfortable on the wrist. The screen itself isn’t
the most responsive in user’s opinions, but it works well enough.
Our biggest takeaway from competitive testing of the Fitbit is that although it has a few
extra features, it does it’s job as a standalone fitness tracker very well and that’s why
people like it. We hope to develop a standalone transit tracking device that satisfies ours
customers need to access transit data quickly. We also want to explore better ways to
design a wrist band device.
Phase 1 Research Methods
Competitive TestingContent Inventory + Audit
3
CONTENT INVENTORY + AUDIT
The key reasons for performing a content inventory and audit is when you begin a
website redesign, merging multiple sites or conversely, a site being split up into smaller,
niche sites, or when preparing content for a CMS system. We were redesigning an
application for the CTA transit system and felt this would be a great way to get into the
core of this application and see what the meat and bones are made of.
The audit allowed us to see, in detail, each feature the application has broken down
by each page of the application. We then collided, deleted, and altered their settings
and features based on our liking and identified themes and patterns across the content.
We broke up the information based on information hierarchy, visual/text, and most
abundant features across the applications pages.
This was the first real method we approached ended up helping us greatly by helping
us see what the application truly does. This process also guided us immensely into
designing our final end product by taking apart the Lego pieces, and essentially building
them back together.
Being able to have 5-7 categories of content helped our team decide what we wanted to
keep or toss, decide on the placement of features, and helped on our decision in regards
to keeping this more text or visually based. We were really satisfied with the results this
method helped us reach.
Phase 1 Research Methods
Competitive TestingContent Inventory + Audit
4
Phase 1 Research Methods
Competitive TestingContent Inventory + Audit
HIERARCHY OF FEATURES
Top Level Items
Home Screen
Route Information
Arrival Times (ETA)
Setting Favorites
Proximity (nearby bus routes)
GPS
TEXT MENU
Bus name
Train name
Train stop
Street name
ETA/Clock/Time
INFOGRAPHIC/CHARTS /GPS MAP MENU
Your location maps
Transit location maps
L Train route maps
Bus stop maps
Bus route maps
Train
Magnifying glass (search)
Hamburger menu
NEARBY MENU
Your GPS location
Actual map
Search option (train/bus)
Hamburger menu
FAVORITES MENU
Your favorite Train stops
Your favorite Bus stops
Search button
Hamburger menu
BUS ROUTES MENU
Numerical order of Bus Routes
Northbound/Southbound (direction)
Exact address of bus stop
ETA of upcoming buses
Search bar
Hamburger menu
L TRAINS MENU
Color coded train stops /
train names
First / Last stop infographic
No address of train stop
ETA of upcoming train
Search bar
Hamburger menu
L SYSTEM MAP MENU
Map of Rail ('L') System Map
Search button
Hamburger menu
SETTINGS
Start Screen:
nearby, favorites, bus routes, L trains
Enable audio cues:
spoken audio info about your transit
Notifications:
enable notifications for nearby bus stops
Clear Cache
Send Feedback
Rate this app
Like on Facebook
Share
Beta testing
Credits
After reviewing the content inventory and completing an audit, Team Transitgoalz2017
decided to focus our efforts on developing the features that are boxed in above. We have
a specific target user of CTA bus riders and we only want to cover key features therefore
the L Trains Menu, L System Map Menu, and Settings options are extraneous to this
phase of our project.
5
QUESTIONNAIRE
Team Transitgoalz2017 used a questionnaire as one of the
primary tools to collect survey information. We carefully
constructed 5 questions to ask our audience using Google
Forms. Forms is an excellent resource to produce and distribute
efficient questionnaires, but we were sure to focus on the
clarity of instructions and wording of our questions.
We chose to first have participants identify the wearable
technologies that they would enjoy wearing the most. This
insight is important because our interface will be consumer
oriented. We want to produce a prototype that people actually
want and will wear.
The next set of questions are meant to gauge the two most
important features our app must include. These are the two
areas that must be most accessible and clear in our app. We
will also strive to construct these features better than our
competitors. We agreed unanimously that route information
and arrival times will provide the most value to customers
on our app, but we must let our users decide what’s most
important to them to ensure we focus on the right things.
For the last two questions, we really just wanted to open up
the discussion about the fusion of CTA transit information
into a wearable technology. Would you really use this? Would
it solve your problem or meet your needs? It was important
that we provided a long answer where participants expressed
their questions, comments, and concerns about our idea. This
allowed us to gather information from users that we had not
initially considered.
Fig. 1 Wearable technology and CTA transit questionnaire
form created in Google Forms
Phase 2 Research Methods
Questionnaire • Informal Interview
6
Fig. 2 Wearable technology and CTA transit questionnaire
summary of responses
RESULTS
The results we collected from the questionnaire
gave us evaluative insight on our customers
and validated many of our initial assumptions.
We learned that most people prefer wearable
technology in the form of a watch, but many would
also wear an interface in wristband form, or would
try out the idea of holograms implemented into a
wearable. We also learned that route information,
followed by arrival times, then favorites are the key
features our customers would use. These findings
confirmed what we should focus on forms moving
forward.
We received additional suggestions on what users
would like to see featured in wearable transit
technology. Interesting suggestions include
implementing:
capabilities that sync to bus and train stations;
wrist tap to scanner gives you up to date
information
language settings
settings that are completely customizable to your
routine
We were able to get answers to our main question,
Would you use a wearable technology while you
commute to check on times? Although the majority
answered yes and we felt we had a successful
idea, critical feedback was very valuable to how
we moved forward. We received two comments
expressing that the interface as a transit tracking
device alone was not enough for them desire. They
viewed it as more of a potential add on feature for
existing devices.
Our questionnaire proved to be an integral
component of our research. It provided us with
the information we needed about the thoughts
and behaviors of our potential customers and this
allowed us to propel forward with this project more
aware.
Phase 2 Research Methods
Questionnaire • Informal Interview
7
Phase 2 Research Methods
Questionnaire Informal Interview
INFORMAL INTERVIEW
Team Transitgoalz2017 also explored informal interview methods for Phase 2. Davor
went out into the field to make some observations about CTA rider behavior as they
waited for buses to arrive. After watching people at the bus stop, he noticed that many
people seemed impatient while waiting for the bus. He noticed many people looking
in the direction the bus would come and also noticed people checking bus times using
various methods. He observed that people who seemed to be in their twenties or
younger barely looked at the time listings that were displayed on the bus shelter screens.
Most of them were on their phone and using some type of transit app. Older people
seemed to rely more on the bus shelter displays. They appeared to be more at ease while
waiting.
Davor gained clearer insight on the patterns of waiting bus riders by observing them
from afar, but it was important to gather direct feedback so he informally interviewed
two CTA users.
He approached a bus rider who appeared to be 20-24 and asked him the following
questions:
Do you use a transit app? If so, which one?
Yes; the CTA website.
Why do you use the website over a transit app?
CTA has all of the most accurate times
Do you like the way it looks and operates?
No; don’t like the way it looks and it has a lot of stuff on the website that is unnecessary. I just
want to know when the bus is close.
Davor also interviewed a bus rider who appeared to be 45+. This particular women
was checking the times on the side of the stop but had an iPhone in her hand.
Do you use a transit app? If so, which one?
That’s too much stuff to check when its right here.
What if there are no times on the bus shelter?
I will just wait until the bus comes.
After analyzing these observations and interviews, we were able to reconfigure the best
audience for us to target. Our original audience was broad; all CTA bus riders who are
familiar with the bus systems and know where they are going. We decided to narrow
down our target customers to millennial commuters, like college students, who want a
better interface design and a faster way of getting information on buses. We want to
provide them with a wearable interface that is more convenient than using a transit app
on their smartphones.
8
BRAINSTORM GRAPHIC ORGANIZERS
Team Transitgoalz2017 explored the use of brainstorm graphic organizers in order to
develop the fluency of our thinking and to better sense of the data we collected from the
questionnaire and interview in phase 2. It was important that we were able to generate
as many concepts as possible without judgment or over thinking. Our whole team
created sketches and provide imagery on how our wearable CTA tracking device would
look and operate. We used visualization frameworks such as brainstorming webs and
flow diagrams to help us consolidate and build upon each others ideas. We were able to
establish more solid visual guidelines that informed the look and feel of our prototypes.
Utilizing these frameworks to dive deeper into the information definitely disrupted
and challenged our old patterns of thinking that we were confident about in our initial
phase of loose brainstorming on day one. We took a step back to organize our data,
communicate a clear hierarchy, and establish the flow of our interface. This benefited
us greatly because we managed to both solve initial questions and raise another set of
questions that propelled us into next phase.
Phase 3 Research Methods
Brainstorm Graphic OrganizersStoryboards
9
STORYBOARDS
The initial idea of our group is to design a wearable concept product for Chicago Transit
Authority (CTA). We designed a product not only good-looking but also easy to use at
anytime, especially for the cold winter season in Chicago. User could easily check the
time and current transit information at a glance. We found that about 45% of users said
they would rock a watch like this, and the other half was splited between a wristband
and a hologram projection. Thus, Yang conducted an initial design with all three needs
together through two storyboard modes.
The first storyboard is about projection function come with a regular smart watch.
Users could easily set their favorite route through interface settings. With pushing Enter
button or tap screen, the favortite routes would be displayed on the top, and only one
more tap for detailed information. Once user chose the destinations, the GPS would
track current location and display estimate time. Moreover, this wearable equipment
also come with a mini projector that allows use to project everything on a bigger flat
surface (long pushing Enter button).
Phase 3 Research Methods
Brainstorm Graphic Organizers • Storyboards
Fig. 1 Storyboard 1
10
The second storyboard is about an improved prototype over the first one. It has 360
degree rotating touch screen display but no mini projector equipped.
Phase 3 Research Methods
Brainstorm Graphic Organizers • Storyboards
Fig. 2 Storyboard 2
11
DESIGN WORKSHOP
During our prototype workshop we asked classmates a wide variety of questions
regarding our products design features. We asked them to complete two specific
tasks, thus resulting in justifying our products clarity and design. We gave zero guiding
instructions and found no users came across any issues. We noticed our product wasn’t
‘novel’ enough and we were determined to find out what would we need to incorporate
into our product in order to get their business.
The Design Workshop method is a form of participatory design consolidating creative
co-design methods into organized sessions for several participants to work with design
team members. We got such great results from this test, we as a group, decided to make
the features our classmates mentioned as a part of our final design. Cory mentioned
how “Ventra would sway me to purchase this”. What he meant was, the wearable
technology we built should include a Ventra card swipe feature that can be scanned as a
pay form instead of carrying the tangible Ventra card. We were blown away and quickly
jotted that down. We know carrying tons of stuff in your wallet can be a hassle, but if we
can make a product than can increasingly (with features) make a commuters’ life easier,
then we would do our best to make the best prototype out of it.
The ideas didn’t stop there. DeAnna stressed she would love to see bus route projections
in real time, much like the Uber application and their GPS system. We knew we wanted
to project a holographic image within our application, but this gave us a stepping stone
to build off of. We loved DeAnnas idea and also made it a part of our final prototype.
Cory and DeAnna both agreed they aren’t health conscious, but a Fitbit style calorie/
step counter would be a nice additional feature. We ended up getting a great amount
of feedback and food for thought that we eventually incorporated into our final design.
Several nit-picky feature ideas also came from Cory and DeAnna that we considered.
Overall, this was a great exercise for our project. It was very beneficial.
Phase 4 Research Methods
Design WorkshopRapid Iterative Testing
12
RAPID ITERATIVE TESTING + EVALUATION (RITE)
Based on our storyboards, here are the questions we asked:
Can you find the route/time information for the bus going south on Jackson?
Would you purchase this product as is? If not, which features would you like to see added that
would make you really interested in purchasing?
Ventra capabilities
Fitbit health options
Do you think the projection feature would be useful? How would you like it to work?
Do you find this product more convenient than pulling out your phone?
Since we got two candidate prototypes, we needed to decide which one better for
massive production. Throughout the entire procedure of testing, we have undergone
many changes to consolidate and improve our prototype. If we had more negative
reviews than positive ones, then it could be major problems occurred to our own
design. Thus, we would apply modification to fix up design based on these reviews
and customer needs.
Phase 4 Research Methods
Design WorkshopRapid Iterative Testing
13
Phase 4 Research Methods
Design WorkshopRapid Iterative Testing
The first prototype testing was successful. Testers were interested in our product, and
they said they would purchase it. The first tester was a female, she wanted to have a
digtal displayed interface for reading time. Meanwhile, she was also like the second
prototype which has the mini projector.
The second and the third testers were both males, they got same feeling and
feedbacks just like the first tester. However, they said that they do not want a product
with single function or similar like iWatch because they already got smart watches.
They were interested in the second prototype because they had never tried this before.
Through all three testers, we realized that we needed to do some changes on our
prototypes. Finally, we decided to combine two prototypes together in order to create
a complete concept of a multifunctional prototype. The final prototype came with
mini-projector, and added virtual CTA ventra card. More than these, it also came with
costomizable emoji to display.
14
Final Interface Prototype
The image below illustrate our final prototype interface looks like, this interface is
extremely well-designed, and it dramatically helps testers to figure out what the real
products are going to be. All the testers are interested in this product, and willing to
go for it, and expecting more functions.
Clock display interfaces are configurable.
15
Final Interface Prototype
Users could easily set their favorite route through interface settings. With pushing
Enter button or tap screen, the favortite routes would be displayed on the top, and
only one more tap for detailed information. Once user chose the destinations, the
GPS would track current location and display estimate time.
Virtual CTA Ventra card added, no hassle at anytime.
Users could customize their own emoji, words, symbols on the rotating screen.
This product could easily become a personalized cool gear.
16
17
18
19
20
Conclusion
Our biggest takeaway was the importance of reiterating ideas and prototypes and
gaining feedback each step of the way. Our initial assumptions were very similar to
what we developed through sketching and prototyping but the feedback made the
development experience so much more real.
We believe our interface design was overall successful because we learned how the
device could improve after implementing design research methods and user testing.
However, if we were to continue with the design and development of our wearable
interface we would pivot from it’s singular function as a CTA transit tracking device and
add on Ventra transit card cabilities as was suggested in our feedback.
transitgoalz2017
Nastassia • Yang • Allen • Davor