DreamPaint
Type: Visual Website Design
Role: Project Leader, User Researcher, Interaction&Visual designer
Timeline: July 2015
Team: Zhenyu Ye, Nuomeng Zhang, Michelle Yao
DESIGN SUMMARY
Dream Paint is an interactive Website with visual shock published in 2015. My team and I expect that Dream Paint could not only be a chic visual website but also to provide more inspirations as wallpaper as well as other visual uses, even for further business use like graphics production or an online Plug-in for designers’ daily works and inspirations.
It was a summer session project during my study in the Centre for Digital Media(SFU). As time was limited, we used a condensed version of the user-centered design process to design our solution in under 5 Days.
PROJECT STATEMENT
In the next 2 weeks, I discussed with my classmates and did a brainstorming. It was the spectacular works of Ruslan Khasanov, a visual artist from Russia, inspired me. After I observed her works done with pigments, oil, and soap, those three elements create wonderful pictures together, it seems dreamy and romantic. I was inspired by this visual expression and create my design concept:
A visual website that based on UGC, which could generate a motion graphic that interacted by user’s mouse move or gestures.
INSPIRATION
In the first design course in CDM, the professor asked us to draw the three most important factors for ourselves. Most of my classmates wrote down “imagination”,”genius” or”creativity”.Indeed, “imagination” and”creativity” are of vital importance for designers, however, we often get stuck producing new ideas. This inspires me to make an interactive visual product to spark inspiration.
DAY 1
Project Pitch
In the first day of our project course, Each student was given the opportunity to present ideas for capstone projects. I demonstrated my idea of “Dream Paint” and it stood out from the whole class. Then I found my team member —— Michelle, our project manager, and Zhenyu Ye, an excellent programmer to work out this product together. After group discussions & brainstorming, we decided on several main themes we would like to conduct further researches and summarize what we need to do in the next days.
DAY 2
User Test Of Physical Prototype
As time was limited, we decided to start with users feedback to guide us. We made a physical prototype which combined by pigments, oil and soap like Ruslan Khasanov’s work. We interviewed the test use to help us make features of the websites clearer. I also record their creations to inspire me about the visual design.
After the user test, we analyzed our user testers’ answers to help us create and prioritize the features of the website. We also record their behaviors during the testing, it guided us to design the interactive mode of our website.
From the users’ feedback, the main issue is that there is little connection between the picture and the creative one. Our solution is to identify the “mood” of the picture by facial expression and surrounding recognition. The final visual website is based on “mood”, and the user can adjust all the parameters to create their own works.
I made a design metric graph to guide me design the interactive mode and the visual website, and a bullseye to prioritize the features.
Design Metric
Bullseye
Sitemap
DAY 3
Design Process
DAY 4
Visual Design
I confirmed the format we would like to generate: a main element (as a ball), few surroundings(as the fragments in the picture), and the overall colors and atmosphere, expressing the dreamy feelings and emotions.
DAY 5
Presentation&Thoughts
Instead of solving daily life problems, “Dream Paint” is a creative product. As time was limited we change the common user-centered design process. We did a physical prototype first, and use the feedback from user test to guide us design our project. This try efficiently helped us to decide our final features of the website.
As the interaction designer, I designed the interactive mode followed by user behaviors in our user test. This project gave me a chance to get a deeper insight into interaction and human behaviors.
