4. P R O C E S S D E V E L O P M E N T
I humanize and design meaningful product experiences.
My name is Michael Darius and this is my process.
Discover Design Deliver
Analysis Becomes Insight Insights Become Ideas Ideas Become Reality
Through intensive design research
and strategic analysis, I gain insight
into customers, competitors, client brand
and key opportunities.
Discover inspires and guides Design & Deliver.
Here is where I produce a range of design
Approaches and concepts to more fully
address the client’s challenge. The concepts
are reviewed, tested, refined and crafted into
a focused design direction.
In this phase I specify, document and
Deliver project details to the client for
implementation or I get involved directly into
the production process - both guarantee the
accurate translation of ideas into reality.
5. GOOD DESIGN DRIVES SHAREHOLDER VALUE
In 10 years, a $10,000 investment in design-centric companies would
have yielded returns 228% greater than the same investment in the S&P.
• 75% of the GDP is Service Driven
(’T5 Information Zone’, London Heathrow Airport,
Engine 2008)
• Service design can grow margins and
streamline operations in the midst of an
economic downturn
(Orange Mobile, Engine 2000 | Telecommunications)
• Service design can create solutions that
attract millions of new customers in less
than a year
(Bank of America’s ‘keep the change’, IDEO 2006 |
Banking)
• Service design can redefine your
brand’s reputation in a tough global
marketplace
(Tiffany & Co, Moment 2012 | Luxury goods)
• Service design can increase profits by 20%
even when you’ve captured the market.
(Amplifon, Continuum 2010 | retail)
DESIGN INDEX
7. Symphony is a bright, airy,
colorful and precise digital
visual direction.
8. Based on focus and simplicity it’s
aimed at building finely crafted
contemporary interfaces.
9. To achieve this we’re moving
towards simpler and more
direct interface designs.
10. One of the steps to simplicity is
reducing chrome: fewer boxes,
containers, buttons and controls.
11. With less chrome, the content can
become the interface. People can
interact more directly with content.
12.
13. Elements
The palette consists of colors with
AA compliance for text larger than
18pt (and 14pt bold). That means
they pass the WCAG 2.0 contrast
ratio formula of at least 3:1.
Colors
Download the color palette:
https://cisco.box.com/s/d4m97ga74ylyfdozbgpvyrwzseqyojwr
*The brighter grays do not comply to WCAG 2.0 AA.
14. Typography
Do not use Extra Light or Thin
for small text and body copy.
Design for readability. Use Thin
for headings only. To the right,
percentages are shown as an
example of relative font sizes.
Download Cisco Sans:
https://cisco.box.com/s/u9rzk9c5pmzn1hd73srqzu9zcq7am906
Elements
Headline
Subheader
Unread / Read
Body Copy - Lorem ipsum dolor sit amet,
quo in meis legere. An eam eius velit, iuvaret
scribentur omittantur has et. Ut nemore euripidis
duo, no magna epicuri inciderint per.
Vix no singulis vituperatoribus.
Unread / Read
Thin 100%
Light 36%
Regular / Light 30%
Light 28%
Regular / Light 25%
Cisco Sans
15. Iconography
The existing icon library has been
redrawn and updated with a more
precise look and feel. Sharper
corners and thinner lines brings
the icon library up to date.
Icon grids are improved resulting in
bigger, better and more legible
elements within the bounding box.
Download separate icon presentation:
https://cisco.box.com/s/xlu44czpx5d88w09l76p
Download the icons:
https://cisco.box.com/s/zvdjm8i9149jtzjr18je
Elements
16. Illustrations
Illustrations are made directly from
the icons, with a more distinct
visual treatment to make them
usable as bigger layout elements.
Elements
17. Imagery
& Wallpapers
Wallpapers should use high quality
photography that are natural, calm
and neutral, with subjects close to
the abstract. In this way, images
can work as low opacity
backgrounds in different colors.
Elements
20. Motion should be Intentional and always Focus one’s attention while
remaining functional and building upon a person’s anticipation. Hierarchical
timed sequences should be prioritized giving signature precedence.
Symphony motion design should guide and provide orientation.
21. Motion should be Responsive, fast but not jarring, communicating status,
providing feedback with a perceived performance increase. Motion should
be hand-holding and enhance a sense of direct manipulation, helping
people to visualize the results of their actions while making processes feel
faster than they are. As you identify moments where motion can help be
sure to address high-end to low-end performance options for degradation.
22. Motion should be Human, with richness through secondary motion, making
small nuances worth it. Maintain continuity during transformation and
reorganization, telling a complete story from beginning to end using physics:
fluidity, subtlety and elasticity. Natural motion activity should cause an
interface to appear organic and invisible through successive interactions.
23. Motion SHOULDN'T degrade the perception
of performance but buy time when network
performance is slow. It should always engage
without assaulting or creating unnecessary
distraction. Aim for visual simplicity without
being“Simplistic”.
DON’TDO
25. Create bright, airy and crisp layouts.
Airy layouts comes from using whitespace generously. Let
unused screen real estate emphasize the focus and
hierarchy of other elements.
Use bright colors and light grays.
Crisp is not about using the thinnest fonts. Crisp is about
being precise and mindful about every visual detail, pixel
perfection, font rendering and display resolutions.
1/7
update
screen
26. Use typography for readability
and to create structure.
Use typography to let content create a clear visual structure and
hierarchy. This allows for using less boxes and containers.
Use as few typographical variations as possible to achieve visual
contrast. This will result in more sophisticated layouts.
Design for readability: Use bigger font sizes, make text readable
and inviting. Don’t use the thinnest fonts in small sizes.
Actively take advantage of established typographical rules and
knowledge such as grids, line lengths, line heights and kerning.
27. A single focus, one task at a time.
When possible, let the user keep full attention on one task at
the time. Try to not place several windows, boxes and
modals on top of other ongoing tasks.
Try to “wipe the screen clean” for each new task, and let the
current task occupy the entire screen.
Try to only display that which is most essential. When
possible, move secondary stuff one tap or swipe away.
3/7
28. Let the content be the interface.
Use fewer boxes and buttons.
Good typography and precise layouts can turn content into
structure and hierarchy, reducing the need for visual clutter.
Allow direct manipulation. If users can click the content itself
(a string of text, an image, etc.) chances are they do not
need another button.
29. Use more colors. Use color in
typography and backgrounds.
Never let an interface be just white, gray and blue. Use
more colors, in more places. Not just in buttons.
Use color to increase focus. Let color clarify the interactions
and guide the user through the interface.
Assign one color to each modality of the user experience,
and use them consistently across interfaces.
5/7
30.
6/7
Don’t use drop shadows and gradients.
Use transparency to create depth.
Do not use drop shadows and gradients to create an illusion of
space. Imagine the UI design existing on only one plane, and a
wallpaper being the only other “depth” available.
Use very subtle transparency to create visual richness, almost
like a texture. Let photographic content be visible through the
interface layer.
31. Balance round with sharp,
and stick to basic shapes.
The shape language of Symphony is based on basic
shapes. Use circles and rectangles, steer clear of elaborate
shapes.
Balance sharp and round corners, reflecting the Cisco
industrial design, logotype and logo symbol.
Do not overuse the pill-shape.
7/7
32. IDEA OF SPACE
1) Interface layer
2) Color overlay
3) Brand photography
Brand curated photographyBackgrounds
Colors
Circle, Rectangle, PillShape
Sharp, Clear, PreciseIconography
Full bleed, Circular cropImagery
Left aligned, SymmetricalBalance
EXPERIENCE BOARD
POINT OF VIEW
Using colors to
simplify interface
and flows
Less boxes
Structure by white
space and typography
Blue, Green, Orange, Red
A single focus
One task at the time
People and content first
Content before knobs
33. Tasks, content, contacts etc follow
the process throughout.
• Hard endpoints do what the client does, but some
things are better.
• Info from conversations and scheduling are useful on
the shared screen in rooms.
• The user’s own devices are the primary input in
rooms.
• Good adaptive layouts from people and content is
key.
34. Calls and content can be moved
between devices in a direct and
physical way.
• A squared login or pairing is everything that is
needed to setup a new endpoint, or take ownership
of a public desk endpoint (hot desk).
• The personal home screen gives a useful passive
view of the collaboration activities.
• The desktop experience does all basic tasks in one
view.
36. angularalmondround
COMPATIBLE FACE SHAPE:
angularalmondround
COMPATIBLE FACE SHAPE:
angularalmondround
COMPATIBLE FACE SHAPE:
angularalmondround
COMPATIBLE FACE SHAPE:
Optical Retail Research 11.30.07
Ottica | Seattle, Washington
This shop had a fantastic selection of eyewear catering to technology professionals and hip urbanites. Notable brands were LA Eyeworks, Kamuro, Grotesque,
and Dutz (among many others.) The kind staff informed me many professional women have several pairs of reading glass and are frequently changed to suit
the season or fashion style. They noted a shift among their customers to more whimsical, expressive frame designs. Ottica noted they recommend frames to
clients based on the overall shape of their face. The icon set at the bottom of the designs suggests favorable face-frame combinations.
I N D U S T R I A L D E S I G N
81. / I Love Mondays
A virtually blended weekly open innovation
workshop where participants spend two
hours providing fresh perspectives and
uncovering strategic customer insights
around one winning topic.
W O R K S H O P D E S I G N F A C I L I T A T I O N + P U B L I C S P E A K I N G
82. W O R K S H O P D E S I G N F A C I L I T A T I O N + P U B L I C S P E A K I N G