One of the foundational principles of our Agile practice is user-centered design (UCD). Our design team provides services aimed at optimizing digital products around what users actually want or need rather than expecting them to change their behavior to accommodate a product. Design activities at CivicActions unfold iteratively through the project lifecycle, encompassing research, content strategy, information architecture, interaction design, front end development, and visual design. The design guidelines we follow build on specific plays in the U.S. Digital Services Playbook.
- We focus on understanding the problem(s) first.
- We follow user*centered research and design methods.
- We work with skilled, experienced designers.
- We aim for continuous learning and discovery using iterative practices.
As your partner, we strive to understand the problem we are tasked with solving before we begin design or development activities connected to a particular solution. We use a variety of methods, from story mapping to usability testing, to target and solicit feedback from real users, stakeholders, and subject-matter experts to better understand the problem, desired outcomes, and organizational priorities.
We call the research we conduct at the beginning of a project "Discovery" (see Discovery Services for more information about discovery goals). The timing and scope of additional (iterative) research activities are dependent upon specific project needs. Our current research methods and offerings include:
Audiences & outcomes workshop. To create a successful digital experience, it's important that we gain insight into users and their goals. This workshop is an onsite, collaborative activity conducted with key stakeholders early in the project to identify, describe, and begin prioritization of audiences (user groups) and measurable outcomes (business objectives and user goals) for a digital project. A typical A & O workshop engages 5-10 stakeholders and ranges from 60-90 minutes.
Story mapping. This is a powerful practice for talking about who does what (and why) when interacting with a digital product. Story mapping is a way to focus discussions around who will use the product and what they'll do with it later, after delivery. A story map helps to clarify overall project vision, builds shared understanding about the whole product, and can be used to formulate a release strategy that focuses on specific users and outcomes.
Stakeholder interviews. These are semi-structured conversations conducted with individual project stakeholders, which includes anyone who has an interest in the project's success (including end users). Typical interviews are 30-45 minutes each. Most interviews will be conducted by phone or video chat, however we are also open to performing in-person interviews, if logistics allow. Even a small number of in-person interviews can provide rich information.
Surveys. We often use online surveys to distribute and gather responses to user research questions. Surveys can be structured to address specific areas of interest as well as broader heuristics.
User persona development. Personas are realistic representations of key audience segments that provide a clear picture of target users' expectations, goals and values. Personas are informed by interviews. They add a layer of real-world consideration to project conversations and can help to uncover the most-needed features and functionality and inform decisions about information architecture and development priorities.
Usability testing/evaluation. The only tried and true way to find out if a digital product works is to test it. Usability testing is a technique for evaluating a product by putting in front of users. In a typical usability test, one user at a time is shown a website, prototype, sketch, or mock-up and asked to a) figure out what it is, and/or b) try to use it to do a typical task(s).
The outcome of an effective content strategy is the creation, publication and governance of useful, usable content for your users. Our content strategists work with clients to explore the breadth and depth of their existing content, to plan for future content, and to clarify tone, voice and branding conventions. Content strategy also includes research into what types of content are most useful to your user base, enabling you to identify new materials to enhance your connection with those you serve.
Current content strategy offerings:
Content audit. The best way to fully comprehend all existing content and to accurately access current content woes and assets is a comprehensive content audit. There are two kinds of audits: quantitative inventories and qualitative assessments. The inventory answers the question "What content is there?" and the assessment answers the question "Is it any good?"
Content type design. The content strategist is responsible for creating content type definitions (eg. fields), which are used by engineers as guides when building custom content types in Drupal.
Content templates. We use templates to validate content structure and content type design, using real example content provided by the client.
Content modeling. A content model is a diagram or chart that documents the elements of and relationships between all the different types of content for a given project. Content models can be used to validate concepts with stakeholders, and they also encourage communication and collaboration between designers, developers, and content creators.
Wireframes and page tables. Wireframes and page tables are used to convey content requirements defined and driven by messaging, business objectives and user goals, ensuring that content receives the attention it deserves at the right time during the project. Most information architecture documentation, page- and/or component-level documentation is captured in wireframes. Page tables identify and explain key content recommendations, taking wireframes to the next level. They include:
- content objective(s)
- key messages
- specific content recommendations
- source content quality
- guidelines for how to create and maintain the content
Information Architecture (IA)
Information architecture is closely related to content strategy. We use content strategy inputs along with user research and our extensive Drupal experience to make fundamentally sound and lasting recommendations for an effective IA. Our information architects will work with you to develop sustainable site structures, labeling systems, navigation systems and concepts, taxonomies, and search functionality. We use methods such as content inventories/audits, card sorting, flowcharts and wireframes to develop and communicate IA.
Our designers and front-end developers understand how users and technology communicate. We pair this understanding with a range of tools and methods to create engaging, usable, accessible interfaces on both the front end and the content management side of your project.
When appropriate, we begin design activities with mobile-based interfaces, moving next to tablet and desktop variations as we account for all possible screen sizes and resolutions. The "mobile-first" approach ensures a solid mobile presentation and, perhaps more importantly, prompts important conversations with clients about content hierarchy and overall design priorities early in the process. The constraints inherent in narrow mobile screens bring these considerations to the fore.
When faced with a particularly tricky or complex design problem, our designers facilitate "design studios," collaborative sketching exercises that leverage the expertise and creative problem-solving abilities of the whole team. The output of a studio session is rapid concept generation embodied in low-fidelity sketches and/or rough wireframes. In our experience, collaborative design builds shared understanding and trust and increases feelings of ownership in the work being done. Designing together increases the design IQ of the entire team and gives designers a much broader set of ideas to draw upon as they refine the user experience.
We use wireframes to develop and communicate the backbone of the overall user experience. Wireframes are low-fidelity mockups that demonstrate where the major navigation and content elements appear on each page, prompting conversations and decisions about content hierarchy and workflows. They connect the site's information architecture to its visual design by establishing paths between pages and defining consistent ways to display particular types of information in the user interface. We often use wireframes in concert with story mapping, which allows us to build a comprehensive product backlog in a visual and holistic way. Wireframes do not include styles, colors, or graphics, though they do inform later visual styling.
Because we can generate them relatively quickly, low-fidelity wireframes allow us to get potential design solutions in front of users for review early and often. High-fidelity designs are time consuming and tedious, but wireframes tighten the feedback loop, ensuring that more time-consuming activities (design and development) are informed by user input. Wireframes can be used to test potential design changes at any scale (small, reusable, discrete design patterns or larger components comprised of other patterns).
Once low-fidelity wireframes are discussed, revised and approved, higher fidelity activities can take place. These activities may include the production of style guides, high-fidelity prototypes, and/or functional prototypes, depending on project needs and scope.
In alignment with the U.S. Digital Services Playbook, our visual designs are beautiful, simple and intuitive. During the last few years we have shifted away from the production of full-page design comps in favor of flexible, living style guides. Also known as pattern libraries, style guides are repositories of design rules, visual language components, and front-end code. Typical guides include color palettes, header styles, fonts, layouts and grids, imagery, buttons, icons, and navigation elements and patterns, providing a library of design elements that can be adapted for any device type.
Creating a style guide takes some time up front, but we have found that it will help you in several ways in the long run. The guide enables our front-end developers to standardize CSS, reducing code bloat and load time. Next, anyone joining the project in the future can refer to the guide for exact styles to use, ensuring that build times for new sections and pages will be faster. Third, design consistency is easier to maintain over time and, because of this, the code base is kept smaller. Finally, a style guide gives the team a shared design vocabulary, encouraging clearer communication and improved quality assurance.