1 of 63

4 of 63

Housekeeping

Questions: Please use the Zoom Q&A.
Relax about notes: After the workshop we will share the slides with all who signed up for the event.
Resources and links will be included in the slides.

5 of 63

Today’s Agenda

Welcome

About UCUX

Presentations

UCSC: Meghan Sitar

Service Design: An Introduction

Berkeley: Anna Gazdowicz

Berkeley Web Builder Feature Redesign

UCLA: Colombene Gorton

UCLA Design System and Wordpress Theme

Upcoming Events

Community Conversation

Conclusion

6 of 63

About UCUX

A friendly community of practice for improving user experience across the UC system.

Mission: Improve the usefulness and usability of the UC digital ecosystem. Promote human centered design practices in the UC system.
Methods: Provide expertise to projects in need. Offer professional development to staff in UX and UX-adjacent roles.

Closely related terms:

• UCD (User-Centered Design)

• UX (User Experience)

• HCD (Human-Centered Design)

• HCI (Human-Computer Interaction)

More info:

7 of 63

About UCUX

Anna Ahearn

UCLA

Lead UX Designer, ITS

Immediate Past President, BruinTech

Kristin Ashton

UCLA

Lead UX Researcher �& Designer

Mary Watkins

UC Santa Cruz

UX Manager

Phyllis Treige

UC Santa Cruz

Associate Vice Chancellor, ITS Experience Strategy & Design

Rachel Hollowgrass

Berkeley

UX Lead, bIT

Chair, Berkeley UX

Steering Committee

8 of 63

About UCUX

If you have a project or event idea that would be a fit for this community, please contact UCUX on Slack or send email: ucux-steering-committee@googlegroups.com

Join us on Slack

uctech.slack.com
#ux-andor-design

Join our mailing list

Search for “ucux” in Google Groups

Activities

UX at UC Tech conference
Usability Workshop
UX Show and Tell
Other community events

bit.ly/UC-UX

9 of 63

Topical Presentations

Meghan Sitar (UCSC)

Service Design: An Introduction

Anna Gazdowicz (Berkeley)

Berkeley Web Builder Feature Redesign

Colombene Gorton (UCLA)

UCLA Design System and Wordpress Theme

10 of 63

Presentation 1: UCSC

Meghan Sitar

Service Designer

UCSC IT Services

mesitar@ucsc.edu

Service Design

11 of 63

What is service design?

“Service design is the activity of choreographing people, infrastructure, communication, and material components of a service in order to create value for the multiple stakeholders.”

Birgit Mager, in Lara Penin’s Designing the Invisible: An Introduction to Service Design, 2017

Birgit Mager is co-founder of the Service Design Network and was one of the first professors of service design, in Germany.

I like this definition because it really speaks to the orchestration of people, process, and technology in order to create value to multiple stakeholders. Service design helps us consider the value we’re delivering to users while at the same time considering how we create value for employees by improving their experience in delivering the services.

It can also be a tool of for organizational development as we consider the conditions, policies, and hierarchies that impact our ability to coordinate service delivery and improvement across the present silos of an organization.

Lara Penin’s book is a great, easy read, with lots of great case studies of service design projects in governmental organizations and other community spaces as well as business. You see much more adoption of service design as a core organizational capacity in European governmental and public service organizations, but there’s been more use of service design in the US in recent years as well, often alongside organizational capacity for product design or user experience design. Health care organizations in particular, like our colleagues at UC San Francisco, have taken a service design approach to service improvement, recognizing the opportunities to reduce costs and drive patient satisfaction via improved outcomes in terms of efficiencies, reduced complexity, and better overall care.

12 of 63

Service design and UX

Erika Flowers, Demystifying Service Design, Part 1, 2017

What users encounter on the frontstage experience of the service

How the backstage aligns people, process, and technology to deliver that experience

UX

Service design

My work is part of the work of the UX Team at UCSC. This is a bit of an oversimplification, but one way of understanding the relationship between UX and service design is to consider the structure of a service as having a front stage that is those interactions with the organization that the user can see in the user experience of the service, and a backstage, which includes the people, process, and technology that need to be aligned to deliver that user experience. There’s behind-the scenes elements for both the user and the organization. Often in UX research, we delve into that behind the scenes of the customer to understand their journey and the job they’re trying to get done in order to create services that meet their needs and deliver value. Similarly, in service design, we have to dig into all of the structures and experience that help us define the process of our services.

