Interaction Designer


Responsive website design




Family. Life. is a collaborative student project initiated by Syracuse University’s Newhouse School. The project explores the feelings, relationships, obstacles, and identities of families through visual stories produced by photography schools around the world.

This project takes place as a form of design workshop which a team of students (including me) works collaboratively over three days. The project includes the responsive website, print poster, social media, periodical, and a photobook. I'm one of the web designers in the team.

For the live website, please check Family.Life.

Dentify objective and problem

- Over hundreds of projects and stories need to be sorted into compelling tag/filter system.
- Overall design needs to be welcome for the global audiences.
- The language usage needs to be thoughtful and reachable.
- The homepage needs to direct the audience to the stories.

Process + wireframe 

We divided into team of four to build site wireframe. I'm on the homepage team.
Since the tight deadline, we only have a half day to develop the wireframe. We quickly shift to digital wireframe after a quick hand sketch.

↑ User Journey

The biggest problem we need to solve for the landing page is: it needs to direct the audience to the stories. The interaction should be easy to understand and also insightful. We want seamless and immersive interaction for the user.

After brainstorm and hand sketch ideas, we decide to use descriptive word (on the landing page) to direct user. Those descriptive words also use as the filter for the stories. When the user clicks on the word, such as “caretaking”, it directs the user to the stories under “caretaking” tag.

↑ Using descriptive words to direct user

During the low-fidelity wireframe stage, we try to design the homepage in a few different styles.

↑ Low-fidelity wireframes for the website

As we develop the wireframe and user flow, we decide to delete the "filter section" on the collection page. Instead of filter bar on the collection page, we reorganize all the stories and targets on few descriptive words. All those words are under the navigation bar. So the user could also access the desired story tag in the navigation.

↑ The filter section under the navigation 

↑ Wireframes for the website

The most important user interaction is direct the user to the story. Throughout the homepage design, we designed four solutions for the user to access the story.

↑ The 4 ways to direct users to the story page

©Xiaoxuan Liu 2020. All rights reserved.