VIVA encourages people to explore the meaning of life through drawing.

UX design / Visual Design / Product Management

About VIVA

Viva la Vida is a start-up non-profit organization aiming at promoting expression of life through drawing. By asking people "how would you draw your life?", VIVA intrigues people into digging deeper into their own reflections of life meanings. The collected portraits of life are called VIVA Drawings. By now, viva has been collected more than 2000+ paintings in 20+ different countries.

Langhua Mobile Website
The Challenge

How might we enhance the drawing uploading process in exhibitions?

The Solution

A mobile website that allows for quick uploading of images and branding.

The Team

Shuyu Li

Hanyu Gong

Yan Zhang

My Role

Interaction Design

User Flow


Task Definition

I first identified three main tasks users need to complete using this H5. The first task is uploading images, the second is participating in the lucky draw. Main purposes of our organization are to allow for quick upload and direct saving in our database and to encourage people to follow us on social media.

Design Goals

1.    An easy and satisfactory uploading process
2.    Branding

Design Solutions

1.    Allow for re-upload images
2.    Encourage users to leave their contact information before they can save the image 
3.    Have QR Code that links to our media (wechat public account) after users save the image

Redesigning UX: “Drawing for you” Mobile Website
The Challenge

How might we draw a picture for you based on your life choices and life philosophy?

The Solution

A mobile website that features four Q&A incorporated in a storyline to match your personality to one of our drawings.

The Team

Shuyu Li

Huan Lu

Jingyun Shi

My Role

Refining UX


Drawing for you is a mobile website we created for brand promotion. It features four Q&A incorporated in a storyline. The Little Prince is guiding you to visit four different planets. At all the planets, you are facing various life choices. You have to choose between adventure and common life, between love and freedom, between trust and mistrust, and between yourself and the world. A VIVA drawing in our database is selected to match your personality at the end.

My teammate (also the design lead of VIVA) Shuyu Li has designed a first draft of the mobile website. It is visually appealing and easy to use. However, it has some remaining usability issues, as well as product features and content strategies that need iteration.

Redesigning Current UX
The Landing Page

The landing page does not contain a title or a theme. Moreover, the button on the landing page is different from the buttons used in the rest of the pages. 

I added a title to the page. I organized the buttons to produce one set of UI only. Different colors are used to indicate the difference in importance of the functions.

The Main Q&A Page

The information displayed is overwhelming and unstructured. Users may have trouble finding the needed information efficiently. Besides, it is not obvious that the two rectangles are buttons that can be pressed.

I reduced the amount of information displayed to avoid redundancy and cognitive overload. In the new version, only minimum information (question, a picture, and two options) is displayed. I also redesigned the buttons to make them a stronger indication that the buttons can be pressed.

The Result Page

The intention of the result page is to offer a personality description in which people can see themselves in. However, our preliminary results suggest that people do not agree upon the description in the old version, partially because it is too thorough and does not leave any room for further interpretation. Meanwhile, this page does not provide a channel that direct users to our homepage. 

In the new version, we emphasize the drawing instead of the interpretation of drawing since the former contains our organization value. Also, we add a QR code that invites people to follow us on social media. Another button is added to direct users to our articles.

Design Alternatives
Visual Design

Other than UX design, I also designed posters for offline exhibitions and branding.

The theme of the exhibition is Life Varies(生命万相). The theme lies in the DAO philosophy: dots make lines, lines make space, and space makes the universe. In the poster design, I introduce the elements of dots, lines, space and life in different forms. 


VIVA is definitely one of the most dynamic and efficient teams I have been in. The working experience has expanded my knowledge depth and span. I have learned a lot from my peers. I not only strengthened my visual and UX design abilities by learning from other designers but also learned product management skills and branding techniques from people working on the same project

©2018 by Yu Zhao.