Group project. Jun-Aug 2017
Pocketderma
Role
video editor, icon designer, user interface designer
Tool
Adobe After Effects, Premier, Illustrator，Axure RP
Type
video design, UI & UX design
Skills
researching, video editing, ideation, sketching, graphic design
Time
2 month
Project Mockup Website: https://ww7tr2.axshare.com
Introduction
PocketDerma is an app that specifically caters to your needs, and offers expert advice to find a routine that rejuvenates your skin.
It helps users that struggle to improve their skin condition by keeping track of their products, compare what’s on the market, as well as providing a channel for you to receive expert input for any questions you may have.
User Test
User test was made before we published our project. Google Forms were made to analyze different users' opinions about our mockup and what we should change.
Mockup Design
Based on the previous wireframes, we made the final mockup. We used Adobe Illustrator to do the none-interaction version first. After we all finished and checked the style, we added interactions by using Axure RP.
To test our project: https://ww7tr2.axshare.com
Prototyping the Interactions
Our project is of six functions. To avoid some unanticipated mistakes, wireframe was made first. We decided to use “Shopping” first instead of “Product”, but when designing the function, I felt “Product” was more suitable for our projects’ concept because we wanted our project to guide users, not promoting products. After the discussion, a change was made at last.
During this step, we also decided which font, color and button styles to be used so that we could all follow with the same style when doing our own parts.
Research and Proposals
After the brainstorming process, we chose to develop the “Health” “Lifestyle” and “Fitness” domain. Domain starting from different types of user researches and using personas to show the user feedbacks.
_%E9%A1%B5%E9%9D%A2_6.png)
_%E9%A1%B5%E9%9D%A2_1.png)
My Role
My roles in this 5-person team were UI designer, icon designer, and video editor. I designed all of the icons of the mockup and helped to edit the video. I focused on the “Product” pages design in this team project.
Final Showcase Video