P2 Public Utility

In Project 1 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 2: 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.

Screenshot Your Fortune, by Lee Jisu

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.

Insect Sound World, by Kazuyuki Hashimoto

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.

Sample app from IFTT

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.

Binder, by This is Our Work and Clement Valla

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!

Tea Timer

Learning Outcomes

Requirements

A publicly accessible web-based utility plus:

Shrub, by Linked by Air

Project

Project Kickoff: Mon April 22
Discuss project brief

Step 1: Due Mon April 29
Conduct two "User" Research Interviews to build on your ideas, and/or consider how you may adapt your personal prototype into a public utility.

Step 2: Due Mon May 20
Consider the practical implications of creating a product on the web, and create 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.

Begin coding a basic (unstyled) version of your site based on your site architecture.

Step 3: Due Mon May 27
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.

Step 4: Final Crit Mon June 17
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.

Calendar

Week 8 - APR 22
Project kickoff

Week 9 - APR 29
Research Results
Step 1 Due

Week 10 - MAY 06
Workshop with 최건혁 Pt 1

Week 11 - MAY 13
Workshop with 최건혁  Pt 2

Week 12 - MAY 20
Concepts + Site Architecture
Step 2 Due

Week 13 - MAY 27
Begin translating your comps into unstyled HTML

Week 14 - JUN 03
Comps + Adding CSS
Step 3 Due
Being adding CSS and JS to your products

Week 15 - JUN 10
Refine and finalize project

Week 16 - JUN 17
Step 4 Due / Final Crit

Resources

References