Who is DEMO? 

As a critical design agency, the Design and Engaged Media Organization places students as consultants in real-world community projects. DEMO practices community, human, and ecology-centered design and design thinking. To drive projects that meet our the needs of stakeholders across Studiolab’s partner teams, we mobilize the resources of inter-campus infrastructures and also provide methods for agile design practices, transmedia knowledge, experience design and strategic storytelling.

DEMO’s teams develop critically-minded design practices in support of the needs of community partners across many areas of need, including anti colonialism, antiracism, anti-patriarchy, inclusion, accessibility, and social equity others. Current partners include Black Farmer Fund, Her Whole Truth, Health Access Connect, and Black Belt Citizens. 

Who are our partners? 

Our partners and stakeholders are three-fold:

1. In-class students
2. Current and potential future community-partner organizations
3. Students outside the classroom who may be interested in joining DEMO as a project team.

DEMO aims to help these three different stakeholder groups with their ultimate objective: develop critical design practices for community partners across anti-colonialism, antiracism, anti-patriarchy, inclusion accessibility, social equity and more areas. 

For this design project, we tailored our goals to the needs of each stakeholder. We hope to connect students in the class to the proper resources they need to succeed in their projects. This process of enablement includes teaching transmedia knowledge, inclusive critical design, and strategic storytelling to drive forward stakeholder needs. 

For the partner organizations, we hope to connect them to resources to be able to understand what the class and project team achieves, by creating a portfolio of past work. This collection will help recruit potential partners who are interested in our work. We also want to make sure current partners have an area to view our new work, and so continue to understand the full range of capabilities that our teams can offer in support of their goals. In sum, we aim to create continuity for partners once each semester ends.

Project 3 Report

Integrating the three stakeholder groups, we supported in-class students, DEMO project team partners, and external students with the process of starting and running a StudioLab project. We seek to accomplish the following: 

• Systematically provide strategic storytelling and critical design solutions to different partners 
• Set up and display an information architecture that communicates the why, what, how 
• Establish partner stories, missions, objectives 
• Communicate effectively with the DEMO project team leaders like Ben and Megan 

Design Challenge

Our team must create an aesthetic and conceptual identity for DEMO, but also link stakeholders with important technical design and project management resources. As we are starting DEMO from scratch, we think about how we might:

1. Story-tell DEMO’s journey among our stakeholders
2. Extract a conceptual identity which allows us to form a dynamic style-guide and brand identity
3. Carry those aesthetics over into the DNA of our future  stakeholder-driven deliverables

Understanding the Problem 

To better understand how we could serve our current student teams, we needed to familiarize ourselves with how they were approaching their cause. For instance: what challenges did they identify? How did they plan to tackle them? 

We decided to conduct group interviews with the student teams. First, we sent out Google Forms with fewer, more open-ended questions. Then we used the responses to craft more specific questions to guide our group interviews.

The group interviews succeeded in helping us gain insight into the range of challenges each student team faced. We initially expected to be able to create a list of generic resources for projects (such as launching a website on the university’s WordPress service). However, we soon realized that the needs of each student team resulted from contexts specific to their partners.

Using the CAT Lens 

Conceptual: We imagine a process-driven approach that our teams and partners can use to engage in community and human-centered critical design, enabling continuity across student engagement cycles.

Aesthetic: We want to create an easily accessible design, with accessible language which simplifies jargon, enabling engagement with all potential stakeholders. We are still working on this portion as we move into other deliverables, but we keep in mind the importance of blending technical approaches with an open, warm aesthetic.

Technical: We will be creating a website design on Figma and then implementing the website on WordPress. Beyond the website, we will be creating social media graphics on Canva. 

Our Approach to the Problem 

Generally, our approach follows the StudioLab framework: “fail fast to succeed sooner.” We will move through storytelling, aesthetic concepts, and technical resources by continually iterating and putting forward MVPs and using feedback to improve on our initial products. Our approach consisted of using agile project management techniques to first establish user needs and frame our issue, then create a prioritized backlog (with associated timelines), and then start creating sprints that focus on shipping functional deliverables. We use this method so that we can get feedback as soon as possible, and rapidly adjust to changing needs of our stakeholders. As we are in the HEAR portion of the project, our current approach focuses on identifying the issues and conducting continuous cycles of user interviews and research. 

1. HOW TO START DEMO PROJECT 

First, we focused on how we can help new student teams and new potential students start running a Demo/StudioLab project. The discovery process also serves part of our own research within the HEAR phase to understand what components we need to start our own design. We are approaching things through a SCRUM framework and producing a report to help teams understand how to start their projects. 

2. DESIGN PROCESS

After taking the necessary steps to kickstart a Demo/StudioLab project, we have identified a series of steps when designing websites for better strategic storytelling: 

 

A. Low-fidelity Prototyping: Paper prototyping

Before drawing any rough sketches, first conduct an initial card sort used to categorize the general structures of your website. After sorting out the information architecture, create a rough sketch of how you want your website to look. We recommend using pen and paper, or markers and whiteboard: keep things simple at this stage. Use this sketch as an opportunity to test the card-sorting process and the information architecture of the website, quickly visualize your ideas, and iterate over them. Paper prototyping allows you to rapidly test with various website designs and potential layouts. During this step, we thought critically about user experience design, considering how the layers of UX including experience design, information architecture, and information design interact with each other.

After paper prototyping, translate the sketches, wireframe, and layout that your team selected into a website- prototyping software like Figma. Create a desktop frame on Figma and decide on a basic, provisional, style guide (do not worry about the dimensions of the draft, this is just a mid-fi prototype). A style guide may include design elements such as color theme, typography (text library), etc. After deciding on these elements, start building parent components for the website. Parent components are used to control duplicates: “child” instances copied from the parent. Any parent component can be replicated across multiple screens (such as the navigation bar, footer, etc), and then any edit to the parent component will also show up in the replicated instances. Building parent components is important as it helps unify the overall website design, and simplifies the editing and ideating process, as changes can rapidly be visualized across all the sub-sections of a design.

 

B. High-fidelity Prototyping: Figma Hi-fi Design 

After finalizing the style guide and parent components we moved on to the final stage of implementing the website. 

While working on the comic deliverables for Project 2, we found many parallels between the help desk of Mann Library and DEMO team. As result, this iteration is inspired by the tour we took of Mann Library. We want to create a welcoming, open space; this direction would include a lot of light colors and a natural-looking design. Thus, our color scheme is now white with a gradient of green, brown, and yellow, reflecting the natural world of trees, grass, and air. The information architecture prioritizes a streamlined and easy-to-follow experience.

 

 

Deliverables with DEMO team leaders

Using our initial storytelling and aesthetic mapping, we have completed a few deliverables for the DEMO team for clubfest. We will continue to work towards additional deliverables and communicate with the team throughout the semester.

 

 

Final Presentation

On the final day of class, all teams presented their work to the other teams and partners, sharing their design process, key deliverables, and reflections on the semester-long collaboration.

.