This delving into people’s needs, preferences and desires is really what distinguishes service design from business analysis or other service management practices that center technology and its roadmap. Service design takes a more human-centered approach to process analysis by introducing the participatory, interactive approaches and interdisciplinary teams of design to more business-focused, process-oriented approaches.

13 of 63

The service blueprint

Smaply, Using service blueprints to design customer-centered processes, 2023

When people encounter service design, it’s often first through the use of a service blueprint, which is an extended version of a UX journey map that adds swimlanes to really dig into the backstage of the service. Like in this basic example from an interaction with a pharmacy, you often map the interactions a customer has with the organization across a line of interaction. There’s also a line of visibility, which defines those things that are experienced directly by the customer in the user experience of the service and those things that happen out of view of the user, including the definition of policy, the incorporation of technology and support processes, and the hand-offs that need to happen across teams to move the experience forward for the user.

You’ll encounter current state and future state service blueprints. Often the act of creating the current state blueprint and the facilitated discussion of how a scenario within a service works is the actual deliverable for the activity rather than a polished map. The couple of examples from ITS that I thought to include here are so complicated and diagnostic that they weren’t well-suited to a slide, for example, but they produced insights that have fed into service improvements.

Future state service blueprints help with thinking through resource planning and dependencies across a service as you’re developing a plan for implementing and launching that service. They can help to scope prototypes or pilots by allowing you to zoom in on one portion of the experience to test. For example, at the University of Michigan, when launching a new consultation service, we wanted to consider all of the touchpoints that needed to be included in the design to make it easy and un-intimidating for a student to schedule and arrive for a consultation with a librarian. We built prototypes of the scheduling interface and did role playing of the arrival scenario with students and librarians using different furniture configurations. This allowed us to take an initial set of interactions we had defined on the blueprint and test them before finalizing the design of the service, including the technology and the furniture configuration.

14 of 63

Service design project example: ITS Service Taxonomy

“Creating a service list from the perspective of customers and users is a relatively simple task that can have profound effects on how an organization sees the world.”

Kate Tarling, The Service Organization, 2023.

15 of 63

Service design project example: ITS Service Taxonomy

Workshops with ITS employees explored EDUCAUSE taxonomy model to map our current state to possible future state of model, using card sorting research with users to incorporate their mindsets into our evaluation

Service designer’s role is one of facilitation, research, and synthesis. By being situated in-house, service designer can be involved in implementation and process development

I’ve been facilitating this process, starting with working with a service design team that used a model available through EDUCAUSE as a starting place for discussion. Through a series of workshops that included synthesizing user research done through card sorting into our discussions, we were able to propose a categorization for our services that is now being implemented in our service management activities.

In this case, the service designer’s role is one of facilitation, research, and synthesis. You often see service design consultancies coming into higher education and delivering a strategy or roadmap or playbook to guide service work, but then implementation is left to the organization. By being situated in-house, I can also help with the implementation and process development, which is a lot of my work right now as we reinvigorate our service management program.

16 of 63

Service design project example: Support Center Visioning

How might we create a support experience that allows people to feel confident that our Support Center can resolve their issue quickly and accurately?

How might the Support Center enable a frictionless user and employee experience across the IT support experience and its channels?

17 of 63

You are

Problem Space

Solution Space

Pilot, Assess, Decide,

Implement

Ideate

Synthesize

Explore

Analyze

Prepare

Workshop #1: Describing the future context

Workshop #2: User journey maps

Workshop #3: Future outcomes framework

Workshop #4: Insights from research

Workshop #5: Opportunities for change

Workshop #6: Future touchpoints

Workshop #7: Prototyping the vision

18 of 63

Service design project example: Support Center Visioning

In the end we had a central vision of support with five pillars. We synthesized our work together in a longer document that described what these pillars would look like in more detail, giving us a vision and an emerging set of goals to design against. This work is currently happening with the aid of some consultants who are helping us build our service management program, with this vision driving the work around our service desk practice.

Both the taxonomy example and the service visioning work demonstrate opportunities for service design to improve both the user experience of our services and the employee experience of delivering our services. By bringing clearer definition to our services in the taxonomy work, users can more easily discover services that meet their needs and employees can better make referrals and surface opportunities for collaboration for process improvement. By building a strong network of expertise and knowledge and improving our knowledge management practices, users can self-serve, tickets can be resolved faster, users can trust ITS to address their issues, and employees can trust each other by relying on shared knowledge around services and processes.

