2017
PORTFOLIO Che-Yu Wu Designer / Engineer , 22 years old , Taiwan Monoame Design
Electronic Portfolio: wecheyu.monoame.com
I certify that the work included in this portfolio is my own original work. Work included which was conducted as a part of a team or other group is indicated and attributed as such- the other team members are named and a true description of my role in the project is included.
ORTFOLIO
PORTFOLIO PORTFOLIO
Che-Yu Wu Catalog
1. Selinko & Remy Martin’s APP 2. n3xtcon CIS design 3. Taipei Soundscape program 4. Interactive Musical Chrismas Tree 5. Cancer Treatment 3D Animation 6. AED Solution - You! Now! Hero!
PORTFO
PORTFO
OLIO
OLIO
Design is more than circles and lines, It is observation that enriches one.
Extract figures from the world, Upon which endow meanings and stories.
Selinko & Remy Martin’s APP
UI Design / 3D Modeling
Client: Selinko / Remy Martin
Seliko is a Belgium-based start-up. For this project, I created a campaign app interface for their cooperation project with Remy Martin, exclusively for the Chinese market. Because of the popular adulterated spirit in China, Selinko would like to verify bottles through NFC and added a destructible chip to the cap. Upon opening of the bottle, the chip is destroyed, and users with this new app will know if a given bottle has been reused by scanning. Upon reception of the UX flow, I proposed to extend Remy Martin’s visual identity in addition to providing a report on the proposed style. I thus presented a moodboard containing the dynamic concept of the interface and definition of the elements involved while using FUI-oriented design. Eventually, I produced a minimalist and yet modern interface based on the complete UX plan and client’s demand.
There were however two challenges. One was to keep the interface simple and sophisticated, which served this international brand well. The other was to produce a 3D model together with fancy rendering and animation.
COLOR SETS
UI/UX Animated-Guide
Far
60%
Bottle is
genuine
and has never been opened
Middle
80%
Near
100%
The left and the Right side Dot will Never Move but the active Dot will turn GOLD Create a force to push the aside Dot,Also the dot far from Active one will be half-Dispearing.
Bottle is
genuine
and has never been opened
Bottle is
genuine
and has never been opened
You should operate the Background as Three solid color shell and arrange Z-depth in White-Gray-Black Arrange, The operation swipe left will show the continue part of the shells.
Challenges There was large-scale fixes to the 3D model because Remy Martin hoped the presentation of the bottle to be as close to the real one as possible. My previous experience with interior design and factory equipment allowed me to produce delicate models, which were used in the interface as well as the 3D animation. The client demanded minimal changes made to the brand essence. For example, diamonds were not to be seen in the interface as this shape is similar to the label. The client also wished to concision and clarity in the visual workflow and guidance, so I removed excessive elements and finished the interface with black as the color motif and gold as highlight. After numerous discussions and fixes, we accomplished an exquisite and tasteful work. This was the masterpiece among the projects in cooperation with Selinko
n3xtcon CIS design
CIS Design / Website development
Client: n3xtcon
N3xt is a LA-based innovative technology forum. N3xt represents the LA spirit, namely entertainment, technology, and entrepreneurship. Its invites leaders from major industries to its forums, including Disney, LA Times, BuzzFeed, NBCUniversity, and others, where the speakers share their experience. The request was to have a complete image which could be extended to both the website and ofine prints, so my task was to renovate the original brand image based on the four triangles in the logo. After several proposals, the client decided on the concept of overlapping to redesign the logo. The new logo is a folded ribbon overlapping itself, signifying the interaction between humans and between humans and objects will create unique possibilities, which is done by n3xt’s effort in linking people together.
Before
After
= Unleash the Future Our future is the intersection of different people and the creation of the possibility of the intersection, we unleash the future. 1.84x
x
1.3Y
Y
Preferred Exclusion Zone
#E7316A
#88418D
#5853A1
#485FAB
Ashley Chang
Ashley Chang
Director of Marketing
Director of Marketing
626-345-4800 ashley.chang@n3xtcon.com
626-345-4800 ashley.chang@n3xtcon.com
Challenges As for the website, we adopted the concept of tectonic plate and oating, creating uorescent objects in the dark blue space and adding tension to the image. Furthermore, the page appears lively because of the minimalist layout and bold geometric shapes. With Pixi.js, we created dynamic effects for the planets and put them in the animations and backgrounds of other pages. I was responsible for the big picture, visual design, frontend and backend web development. Within six months, I completed brand guideline and web page design as well as establishment.
Speaker Page Design
Index Design
Taipei Soundscape program
Visual design / Website Development
Client: Taipei MRT Ministration / HarvestMusician Studio
This project was in cooperation with Harvest Music Production. Together we ordinated the 2017 Metro Soundscape Contest, hoping to collect musical works from local musicians and providing sounds exclusively belonging to the metro stations. We collected natural sounds at popular sites such as Dongmen, Songshan Airport, Longshan Temple and recorded sutra chanting, vendors’ greeting, and many other sounds familiar to residents of Taipei. The Department of Rapid Transit Systems hoped to play these sounds at each station upon approaching of the car. My main responsibilities included planning and developing the image of the web page. The city government originally requested a simple website containing application information, but I proposed to do things differently when I learned more about their needs. It would be a shame to use the recordings as mere references. Those sounds were exactly what people tended to ignore in their lives. Wouldn’t it be better if we could play back the recordings and remind passengers of their association with the communities they lived in and guide them to explore those minute details in life?
Sketch concept of scene explordsfaation and mixing panel
Challenges To enhance user experience, I focused the web design on two things. One was to incite users’ curiosity about the environment and then prompt them to go on exploring the sound and landscape. The second point was to allow non-competitors to create their own music and thus engage them in the page content without their leaving the page immediately after realizing they were not part of the competition. A real-time music panel was embedded to allow visitors without musical knowledge to create music by clicking the keyboard, adding accompaniment and ambient noise. This feature also allowed them to create something unique to their imagination and joy.
Interactive Musical Chrismas Tree
Leader / Arduino Engineer
Interactive Design project I led six people from the Marketing Department of Student Union on coordinating a one-of-a-kind Christmas event by building a super huge tree. I bought some Arduino and relevant equipment for this 10-foot tree. We did not just put on strings of LED light bulbs and call it a day. Aside from the programming, my role as a leader meant I had to distribute works among the seven of us and communicate with my team and the lighting crew. It was me to add the twinkling effect based on my knowledge of piano and musical games. I designed an input interface and arranged the twinkling. The project received instant popularity online as well as attention from the university and media. On Christmas Eve, I led my team to put on a show in front of the library and attracted more than 500 students to the venue.
Photos of control panel and testing for program to control lights We removed the control boxes attached to the LED strings and attached them to our own control panel. By setting the seven-layer lights to a piece of music, we turned the Christmas tree into a high-tech interactive device.
Cancer Treatment 3D Animation
3D Modeling and Animation
Client: Chang Gung Memorial Hospital This project was a request from Dr. Wei at the hospital. His team needed an animation to demonstrate how graphene could be used in treating brain tumor. They would use ultrasound to open blood-brain barrier and induce medicine particles by magnetism to specific locations. I used 3DMax to create renderings, precise 3D models of surgical equipment, and made several attempts to recreate the view inside the veins. To ensure a high-quality animation, I consulted the medical team many times and set the Discovery animations as my benchmark while reading medical papers. This project took a month to finish. From the script and story board to animation production and editing, I did it all. The biggest challenge was biological images and telling the story in two minutes. The first version was fast-paced and caused difficulties in understanding, so the final version became slower and I ensured the major points had been given sufficient time to elaborate. The animation was later used on a press conference and released online for public access.
AED Solution - You! Now! Hero! 2016 Smart City Hackathon This Hackathon was organized by Industrial Bureau, Ministry of Economic Affairs. Within 24 hours, my team and I had to come up with a design, collect data, and we found the reasons why the 300,000 AED devices around Taiwan had been used about 70 times on average every year, which was way lower than those in Japan. We attempted to solve the problem from three perspectives: user, context, and interface. Thus, we embedded a positioning system to the emergency smart phone attached to the AED device, which would then sound the siren attracting people nearby to the person in need. This year, there were more than 100 teams in the competition, and our team won the Judge Panel Award. I was responsible for leading a team of medical students and designer. Within the time limit, I produced an exquisite motion graphic display board and a working model of our AED device. In order t sound the device, I established a frontend and backend system to support the interface of the emergency center, so we could perfectly demonstrate the full functions. Our success at the event earned the opportunity to speak with SECOM, the organization responsible for installing AED devices throughout Taipei City. I hope to further develop the design, so the actual use of AED devices in Taiwan could be higher, which in turn will save more people.
70-100 of 300000 AEDs is used every year
For more recently works, please visit Electronic Portfolio: wecheyu.monoame.com