Case Study: Starting a Design System with MOVUMar High
Using Sketch, Abstract version control, Anima toolkit (flexbox), and InVision. This talk was held at the SHARE NOW offices in Hamburg, as part of the Moinworld design meetup.
This is the presentation deck from UX Conference session by Efrim Bartosik as a part of UXSEA Summit 2019 in Singapore. UXSEA Summit 2019 was held from 18th to 20th November, 2019. For more information about UXSEA Society, visit https://uxsea.org/
The copyright of this material is with those who created this presentation material. Please take permissions from the authors if you are in doubt about copyright infringement.
Lecture 2 from the MHIT 603 course on Human Interface Technology. This lecture provides an introduction to Prototyping. Taught by Mark Billinghurst at the University of Canterbury, July 17th, 2014.
Case Study: Starting a Design System with MOVUMar High
Using Sketch, Abstract version control, Anima toolkit (flexbox), and InVision. This talk was held at the SHARE NOW offices in Hamburg, as part of the Moinworld design meetup.
This is the presentation deck from UX Conference session by Efrim Bartosik as a part of UXSEA Summit 2019 in Singapore. UXSEA Summit 2019 was held from 18th to 20th November, 2019. For more information about UXSEA Society, visit https://uxsea.org/
The copyright of this material is with those who created this presentation material. Please take permissions from the authors if you are in doubt about copyright infringement.
Lecture 2 from the MHIT 603 course on Human Interface Technology. This lecture provides an introduction to Prototyping. Taught by Mark Billinghurst at the University of Canterbury, July 17th, 2014.
Software Development Prioritization Techniques PowerPoint Presentation SlidesSlideTeam
Represent dissection of large projects into viable tasks using Software Development Prioritization Techniques PowerPoint Presentation Slides. Employ this PowerPoint slideshow to showcase your agile software development approach. Demonstrate the key details and team arrangement for an agile project with the help of state-of-the-art data visuals. Convey the phases, and objectives of your organization’s agile project delivery. Elucidate methodologies for agile application development such as lean, scrum-fall, and waterfall techniques. The diagrams featured in this PPT theme facilitate an easy explanation of the agile automation process, and agile architecture. Communicate the project prioritization techniques such as the relative weighting method, Kano model, and Moscow. With the help of this prioritization techniques in software testing PowerPoint templates deck. Cost is another variable that plays a vital role when it comes to managing projects. Portray the costs involved in the agile software project with the aid of a tabular format. Hit the download button and start personalizing right away. Our Software Development Prioritization Techniques PowerPoint Presentation Slides are topically designed to provide an attractive backdrop to any subject. Use them to look like a presentation pro. https://bit.ly/2UwI6Yf
Presented at 3|SHARE's EVOLVE'15 - The Adobe Experience Manager Community Summit on August 18th, 2015 at the Hard Rock Hotel in San Diego, CA. http://evolve.3sharecorp.com
From Trainwreck to BAU - The commercial reality of accessibilityDamian Keeghan
Slides from a talk at A11yCamp 2018 in Melbourne.
---
Accessibility should just be business as usual for anyone working in the web development industry. Unfortunately this is not always the case, with it still sometimes being an afterthought added at various stages throughout the design, development or testing process.
In this session, we’ll be going through some real-world horror stories where accessibility wasn’t considered early enough, and dig into the commercial impacts and how they could have been resolved much sooner and more simply.
But not everything is a trainwreck! We’ll also look at the benefits that designing for accessibility from the very beginning can bring and discuss some takeaways to help you include accessibility into your projects as BAU.
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Accessibility patterns testable requirements during early designAidan Tierney
Shift left for accessibility: get a head-start by identifying requirements early in the design/build cycle, with an aim to reducing defects and overall effort.
Software Development Prioritization Techniques PowerPoint Presentation SlidesSlideTeam
Represent dissection of large projects into viable tasks using Software Development Prioritization Techniques PowerPoint Presentation Slides. Employ this PowerPoint slideshow to showcase your agile software development approach. Demonstrate the key details and team arrangement for an agile project with the help of state-of-the-art data visuals. Convey the phases, and objectives of your organization’s agile project delivery. Elucidate methodologies for agile application development such as lean, scrum-fall, and waterfall techniques. The diagrams featured in this PPT theme facilitate an easy explanation of the agile automation process, and agile architecture. Communicate the project prioritization techniques such as the relative weighting method, Kano model, and Moscow. With the help of this prioritization techniques in software testing PowerPoint templates deck. Cost is another variable that plays a vital role when it comes to managing projects. Portray the costs involved in the agile software project with the aid of a tabular format. Hit the download button and start personalizing right away. Our Software Development Prioritization Techniques PowerPoint Presentation Slides are topically designed to provide an attractive backdrop to any subject. Use them to look like a presentation pro. https://bit.ly/2UwI6Yf
Presented at 3|SHARE's EVOLVE'15 - The Adobe Experience Manager Community Summit on August 18th, 2015 at the Hard Rock Hotel in San Diego, CA. http://evolve.3sharecorp.com
From Trainwreck to BAU - The commercial reality of accessibilityDamian Keeghan
Slides from a talk at A11yCamp 2018 in Melbourne.
---
Accessibility should just be business as usual for anyone working in the web development industry. Unfortunately this is not always the case, with it still sometimes being an afterthought added at various stages throughout the design, development or testing process.
In this session, we’ll be going through some real-world horror stories where accessibility wasn’t considered early enough, and dig into the commercial impacts and how they could have been resolved much sooner and more simply.
But not everything is a trainwreck! We’ll also look at the benefits that designing for accessibility from the very beginning can bring and discuss some takeaways to help you include accessibility into your projects as BAU.
Implementing a Design System in a Small Team by SnapTravelProduct School
This session will provide a blueprint for how a team of 2 Designers and 3 Frontend engineers can work together, in a lean way, to build and implement a design system within 6 months while still working on other important company initiatives/features.
Design system presentation - How to sell it internallyEugene Kardash
Design System is a systematic approach to creating and maintaining consistent user interfaces, which coherently communicate the brand values and empower user experience.
This presentation's goal is to give an overview of the current state of design maturity at the company (here, at Herbalife Nutrition), to justify the necessity of having it, and to get buy-ins from decision makers.
Accessibility patterns testable requirements during early designAidan Tierney
Shift left for accessibility: get a head-start by identifying requirements early in the design/build cycle, with an aim to reducing defects and overall effort.
Book Formatting: Quality Control Checks for DesignersConfidence Ago
This presentation was made to help designers who work in publishing houses or format books for printing ensure quality.
Quality control is vital to every industry. This is why every department in a company need create a method they use in ensuring quality. This, perhaps, will not only improve the quality of products and bring errors to the barest minimum, but take it to a near perfect finish.
It is beyond a moot point that a good book will somewhat be judged by its cover, but the content of the book remains king. No matter how beautiful the cover, if the quality of writing or presentation is off, that will be a reason for readers not to come back to the book or recommend it.
So, this presentation points designers to some important things that may be missed by an editor that they could eventually discover and call the attention of the editor.
Unleash Your Inner Demon with the "Let's Summon Demons" T-Shirt. Calling all fans of dark humor and edgy fashion! The "Let's Summon Demons" t-shirt is a unique way to express yourself and turn heads.
https://dribbble.com/shots/24253051-Let-s-Summon-Demons-Shirt
Expert Accessory Dwelling Unit (ADU) Drafting ServicesResDraft
Whether you’re looking to create a guest house, a rental unit, or a private retreat, our experienced team will design a space that complements your existing home and maximizes your investment. We provide personalized, comprehensive expert accessory dwelling unit (ADU)drafting solutions tailored to your needs, ensuring a seamless process from concept to completion.
White wonder, Work developed by Eva TschoppMansi Shah
White Wonder by Eva Tschopp
A tale about our culture around the use of fertilizers and pesticides visiting small farms around Ahmedabad in Matar and Shilaj.
Hello everyone! I am thrilled to present my latest portfolio on LinkedIn, marking the culmination of my architectural journey thus far. Over the span of five years, I've been fortunate to acquire a wealth of knowledge under the guidance of esteemed professors and industry mentors. From rigorous academic pursuits to practical engagements, each experience has contributed to my growth and refinement as an architecture student. This portfolio not only showcases my projects but also underscores my attention to detail and to innovative architecture as a profession.
3. Contents
The Ingredients of UX Process Page #
Consistency in UI: Style Guide
Accessibility Compliance: Style Guide
Accessibility Compliance: Designs
Reduced Cognitive Load
Visible Content Areas
Responsive Design
Easy Data Consumption: Dashboards
Faceted Search
Usability Testing & Research
Conclusion
1
2
3
4-5
6
7-8
9-10
11
12
13
Note: Due to space constraints basic artifacts like Personas, User Journeys, Test Protocols and Test Scripts are NOT showcased here.
4. Consistency in UI: Style Guide
Style Guide for Talent Central
Created by CEB Talent Central Team
Date May 27th, 2015
Version
:
:
:
2.2.1
Main Colors
Section II: Colors
Reports
Progress Bar
The colors used for reports are a set of special colors
developed for Talent Central. They are not part of CEB branding
guidelines.
RecommendedNot Recommended
88, 166, 24187, 19, 62 255, 210, 0
127, 214, 247 0, 174,239 10, 63, 107
127, 214, 247 127, 214, 247 127, 214, 247
127, 214, 247 127, 214, 247 127, 214, 247
255,255,255 242, 242, 242 196, 196, 196 138, 138, 140 77, 77, 79 0, 0, 0
Neutrals
Primary Actions
(color in the middle is Primary Blue)
Supportive Actions
(color in the middle is Primary Mint)
Skipped/Incomplete Actions
(opposite of primary actions)
(color in the middle is Primary Gold)
Primary colors can be used in a“standalone”manner. The darker and lighter shades can be used ONLY
along with the primary color of the SAME family. E.g., use dark/light blue ONLY with primary blue.
Style Guide for Talent Central
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
1
To develop consistency in the Ui of the application
Need
Process
Analysis of existing assets, including past work by a
Design Studio
Extensive interviews with stakeholders on the
product team and UI development team
People
Product Team
UI development team
Created a Style Guide
Solution
Managed all its subsequent versions single-handed-
5. Accessibility Compliance: Style Guide
Accessibility Styles: Black/White
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
Accessibility Style Guide: White on Black
Accessibility Styles: Off-White/Black
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
Accessibility Styles: Yellow/Blue
Created by CEB Talent Central Team
Date May 28th, 2015
Version
:
:
:
2.2.1
UI Elements
Headers
Section III: UI Elements
Header 1: Page Titles
Header 2: Section Heading
Proxima Nova; Bold; 30 px
Proxima Nova; Semibold; 24 px
Header 3: Section Heading
Proxima Nova; Semibold; 22 px
Body Text
An Assessment Profile is a set of assessments that are saved to be
used to assess the same or similar roles. This helps to ensure
consistency across your hiring process.
Duplicating a project allows you to maintain consistency in assessing
similar job openings.
To duplicate a project, navigate to that project. The action to duplicate
the project will be available.
Black; Proxima Nova; Regular; 14 px
Table Titles
Table Title
Proxima Nova; Semibold 24 px
Logo Display
The CEB logo needs to be displayed on a white background. If the logo is
part of a header, the entire header needs to be white.
Web
Mobile
The CEB logo needs to be displayed on a white background.
Main Navigation Bar
The main navigation bar is displayed in Dark Blue (RGB: 10,63,107). The tabs are displayed in Primary Blue (RGB: 0, 174, 239). Selected tabs have a
white background with Primary Blue text. Down arrows, wherever used, are solids, in Primary Blue.
The main navigation bar should NOT be hidden at any time during the users’experience.
All colors MUST be used at 100% opacity. Exceptions to this rule are Style Guide-specified-us.
Home Page Manage Review DashboardCreate New
Project Name Created by Invited Completed Deadline Date Created Date
Column Titles (across Talent Central)
Proxima Nova; Semibold; 18 px
2
The product required Accessibility Compliance; no
standards existed before I started on the project
Need
Solution
Created Style Guides for the 3 most commonly used
contrast options
Managed all the subsequent versions single-hand-
Process
Conducted discussions with National Agencies like
the American Federation of the Blind
Worked with a UK based firm to ensure
Accessibility standards
Did extensive research on WCAG 2.0 standards and
508 requirements
People
4 National Agencies
A UK-based firm
WebAIM
6. Accessibility Compliance: Designs
13 of 20
Forestry Department
(Pine Plantation Area)
45m
Test Time Remaining
0 10 20 30 40 50 60
0
5
10
15
Year
Pine Plantation Area (000s of hectares)
13.2 16.5 16.9 5.2
1.0
13.8 17.5 17.3 6.1
12.5 19.7 15.7 6.9
11.7 20.3 16.5 6.9
1.3
1.0
2.2
Seedlings (0-2 years)
Maturing (7-20 years)
Old-growth forest (50+)
Saplings (3-6 years)
Harvestable (21-50 years)
Accessibility Help Exit
3
Requirement to implement Accessibility principles in
charts and graphs
Need
Created three sets of designs for charts/graphs and
tables to accommodate the three contrast options
Solution
People
A UK-based firm
Process
Chose web-compliant colors and tested them using
online contrast checkers
Created patterns to go with those colors to be used
in charts and graphs
Had the designs vetted and approved by a
UK-based firm
7. Reduced Cognitive Load
Before
4
Users found the Create Project process difficult to use
and navigate through because:
Need
The workflow was non-linear; it created confusion
around how one part was related to another
There was too much white-space; the information
was too spread-out; made it difficult for users to
understand how everything fit together
The“Save”button was named“Create Project”. So
users did not understand whether they were saving
a project or not
9. Visible Content Areas
After
Before
6
The main navigation did not layout the features of the
product well.
Need
Proposed a solution that makes the different features
of the product visible on the main menu
Solution
People
Internal testers
Process
Referenced expert recommendations such as those
of the Nielsen-Norman group
Used feedback from Usability Testing conducted
internally
Used Axure to create a prototype
12. Easy Data Consumption: Dashboards
Before
9
Need
Reports from legacy system needed to be re-imagined
for dashboards
The data was designed to be printed out as a report
in a .pdf format; needed to be reworked for a digital
interface
The data visualization did not follow current best
practices; it needed to be updated to reflect them
The design needed to be reworked to follow brand-
ing guidelines
14. Faceted Search
Before
DashboardManage ReviewHome Page Create New
English - US
AlertsTasks
99+ 99+
Search Site
Projects to Review
Refine Your Results
Favorite Projects Created ByStatus
Search all results
Refine By:
Archived Created Deadline Date
Passed
Draft Projects In Progress
Search all results
First Name1 Last Name1
First Name2 Last Name2
First Name3 Last Name3
First Name4 Last Name4
Project Tags
Search all results
Location
Loc1
Loc2
Loc3
Products
You Selected: Status In Progress Created By FirstName2 LastName2 FirstName4 LastName4 Project Tags Location: Loc2
Search for projects to review
After
11
The filters section of Project Creation and
Management had dropdowns that had a long list of
items, sometimes running off the page; the
selections were displayed within the dropdown input
box
Need
Proposed a design for Faceted Search with a
dedicated section to display selections
Solution
People
Product manager for the product
Process
Used materials from UXPA 2015 Conference
Referenced Nielsen Norman Group’s
recommendations
Conducted online research for design inspiration
Created paper/pencil sketches to iterate
15. Usability Testing & Research
12
The existing design decisions had to tested to make
sure that the user experience was intuitive. But access
to the customer base was still in the process of being
worked out.
Need
Used internal users to conduct usability testing.
Solution
Process
Created test protocols and test scripts
Conducted testing, captured screen movements
through Camtasia Studio
Shared results with stakeholders
Created paper/pencil sketches to iterate
People
Product managers
Participants from various functions within the orga-
nization
16. Conclusion
for a GREAT User Experience!
13
UX ingredients such as those discussed above
are absolutely essential