Hylo

A new kind of social network that helps real communities create, together.

Hylo was looking for a designer to take on the challenge of redesigning their products user interface, rethinking the user experience, and creating new features for their product.

In order to achieve this, I designed Hylo to be simple, intuitive, and clean. I stripped away unnecessary visual elements, constructed simple intuitive interactions and leveraged animation to guide the user's attention throughout the entire experience. 

 
 
 
 

Animated Prototype

Programs Used: Adobe Illustrator, Adobe Photoshop, Keynote, Premiere Pro. 

 
 
 
 

Community feed

The community feed is where you can see what's going on in your community. See what cool things people are up to, what they need help with, and interesting resources they want to share.

 
 
 
 

Creating a new 'Seed'

I broke this down into two screens in order teach people that there are three options when posting a seed. It mitigates the feeling of being overwhelmed with information as well.

 
 
 
 

User Profile

The user profile was visually designed to maximize storytelling and personalization. Big profile picture so you can recognise the user, short bio, and bite-size information of who this person is.

 
 
Hylo_portfolio-08.png
 
 

Editing User Profile

The profile editing experience was designed to look and feel like a seamless transition from the profile view. This allows all elements to remain in the same place, reducing confusion of the user.

 
 
Hylo_portfolio-09-09-09.png
 
 

Creating a community

In order to avoid overloading the user with forms and information, I broke it down into three steps.

 
 
Hylo_portfolio-11.png
Hylo_portfolio-12.png
Hylo_portfolio-13.png
Hylo_portfolio-14.png
 

Settings


Key Role: Interaction & Visual Designer

Deliverables: High-Fidelity wireframe flows and engineering spec documents.

Team: Edward West (CEO), Ray Marceau, Lawrence Wang, Minda Meyers.

Date: 2014

Length: 4 Months