19 of 63

Learn more about service design

20 of 63

Q&A

21 of 63

Presentation 2: Berkeley

Anna Gazdowicz

Web and Accessibility Specialist

Berkeley IT

Redesigned features:

Site Builder dashboard
Built-in content types
Page customizations (Layout Builder)

Berkeley Web Builder Feature Redesign

22 of 63

Presentation 2: Berkeley

About me!

Working for Berkeley IT (Web Platform Services) since 2013
UC Santa Cruz graduate
Live in Berkeley with my family (husband, 7-year-old, 2-year-old twins, cat)
Likes: Cooking/baking/eating, riding bikes, video games, singing, kung fu

Berkeley Web Builder Feature Redesign

23 of 63

Presentation 2: Berkeley

Today I will be talking about:�

Open Berkeley → Berkeley Web Builder (new version of current platform)�
UX challenges with existing features�
Proposed redesigns for features on the platform

Before: Open Berkeley

After: Berkeley Web Builder

24 of 63

Presentation 2: Berkeley

About our platform:

Custom web publishing platform for �UC Berkeley websites

Open Berkeley (current):

Drupal 7-based
Drupal 7 will reach End-of-Life soon-ish!
310+ sites�

Berkeley Web Builder (new):

Drupal 10-based upgrade
Same features
Significant technical updates provided an opportunity to address usability issues

25 of 63

Presentation 2: Berkeley

PROCESS: How did we define the usability issues?

Observed user patterns organically over 10+ years of product facilitation

User patterns pointed to UX issues

Identified root causes which led to UX improvements

26 of 63

Presentation 2: Berkeley

PROCESS: How did we approach these redesigns?

Drafted new versions of the features (low and medium fidelity)�
User testing and discussion of initial redesigns�
New iterations based on feedback

Whiteboard drafts

Figma

prototypes

27 of 63

Presentation 2: Berkeley

BEFORE: �Site Builder Dashboard

Site Builder’s “Mission Control”�
Centralized area where the user can perform many website tasks

28 of 63

Presentation 2: Berkeley

BEFORE: �Site Builder Dashboard

Difficult to find�
Site Builders often skipped the top-level “Dashboard” link and missed essential functionality

29 of 63

Presentation 2: Berkeley

BEFORE:

Site Builder Dashboard

Animation to demonstrate:

30 of 63

Presentation 2: Berkeley

AFTER: �Site Builder Dashboard

New vertical menu with logical structure�
Menu remains open and static�
Option to collapse

31 of 63

Presentation 2: Berkeley

AFTER: �Site Builder Dashboard

Options separated and organized�
Increased discoverability of available features

32 of 63

Presentation 2: Berkeley

AFTER:

Site Builder Dashboard

Animation to demonstrate:

33 of 63

Presentation 2: Berkeley

BEFORE: �Content Types

Content and Landing content (page) types�
Functional definition of each type did not match their actual use

Content page

34 of 63

Presentation 2: Berkeley

BEFORE: �Content Types

Content and Landing content (page) types�
Functional definition of each type did not match their actual use

Landing page

35 of 63

Presentation 2: Berkeley

BEFORE: �Content Types

Customize feature and widgets available on both content types�
Unclear when to use one or the other�
Builders easily created tangled content

36 of 63

Presentation 2: Berkeley

BEFORE:

Content Types

Animation to demonstrate:

37 of 63

Presentation 2: Berkeley

AFTER: �Content Types

Content page is now Basic page�
Landing page is now Customizable page

38 of 63

Presentation 2: Berkeley

AFTER: �Content Types

Customize feature removed from Basic page�
Customize feature remains on Customizable page type with additional functionality and flexibility

39 of 63

Presentation 2: Berkeley

AFTER:

Content Types

Animation to demonstrate:

40 of 63

Presentation 2: Berkeley

BEFORE: �Page Customizations

Users can customize pages by selecting different layouts and placing widgets

41 of 63

Presentation 2: Berkeley

BEFORE: �Page Customizations

Users cannot add sections/rows or other layout-specific customizations�
Users ended up with �lopsided content

42 of 63

Presentation 2: Berkeley

