• UX/UI Mobile AppIdea Box

    View project

    ×

    Idea Box : Mobile App

    User Experience Design : UX/UI


    About

    I decided to choose this topic because I thought about a way to save ideas from waste. In so many occasion, we find creative to be in the situation where they come up with ideas, solution or inspiration but because they are not too sure or certain about them, they just forget about them and move on to other ideas or projects. Idea Box provides opportunities for designers or other creative fields to keep track of their ideas and help restructured their working-space.The name Idea Box metaphorically refers to the creative ideas getting out of their place of origins (brain) ,which is represented by the Box in this App.



    Tool used

    • Adobe Photoshop CC

    • Adobe InDesign CC

    • Adobe Illustrator CC

    • Adobe InDesign CC

    • Adobe XD CC





    Personas



    Sitemap



    Low Fidelity Wireframes


    User Journey Map


    Use Case Scenario


    Main Features App Flow


    High Fidelity Mock Ups


    Guidelines



    Social


    Prototype : Demo Reel



    Test Prototype

    Challenge

    We live in a society where innovation and invention are abundant. People are coming up with so many innovative and revolutionary ideas in order for our society to developp that in the process, so many of them are left to waste. There're yet proper applications in the market to help us monitor those ideas and concept in a structured environment.

    Conclusion

    After working on this project, I realized the importance of monitoring ideas as a whole. My goal was to make users conscious of how important preserving their ideas in a well structured environment, had some repercussion in their work. By saving my ideas down and being able to retrieve it in a short amount of time, I was able to be more creative and come up with better project for my clients and for myself.

  • Mobile Web Development UI/UX MINI Cooper Tracker

    View project

    ×

    Mobile Web Development

    UI Design UI


    About

    Mini Tracker is the perfect app for mini lovers. The purpose of this mobile app is to help Mini Cooper aficionado to be able to track all models for the Mini Cooper brand. Using Mini Tracker will solve that problem by giving its user the ability to track their favorite Mini Cooper model mention earlier. By showing them on a map and by listing them by categories.

    Tool used

    • Sublime Text

    • Adobe XD

    • Adobe Illustrator CC


    Moodboard

    Problems

    Target Audience

    Personas

    User Analysis

    Sitemap

    Wireframes

    Taskflow 1

    Taskflow 2

    Taskflow 3

    Final Design

    Branding

    Styleguide


    Test Live

    username : user0

    password : pass

    Challenge

    The challenge for this illustration was the type of hair my model reference had. It was a little bit unusual because it was kind of imposible to reproduce the texture since it was dark.

    Solution

    I decided to take the cartoonish approach and try to have light reflection on some part of her her to make it look like it had some shape. Overall, it is one of my favorite illustration that I have done so far.

  • UX/UI Build Your Own Plate

    View project

    ×

    Build Your Own Plate

    Food App (iphone/Android)


    About

    Build your own plate is a foody App build to help people find restaurant based on their needs and personal choice and selection. Compare to a lot of similar Apps, BYOP makes the experience interactive and fun by having the users build their plate.For people who likes to cook, the App can also be a good way of trying different recipe and food combination. The algorithm that the App uses makes restaurant browsing even more faster and fun. Monthly update will be added to the App to make the experience vivid and also to please the needs of the various users throughout the year.

    Tool used

    • Adobe Illustrator CC

    • Adobe Photoshop CC

    • Invision App


    View Project


    Personas


    Sitemap & Taskflows


    Wireframes


    Branding & Typography


    MockUps


    Challenge

    As far as user testing, I had a lot feedback concerning the idea that I had originaly which was to focus only on asian food since I am a huge consumer of asian gastronomy. I then learned that it would be even better to expand my target audience by covering every type of food.

    Solution

    Initialy, The App had a linear interaction where the user will perform a certain task leading them eventually to looking for restaurant with matching results.I created a menu icon in the header that gives the users the freedom to navigate with ease.

  • UX/UIBig Sheep Design

    View project

    ×

    Big Sheep Design

    User experience design


    About

    I decided to make an alternative App which is going to help designers within Big Sheep Design,colaborate and work efficiently in a structure environment. The App will be running on smart-phone (Iphone/Android).

    Tool used

    • Adobe Illustrator CC

    • Adobe Photoshop CC


    Personas



    Sitemap & Taskflows


    Wireframes


    High Fidelity Mock Ups


    Guidelines


    Challenge

    The Challenge for this App was really to find a leap between the original idea and converting it into an actual user-friendly App.

    Solution

    After doing some research about users persona but also user scenario, it came out pretty clear how I was going to prototype the App and create a good user experience.

  • Design TeamBig Sheep Design

    View project

    ×

    Big Sheep Design

    Design Team Production


    About

    The idea is to create a place for creative designers to collaborate, network, and provide career support in a structured environment by sharing ideas, concept, goals,jobs, and skills.


    Big Sheep Design provides opportunities for graphic designers, web designers, videographers, photographers, advertising and marketing minds to share jobs, venues, and relationships in their own private network.


    The name Big Sheep Design come from a play on the phrase black sheep, which means the only one in the crowd.Big sheep in general are leaders and help provide guidance to their peers and that's what we are trying to accomplish.

    Tool used

    • Adobe Illustrator CC

    • Adobe Photoshop CC


    The Break Even Point

    Almost all of the money earned by the project is a profit.10% of the project goes to the business, if the project was referred by another member,that menber receives a 10% consulting commision.The remaining 80% goes into the pockets of the designer(s)

    Personas



    Branding Identity


    Challenge

    One of the Challenge was to come up with the idea. Initially when the assignment was given to our design team group, we had to come up with a product. However we couldn't really come up with a product to advertise or sell. Furthermore, after coming up with the idea, the other challenge was to find a way to make the idea benefit every designer(s)in some ways as far as task being refered and money being distributed.

    Solution

    After doing some research , we studied the break even point and found solution on how we will find jobs, how the money and percentage will be calculated.

  • Digital IllustrationPortraits

    View project

    ×

    Portraits

    Digital Illustration


    About

    For this project, I am going to show the process behind my vector art illustrations that I do on my free time. I usually work on portrait for either individuals or Artists that I admire or follow up closely. I usually play around with the brush tool and the Gaussian Blur to create depth, most of the time when it comes to skin texture or shadows within the skin color.

    Tool used

    • Adobe Illustrator CC

    • Adobe Photoshop CC

    • Adobe Premiere CC

    In this video, I used one illustration that I did for the musician and singer rihanna. I wanted to show the process of it in a timelapse video edited via Adobe Premiere. What I liked about that illustration is the way I used contrast to make her skin looks a little more realistic.

    Your browser does not support the video tag.

    Reference photo

    Final Look

    Challenge

    The challenge for this illustration was the type of hair my model reference had. It was a little bit unusual because it was kind of imposible to reproduce the texture since it was dark.

    Solution

    I decided to take the cartoonish approach and try to have light reflection on some part of her her to make it look like it had some shape. Overall, it is one of my favorite illustration that I have done so far.

  • Audio & Video Production4h Documentary

    View project

    ×

    4 Hours Documentary

    Audio & Video Production / editing


    About

    For this project, the goal was to conduct in 4 hours, interviews throughout the campus about a specific topic; record the interviews on camera with the permission of the participant; edit the video and create a short documentary in that time frame. Each student were ask to help others record the video interviews on camera but also to participate and be the interviewers as well.

    Tool used

    • Adobe Premiere CC

    • Adobe After Effect CC


    The Team



    Final

    Your browser does not support the video tag.

    Challenge

    The Challenge for this project was to find people willing to be interviewed around campus. Since this project occured early in the morning, it was hard to have people attention and focus. We weren't allow to interview faculties members. Usually that kind of project requires a lot of time on editing and sound effect.Rendering was also a challenge because most of the videos that we took were really heavy in ram.

    Solution

    Organization was the key in this process. We never gave up and were really persistant which allowed us to find couple students at the campus to conduct the interviews.

  • Logo DesignLemon Grove Car Wash

    View project

    ×

    Lemon Grove Car Wash

    Logo Design


    About

    For this project, the task was to design a logo for a car wash company. Lemon grove car wash is a well known car wash company located currently in Lemon Grove, San Diego, CA. The idea was to incorporate everything that the company stand for, which is to take care of its clientele in a professional manner.

    Tool used

    • Adobe Illustrator CC

    Style Guide

    Logo Variation

    Type Style
    Final Rendering

    Challenge

    The challenge for this logo design was to be able to combine typography and vector graphics and have balance at the same time.

    Solution

    The type that I decided to use was really flexible in term of allowing other elements to flow smoothly with it which helped while combining them all together.

  • Digital CaptureEnvironmental Portrait

    View project

    ×

    Artist Showcase

    @LuizaMaia


    About

    For this project, the main goal was to interview a subject in their working environment. Our Subject, Luiza Maia agreed to be part of this short interview and give us a brief overview of her journey as an artist here in the city of San Francisco, CA

    Tool used

    • Adobe After Effect CC

    • Adobe Premiere Pro CC

    Interview

    Your browser does not support the video tag.

    Challenge

    The challenge for this interview was finding an environment where the lighting was adequate for shooting our subject.

    Solution

    After weeks of struggles we decided to film at the Academy of Art University in the fine Art building. We thought this was the perfect environment for the environment.

  • Automotive UI DesignCollaborative : AAU X SUBARU

    View project

    ×

    AAU X SUBARU

    SPONSOR PROJECT : AUTOMOTIVE UI DESIGN


    About

    In this project, we are working in colaboration with the brand subaru. Their problem statement is to create a car concept that will depict Subaru consummer for the year 2030. My team name, Amplify focused on one sub-branch of the brand which focuses on the performance aspect of their car models.

    Tool used

    • Adobe XD

    • Adobe Photoshop CC

    • Adobe Illustrator CC

    • Adobe After Effect


    Overview

    SRD Design is an advanced design studio located in Tustin, California since 2015. Approximately 10 designers, modelers, and managers are working on production, pre-production and advanced research design projects. Our main task is to provide design proposals and strategies to the design team in Japan based on our detailed knowledge of the US market, which accounts for the majority of Subaru’s global sales.

    Assignment

    The Team

    Emphasize

    Concept

    Moodboard

    Interview

    Target Audience

    Empathy Map

    Customer Touch Point

    Journey Map

    SiteMap

    Wireframes

    Final Design

    StyleGuide


    Prototype : Key Features

    Challenge

    The challenge for this project was to be able to collaborate with the automotive industry which incorporated Interior design and Interior Architecture students. For UI designer like myself, our workflow is very different than these two other majors cited above.

    Solution

    It took a lot of communication between the two parties to create a final product that Subaru really loved. I had to change my workflow in order to adapt with car design student in order to have concistency thoughout the project.

  • PhotographyDigital Capture

    View project

    ×

    Photography

    Digital Capture


    About

    The objective of this project was to use the camera to capture photos using each of these lighting techniques : Split Light | Back light | Butterfly Light | Fill Flash

    Tool used

    • Adobe Photoshop CC

    • SLR Digital Camera Pentax K-r


    There are many lighting techniques to consider, and each choices that I made really affected dramatically the image. I had to do some camera adjustment in order to get the right results. I used some LED smart bulb for the color variation

    Split Light

    Split lighting is a technique for lighting only half of a person's face. This method is good for capturing details and creating dramatic contrast. I really had fun with the process and used my creativity to come up with different postures for my model

    Challenge

    The challenge for this lighting set up was the fact that the room was too bright for this particular lighting effect. I also had to make some camera adjustment regarding the ISO

    Solution

    We had to wait for the room to get a little darker in order to fully be able to get the right amount of balance. We also had to make sure the light source was close enough to the subject as much as possible

    Back Light

    Backlighting is a technique where you light the subject from the back of the frame and the light source is facing the camera lens. Ideally, it's best to place the subject in front of the light source to avoid a blown-out image. This style of lighting can create a halo that surrounds the subject.

    Challenge

    The challenge for this particular lighting set up was complete opposite of what we faced on the previous set up. The room was too dark and it was really challenging to figure it out which camera set up was going to help us achieve the desire result.

    Solution

    We placed a chair behind the subject and had the light source right in between. I also increased the exposure of the camera to make the subject silhouette stand out

    Butterfly Light

    Butterfly lighting is a technique where you light the subject from above to create a "butterfly effect" under the nose and on the cheeks to emphasize the cheekbones.

    Challenge

    The challenge for this lighting effect was mostly about findind the right facial expression for my subject in order to make the facial traits pop out. In addition, since the lighting source was very close to the subject face, we had to make sure the ISO setting (exposure) was changed accordingly.

    Solution

    Sometimes being a photographer is not enough, being able to give specific instruction and direction to your subject is very important. We were able to find the right expression which emphasized the shadows and highlights of the subject's face.

    Fill Flash

    The idea was to use the flash sparingly. We wanted to use the flash in order to fill the shadows on the subject's face

    Challenge

    The challenge for this particular assignment was mostly to make sure the light from the flash wasn't creating a flat look on the subject face

    Solution

    We made sure the ambient light in the room was high up and far enough from the subject. In addition, we also made sure the room was cleared from shinny objects.

    Top Pick


    MODEL :


    @Alison Li (Yueqi Li)