Circles 

mobile experience

Artboard 1-100Artboard 1-100

Circles is an interactive exploration, exploring the different ways people fidget and play with their phones paralleled with understanding how users interact with social media.

client

School Project 

duration

4 weeks

role

Individual Project, 
Concepting, Wireframing, Design, Prototyping

[unex_ce_button id="content_gebx5eb7h" button_text_color="#007aff" button_font="bold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#007aff" button_border_radius="0px" button_text_hover_color="#aec0c9" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#aec0c9" button_link="http://aml8069.cias.rit.edu/wordpress/wp-content/uploads/2017/07/circles_deck.pdf" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]see process documentation →[/ce_button]

-

challenge

So you've scrolled your day away on your various social media feeds, but somehow you didn't come across any of your friends' posts...

Algorithms. Algorithms. Algorithms. The social media giants (I'm looking at you Facebook, Instagram, and Twitter 👀  ) feeds all use algorithms to serve up content that they think you would find more interesting. Yet somehow these algorithms fall short. They serve content that we don't care about, burying our friends' and family member's posts in the deep web.

goals & objectives

With this project, I wanted to have fun experimenting with different ways of interacting and fidgeting with our devices to gain quick, instant access to the content that we care most about. I want to honor the intention behind finding and consuming social media content and create intentional friction that mimics that of a real-world object that we are familiar with.

quickly access content

Eliminate the need to scroll for days or manually search your friends' names. Provide easy, instant access to all of your friends' content, in one convenient place. 

ideate on a suite of fun interactions

Drawing from real-life tendencies and objects, create a series of interactive metaphors as interactions. 

ui patterns

friend list

Give users a meaningful way to interact with their friends

categorization

Help users make sense of the content by enabling them to create meaningful groups

persuasive patterns

conceptual metaphor

Mimic the idea of a rotary phone, helping users to make associations using the app

chunking

Giving users a meaningful way to sort information

-

less look, more feel

Because I wanted the interactions to drive this application, I focused on how the app would feel to use over visual style. I started by drawing circles, and then I drew more circles. I played around with literal representations of a rotary phone and completely abstracting the concept.  

sketchessketches

-

solution

An application that provides access to your closest friends and family’s social media content, all aggregated on one platform for you. Eliminating the need to search for your people, while honoring the intention behind doing so.

With all these sketched circles, and anywhere to go, I iterated through 3 different types of interactions revolving around entering a circle. I experimented with a literal rotary interaction, and then expanded to different ways people like to fidget with their devices.

Interaction 1: Literal

Select the circle of friends you want to see, and drag the group around the circle, unlocking that groups social media content.

Interaction 2: Pull Dot

Drag the circle you want to access to a center “mouth”. Releasing the circle triggers the social media content to be displayed.

Interaction 3: Push Dot

Push the center dot to the circle you want to enter. Release the dot and access that groups social media content.

Feed

A simple, traditional feed of social media content, organized by you. Never miss your friends’ social media content again. Organize your viewing experience by which social media content you want to see, or view it all at once.

circles_comps_2circles_comps_2

conclusion

I had a lot of fun experimenting with creating different metaphorical interactions and dissecting the motivations behind the user's behaviors. 

Post-mortem I would like to revisit the visual design of this project, as well as fully tackle the UX challenges that would come with this app, such as creating groups, editing groups, and onboarding.

Interaction-wise, I would like to create a suite of 5 possible interactions for entering a group to further explore the possibilities of translating intention and user interaction.

[unex_ce_button id="content_yeh519rrf" button_text_color="#007aff" button_font="bold" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="1px" button_border_color="#007aff" button_border_radius="0px" button_text_hover_color="#aec0c9" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#aec0c9" button_link="http://aml8069.cias.rit.edu/wordpress/wp-content/uploads/2017/07/circles_deck.pdf" button_link_type="url" button_link_target="_blank" has_container="1" in_column=""]see process documentation →[/ce_button]

Thanks for checking this out!

Like what you see? View my other projects below →

[unex_ce_button id="content_98w866c19,column_content_09koc4l06" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="##29403A" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://aml8069.cias.rit.edu/wordpress/work/humans-vs-zombies/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Previous Project:
Humans vs. Zombies[/ce_button]
[unex_ce_button id="content_98w866c19,column_content_h4badzjj5" button_text_color="#000000" button_font="semibold" button_font_size="15px" button_width="auto" button_alignment="center" button_text_spacing="2px" button_bg_color="#ffffff" button_padding="15px 60px 15px 60px" button_border_width="0px" button_border_color="#ffffff" button_border_radius="0px" button_text_hover_color="#007aff" button_text_spacing_hover="2px" button_bg_hover_color="#ffffff" button_border_hover_color="#ffffff" button_link="http://aml8069.cias.rit.edu/wordpress/work/circles/" button_link_type="url" button_link_target="_self" has_container="" in_column="1"]Next Project:
Circles[/ce_button]