MY ROLE
This was my first experience as an UI designer, and my job was to find an exisiting app, make improvements, rebrand it, and animate interactions within certain task flows that I wanted to highlight. I went through the designing and prototyping process to eventually render interactions through AfterEffects of the application’s core functions.
CONTEXT AND CHALLENGE
In this project, I explored the principles, patterns and processes for interaction design. I defined the structure and behavior of interactive systems and how these can be used to create meaningful relationships between people and the products and services that they use.
GOALS
- Analyze and assess the design and painpoints within an already exisiting mobile application
- Rebrand and redesign the app based on a user group and their needs
- Define the interactions in the task flows using triggers, feedback, and rules
- Prototype interactions using AfterEffects for the first time to showcase the redesigned app's capabilities
PROCESS AND INSIGHT
NEEDS
After scoping out various applications, I chose the app Dazz Cam to redesign. Dazz Cam is a photo app that takes images and applies a filter to them such as light leaks and grain, like a film camera would. Painpoints within this app included a clunky interface, not being user friendly, and limitied functionality when it came to editing images. For example, instead of being able to customize a light leak on an image, it would be randomized so that you would have to keep uploading images until you achieved a desired effect. Issues like these were things that I wanted to address as I began focusing on certain tasks and sketching out wireframes.
SKETCHING
There were three tasks that I wanted to design and eventually prototype. They were: importing and exporting photos, editing photos, taking photos, and changing the camera settings. Each task originally had flaws that I wanted to mitigate, such as issues with the functionality and interface design. I started off by sketching possible flows and iterating from there.
WIREFLOW
I then completed a wireflow after similarly making one for the preexisting app. I used the sketches to start designing wireframes within the application Sketch. The task flow included the interactions that I wanted to address: importing and exporting photos, editing photos, taking photos, and camera settings. I incorporated triggers, feedback, and rules for all of the interactions that I wanted included in the app.
BRANDING
Next, I created a color palette and selected the typography I wanted in my app based on my knowledge of design and of the consumers I wanted to reach through it. I like some of the bright, playful colors from the original app, so I mixed that with a cooler palette that exuded sophistication. A san serif was paired with this palette to achieve that vibe and my next steps were to start incorporating the branding into the wireframes.
TASKFLOW
A visual of what I wanted my interface to look like as well as my target audience started to come together in this phase as I started adding my branding into my wireframes. I made any other adjustments to my task flow before I started importing into AffterEffects using a plugin. My branding and designs went through many cycles of critiquing before the final look.
FRAMES
Before importing my Sketch files into AfterEffects, I made sure to build out every frame for every interaction that was going to take place within my app and task flow. This prepared me by making the prototyping process go smoother and helped me keep track of all of the interactions in my flow.
RESULTS
After importing all of the frames and assets into AfterEffects, I then spent the rest of my time building out all of the interactions in the timeline. This part was the most challenging because it was my first time using AfterEffects, but after much trial error I was able to successfully render these interactions and reach the goals I addressed from the beginning.