Digital Foundations: CDA.org Values and Principles

Resources:

Open

Open

Yesenia's Website

Viaspire Background

https://docs.google.com/document/d/1RZn9WH5tboHF6tKWF21tikZSgUe1JoBj_wPFe4PccTc/edit?usp=sharing

https://docs.google.com/presentation/d/1GG4fbV5VBM7jfykql2ot6gXTnSi0vXYyspO7ScvmyEk/edit?usp=sharing

https://docs.google.com/document/d/15q56VPkSt8yLX9iuY8cR3JuQpRO7MZcH5wKkAlxQOSE/edit?usp=sharing

https://drive.google.com/file/d/1Pkj9t2dB9itqgdW1YqqNpu69le6nVvty/view?usp=sharing

https://docs.google.com/document/d/15J1M7Qo4_tlByH4z9NUXM2qAsdpojysKWPAvREsugUA/edit?usp=sharing

https://docs.google.com/document/d/19flxJn9bPc-ONakE4cK_c2aepfiixIwuF-bB8GCXwIM/edit?usp=sharing

https://docs.google.com/document/d/14YlhdCke0wUbePSZIkJ0YMUuHnYXyX1rf27ANxRwB48/edit?usp=sharing

https://docs.google.com/document/d/1GHgIQ899p62RDXBlgMdzvrv2BAq1hQf3oly7aP6G9Jg/edit?usp=sharing \

https://docs.google.com/presentation/d/11VUse5EBg7AHeYRrP8GeTYZTZT4ZMa-Uqe-fOWALiVI/edit?usp=sharing

https://docs.google.com/document/d/10c_2pL21kIBBH-_R8rKVw0cxjea1WUIIgSNMz7ZXBwc/edit?usp=sharing

Open

Open

Issues to address:

1. Who does our work impact?

   1. Member personas

   2. Overall goals

2. What are the foundations that CDA.org was built upon?

   1. Mantra: member-first and mobile-first (insert full mantra)

   2. Visual

      1. Patterns:

         1. What are User Interface (UI) Design Patterns?
            User interface (UI) design patterns are reusable/recurring components which designers use to solve common problems in user interface design. For example, the breadcrumbs design pattern lets users retrace their steps. Designers can apply them to a broad range of cases, but must adapt each to the specific context of use.

         2. Why Design Patterns are Such Powerful Design Aids
            Websites have a conventional look and feel because of design patterns such as global navigation and tab bars. In UI design, you can use design patterns as a quick way to build interfaces that solve a problem—for instance, a date picker design pattern to let users quickly pick a date in a form. So, UI design patterns serve as design blueprints that allow designers to choose the best and commonly used interfaces for the specific context the user faces.
            UI design patterns let us save time and money since we can adapt them into our design—instead of reinventing the wheel for every new interface. They also facilitate faster prototyping and user familiarity; our members know where to go because and how to find things because every time they use the internet they find similar patterns; every time they use our site they also become more and more familiar with it.
            You can see what some of these patterns and their best practices are in this PDF compilation.

         3. UX Patterns
            User Experience Design (UX) applies to anything that can be experienced—be it a website, a coffee machine, or a visit to the supermarket. The “user experience” part refers to the interaction between the user and a product or service. User experience design, then, considers all the different elements that shape this experience. UX design is NOT about visuals; it focuses on the overall feel of the experience. In this respect, our website also has UX patterns; these are usually behavioral, functional or cognitive in nature. Watch this video for more information on what these patterns are.

      2. User journeys:

         1. A user journey is a visualization of the process that a person goes through in order to accomplish a goal. Typically, it’s presented as a series of steps in which a person interacts with a product. As opposed to the customer journey, which analyzes the steps before and after using a product, a user journey only examines what happens inside a website. In the context of cda.org, for example, a user journey can consist of the number of pages and decision points that carry a member from one step to another when downloading a Practice Support resource.

         2. A user journey is used for understanding and addressing user needs and pain points. The entire point of the user journey is to understand user behavior, uncover gaps in the user experience, and then take action to optimize the experience.

         3. The effectiveness and importance of a user journey depends heavily on the quality of insights it provides. User journeys should be built from both qualitative and quantitative findings. The process of creating a user journey has to begin with getting to know users. If designers don’t have enough information to create a good user journey, they should conduct additional journey-based research—like the research we did for the Back to Practice categories—to gain insights into the user experience.

         4. When design decisions are made without creating user journeys —or without taking them into account— we produce convoluted and overly complex experiences that generate high levels of frustration with our members.

      3. Design system:

         1. A design system is a series of components that can be reused in different combinations. Design systems allow you to manage design at scale.

         2. The visual design language is the core of a design system. It’s made up of the discernible components that we use to construct our site. Our visual design language is made up of four main categories:

            1. Color
               The colors in our design system include 1–3 primaries that represent our brand. We also include a range of secondary colors to give our designers a few more options.

            2. Typography
               Our design system includes just one font: Open Sans. It was chosen due to being ubiquitous to the majority of browsers and devices.

            3. Sizing and spacing
               The system we use for spacing and sizing looks best when we have rhythm and balance. The spacing within elements is not arbitrary, it follows a specific pattern and is consistent with industry standards.

            4. Imagery
               We follow set guidelines for illustrations and icons, and use the best image format for the situation. We take into account accessibility, user experience and established practices in the industry when choosing images and their placement.

         3. Why do we use a design system?

            1. It saves us time and money
               While it might feel like we’re adding on another layer, design systems can actually help us increase our efficiency. To better understand how this applies to us, consider these questions:

               1. Scale – Does our site have more than 300 screens? Will our site grow significantly?

               2. Consistency – Do we want our site to have consistent branding, look and feel, and experience? For example, does our site currently have different button styles? Why do you think that is?

               3. Efficiency – Do we want our visual designers, writers, and developers (vendor) to work faster and save time?

               4. Teamwork – Do we have projects where there’s a lot of handoff between team members or many designers work on the same project at once?

            2. What does a Design System look like? We’re currently diligently working on documenting ours, but here’s a peek at how other companies showcase theirs:

               1. https://canvas.hubspot.com

               2. https://designsystem.quickbooks.com

               3. https://atlassian.design/

               4. https://www.mckinsey.com/about-us/overview/our-new-identity#photography

3. Content Strategy

   1. Consolidating complex information into easy to understand actions

   2. Multiple types of content (video, blog, traditional content, micro-content)

4. Functional/technical

   1. Easy to update with existing team (reduce need for constant new development)

      1. Components are pre-built; changing one item on one page will change on ALL pages

      2. Patterns reduce need for learning new things; if each page was like a room, you would want the doorknobs on each door to be the same size, shape and placement between rooms and ideally the same as other homes. We want to model our website on a preconceived understanding of how websites work.

   2. User-directed (allow members to access what they need and self-serve rather than push content to them)

      1. Focusing on the journey and goal for the page

         1. Too many goals or CTAs will make the page confusing; if everything is a priority then nothing is a priority

         2. 3 click myth is outdated

         3. Studies show that having to click or scroll do not negatively impact user motivation to complete a task; however, information overload or lack of clear purpose/next step do cause users to give up

         4. Goal is always to reduce cognitive load for the user. Each decision the user makes must be an easy and enjoyable experience. This does not always mean more copy, more visuals, or more “selling.”

      2. Focusing on priorities/hierarchy

   3. Best practices (accessibility, update platform regularly, address security concerns proactively)

5. What type of team do we need to accomplish this work?

   1. Soft skills

   2. Core functions of a modern digital marketing team

6. Digital principles

   1. What underlying principles and values do we hold in the digital space?