DSGN 234: Art of the Web (2021)

Building on an Interface

Overview

Are.na, a platform for organizing research, was created around the idea of generosity. Are.na aims to provide a healthy way of using the internet and to help users organize their research. For this assignment, we worked within the constraints of an existing product (Are.na) and designd and prototyped a feature to it.

Timeline

3 days

Team

1 student

Role

Interaction Design, UX/UI Design

Tools

Figma

Background

This was a concurrent individual assignment for DSGN 234: Art of the Web at the University of Pennsylvania. In this design course, we unpacked the history of the internet and develop a framework for crafting memorable interactive experiences. We mixed language from graphic design and journalism to develop thoughtful narratives that come to life through interaction. Understanding the difference between a topic and a story is equally important in both disciplines, and we applied this thinking to a variety of screen-based projects.

Timeline

Day 1

Identify existing visual system

Day 2

Brainstorm and sketch ideas

Day 3

Create prototype

 01 — The Existing Design System

Learning Goals

1 — Develop a feature that’s built on an existing product

2 — Work within a visual language and system

3 — Reflect on issues in the current technological landscape

4 — Explore the wireframe to prototype process

Identifying the Existing Visual System

As this assignment called for adding a feature to an existing product, day one was spent creating a style guide with assets from the Are.na mobile app. The style guide included typography, a color palette, iconography, and UI elements like blocks and navigation. These assets becaming the building blocks of our new proposed features, as a goal was to work within a visual language and system.
 02 — Brainstorm

Initial Research

Once we had a clear idea of Are.na's visual system, we began brainstorming potential features to add to the platform's mobile app. To prepare for the brainstorm, we read app reviews, read through Are.na's official feedback channel, and downloaded the app to identify shortcomings.

Some shortcomings that I identified were the option to see what's inside a channel or block before opening a new window / screen, adding multiple blocks to a channel in bulk, and the ability to pin blocks.

Sketching Ideas

After identifying potential shortcomings and sharing them to the class, we entered a 15 minute brainstorm and sketch session. The goal of this brainstorm session was to ideate and sketch out as many potential features as possible, without thinking about feasibility or logistics.

Small Group Feedback

After our rapid brainstorm, we broke out into groups of 2-3 to discuss our potential features, give feedback on feasibility and a high-level idea of what the feature design would look like, and identify our favorite(s). While I was drawn to the idea of previewing a channel via a horizontal scroll, I found that this ultimately took away from the user opening the channel in a new page. Thus, I adapted my initial idea to a preview feature that would, on click, display the first few blocks in a channel that could cycle on its own until the preview was closed.

The Feature: Channel Preview

The channel preview functionality allows users to preview channels of other users or on their feed. The user taps the preview icon to expand it and underneath sees a preview of the first 3 blocks in the channel. The blocks cycle through automatcially. When finished, the user can collapse the channel view by tapping on the preview icon once more.

03 — Prototype

In Figma, I created a working prototype of the feature for two use cases, to preview channels on someone's profile and on a user's feed.

04 — Takeaways

Closing Notes

I really enjoyed this exercise in thinking about how designs are continuously updated, added to, and edited to create a better user experience. In previous projects, I've found myself redoing or creating new visual systems and not having the constraint of an existing visual system. Thus, in ideating and developing this feature, I asked myself "Does this feature addition make sense with Are.na's mission? Is the design consistent with are.na’s branding?"