public, utility

In Project 2 we considered what the utilities we use in our daily lives are given our digital condition, and how we may create a more personalized utility freed from commercial and practical constraints. In Project 3: Public, Utility, we'll consider how we can create a usable product (utility) for others on the web. In this project you have the option to modify your personal utility, or to create an entirely new utility, into a simple web-based (HTML) product that anyone with a computer can use.

In adapting our products from a personal to a public, i.e. shared and accessible, utility it will be important to think from others' perspectives while maintaining our own points of view. What are the boundaries between accessible and uniniteresting? How do we infuse personality into a digital product without it feeling prohibitive? To try and answer these questions we will gather research via interviews.

Furthermore, this adaptation will be constrained by the practical and technical requirements of writing HTML/CSS/JS code. While Figma and Protopie makes it (arguably) easy to visualize and tell the "story" of our applications, translating these prototypes into functioning and usable products is another task all together. Much of the web relies on complex frameworks that access databases, apis, and other complex web applications. As we are novice programmers, part of the challenge in this project will be adapting existing services (IFTT, Google Docs Editor Suite, email, etc.) in creative ways.

One thing to keep in mind is the visual control we have over the web is much more complex and fraught than in design software. Compared to your prototypes your designs may be a bit rough! Based on your research, ideation, and technical constraints, your project can change radically.

A practical utility can serve a practical "utilitarian" use, but it can also serve a conceptual and intellectual purpose. Oftentimes these ideas – function and theory – are put in opposition to each other unecessarily. Your Public Utility can be just as valid by creating a thought experiment, raising awareness, or sharing important information as it would if it helped you manage your budget, keep track of medications, or find a route on a map.

We will take these constraints as productive opportunities. Considering how much of our products are driven by investment backed startups and the grab for capital, we will embrace the freedom our low-tech products provide!

Requirements

    • Audience is a single, named person
    • Designed for a mobile device
    • Site somehow responds to user input or interaction

Objectives

    • Foundational HTML/CSS/JS coding
    • Introduction to user research tactics
    • Learn how to prepare designs to "handoff" to developers
    • Consider how to adapt exisiting technologies for your own needs

Deliverables

    • Web landing page which links to your project with a short description of your utility
    • Two user interviews informing the public/web adaptation of your utility
    • Static mockups (designs) of your utility

Schedule

    • Level 1: Interviews
      • Conduct two "User" Research Interviews to build on your ideas, and/or consider how you may adapt your personal prototype into a public utility.
    • Level 2: Proposal
      • Based on the feedback you received in Step 1 from your interview subjects and your classmates, create a proposal for the Public Utility project. Make sure to take into account the web medium (both the potentials and limitations of making something "real") when creating your proposal.
        • Consider the practical implications of creating a product on the web, and make a site architecture for your product that takes this into account (showing connections to third party services like Google Docs, Firebase, or IFTT as needed).
      • Based on this site architecture, create wireframe sketches of 3 representative screens of your product which describes how you will adapt your utility to the web.
      • Prepare a short overview of your proposals which explain your idea – including imagery that helps us understand what you envision (this can describe the "problem" you're addressing, your "solution", or similar apps/websites your project may be in dialog with) along with your site architecture.
    • Level 3: Site Architecture
      • After receiving feedback in class begin coding a basic (unstyled) version of your site based on your site architecture.
    • Level 4: Refinements
      • Refine your wireframes into high-fidelity design using Figma. Your designs should have a visual identity, "interaction model", and "design system" at the their core.
      • Create 2 visual directions and add simple interactions to them in Figma.Begin adding CSS styles and JS interactions to your website based on your refined comps.
    • Level 5: Final Crit
      • Select one visual direction and translate your design into HTML/CSS/JS code. Upload your project to the web, and prepare a short presentation on it to share with the class.

Workshops ▾

Resources ▾