top of page

Are.na for college students

Application edit of the web version of Are.na utilizing existing principles and stylistic elements. 

Are.na is redesigned considering the existing user base and adding an extension for students to make them feel connected and creatively stimulated by different perspectives, techniques, and works of the student community. The brand identity and feel are carried over to the User interface in the extension/application edit in terms of typographic style, primary & secondary colors, and style of visual elements.

Final prototype

Design Stages

journey.png
research.png
problem statement.png
possible features.png
user flow.png
wireframes.png

UI Library

ui ilbrary.png

Final product

log in.png

Log in screen

The log in screen with a prompt for using the school version or regular version of Are.na.

The student user can log in with their school email and access all the channels in the school's network.  

majors and interests.png

Interests and majors

The next screen after the log in asks the user for their majors and interests to suggest a few channels they could follow from their school's net work. 

feed.png

Feed

An important take away from the user research was the lack of clarity on Are.na's UI system and color coding. The proposed Aren.a for college students proposes breaking down the channel UI system for channels in the following way:

Green: open and editable channels

Blue: view only channels with restrictions on editing

Red: locked channels with limited access, designed as private channels for classes

inside of an open channel.png

Option to edit inside of an open channel

The inside of an open channel (green) has the option to edit, and add blocks.

Inside of an open channel

inside block.png

Comments section made more visible

The existing comment section made more visible to make users feel more connected by getting feedback from eachother.

Inside of a block

The view page of another school with view only channels and blocks. 

The open (green) and private (red) channels are not visible or accessible to a student outside of the school's organization

pratt channels.png

option to filter through majors/minors

View page of another school

pratt inside of blue channel.png

Inside of a view only channel (blue) of another school, the option to edit is not available.

Inside of a view only channel

of another school

Reflections after testing

The ability to connect with students from across the users own school and connect with students from different institutes increased connectivity and allowed users to be exposed to different perspectives. 

​

Points of improvement:

1. The option to switch between the student version and personal version of Are.na from the home dashboard would be more convenient and increase ease in navigation. 

2. Instead of connecting students inside of the whole university/institute, it would be more efficient to connect smaller departments within an institute, ex: illustration program within a design school.

​

Time frame: 4 weeks

Spring 2023 Digital Product Design 

Group members: Riya Shah, Marion Jun, Angel Yu

bottom of page