AFTER: �Page Customizations/

Layout Builder

New feature: Custom layouts�
Users can add new sections to Customizable pages and choose from either custom or templated options

43 of 63

Presentation 2: Berkeley

BEFORE:

Layout Builder

Side navigation did not have enough space for our templated layouts�
Edit options only show up on focus

44 of 63

Presentation 2: Berkeley

AFTER:

Layout Builder

Edit and configure options prominently available�
Options open in a modal interface rather than side navigation

45 of 63

Presentation 2: Berkeley

Feedback (thus far)

Met with users to preview these updated features

Overwhelmingly positive feedback

Addressed many of users’ own wishlist items

Users seem excited to use these updated features, and we are excited to move forward with them!

46 of 63

Presentation 2: Berkeley

Next Steps

Accessibility evaluation and testing�
More preview sessions with larger sets of users�
Additional smaller-scale improvements

47 of 63

Q&A

Thank you!

Anna Gazdowicz

annagaz@berkeley.edu

48 of 63

Presentation 3: UCLA

Colombene Gorton

Lead UX Designer

Strategic Communications

UCLA Design System and Wordpress Theme

49 of 63

What is a Design System?

Styles

Fonts, Colors, Spacing, Grid, etc

Components

Buttons, Cards, Menus, Form Fields

Documentation

Best Practices, Accessibility & Usage Guidelines

50 of 63

Design Systems

IBM: Carbon

Ohio State University: Buckeye UX

Google: Material Design

Indiana University: Rivet

51 of 63

Why use a Design System?

Digital design and development can be done quickly, more efficiently, at scale.
Frees designers to focus on larger, more complex problems.
Enables content creators to focus on content.
Supports developers in implementing refined, accessible front-end UI.
Creates a unified language within and between cross-functional teams.
Creates visual consistency across products, channels and siloed departments.
Individuals don’t have to reinvent the wheel.
Helps educate designers and contributors.

52 of 63

UCLA Design System Origins

UC Davis Pattern Lab

UCLA Brand Guidelines

53 of 63

Process

Audit

Design, UX, Documentation

Code

Launch/

Outreach

CMS Theme

additions

refinements

Github Project

54 of 63

Milestones

Design Kit 2.0

The source of truth for design system elements and what subsequent code is based on, this Figma design file can be used as a library by designers for website mock-ups.

Design System Website 2.0

This website contains the inventory, code and documentation for design system elements and is a centralized resource for all tools and projects related to the design system.

Workshops

Workshops are rolling out in September with in-depth presentations on the design system and time for questions, feedback and discussion.

Wordpress Theme

The UCLA WordPress theme and plugins include styles, components, assets, WP page templates and documentation.

February 2023

June 2023

September 2023

December 2023

55 of 63

Figma Design Kit

56 of 63

The Design System Website

designsystem.brand.ucla.edu

57 of 63

WordPress Theme & Plugin

wp.brand.ucla.edu

58 of 63

Coming Up

Design Page Layouts

Styles and components are combined to create web page design layouts in Figma. Layouts are offered for use as a starting point for designers to help web pages across various screen sizes and can be used with all design kit components. These are then built in code and in WordPress.

Alignment with ITS

Design input on SiteDen Drupal Distribution and support for the WordPress theme.

3rd Party Platform Support

Templates or guidelines for Splash, Canva and other digital marketing & communications platforms.

Design Tokens

Atomized styles that can be used in many contexts.

New & Refined Features

Mega menu, mobile-friendly tables and more.

59 of 63

Q&A

60 of 63

Upcoming Events

UCUX Usability Workshop Summit�Friday, June 7, 2024�11 – 12:30pm PDT�Zoom�
UCUX Meetup at UC Tech Conference�Sun – Tue, Oct 27 – 29, 2024�In person at UC Davis�Meetup details TBD

61 of 63

Appreciation for Our Supporters

This event would not be possible without the impactful promotion and encouragement from� �• UC Berkeley: Berkeley IT

• UCLA: BruinTech, UCLA UX, AMC, UNEX

• UCOP: UC IT Blog

We could not do this without you!

Thank �You!

62 of 63

Community Conversation

63 of 63

Thanks for Coming

Stay in touch!

uctech.slack.com

#ux-andor-design�

ucux-steering-committee@googlegroups.com

bit.ly/UC-UX

✉️