I am Ca Nguyen, a product designer. I was born and raised in Vietnam, but moved to the U.S. when I was 18. I graduated from the University of Louisville with a major in Communication Art and Design. Minor in marketing taught me consumer research. Code Louisville's Front End Development class taught me HTML & CSS. But design and user experience will always be my heart and soul. I'm in love with design process, creative thinking and problem solving.
At work, I am an energetic product designer, proactive learner and team player. At home, I am a skilled DIYer, Asian foodie and travel enthusiast.
In a digital project, designers usually hands off static mockups and style guide of how the website/mobile app should look like to developers. However, mockups and style guide sometimes leave a lot of room for guessing and mind reading. Also, over time, changes and updates are made, but they are not reflected in the mockups. To prevent that from happening, I built an HTML & CSS style guide. This live style guide will be easy to understand, to update changes and to be reused in future projects.
» Check out HTML Style Guide Template
FireKing Security Group, located in New Albany, IN, specializes in sercurity equipment; including cash management safes, traditional safes, fireproof cabinets, and video intelligence. Their goal for the new website project is to effectively recapture market share and rise above the competition.
My contributions: co-lead design exercise at discovery workshop, site map, wireframes, creative direction, mockups, prototype, assets for development.
Live website: FireKing.com
With data collected from a full-day onsite discovery workshop, Google analytics, Lucky Orange, usability tests, and customer surveys, we identified major issues with the current website lying in navigation among three main departments, lacking visual assets and product technical resources, as well as inconsistency in user experience across the entire website.
Next, I worked with content team to reorganize their site map using the card sorting exercise. Based on the results, wireframes were then created to directly address three major issues. I also quickly tested them with another round of usability testing.
After all the prep work has been done, it was then time for the most exciting part of the project. I dived into the mockups phase, beginning with inspiration board and style tile. A design system was then built out and iterated along side the mockups development.
SpanTech LLC is a global manufacturer of conveyor systems used in food production, packaging, pharmaceuticals, and manufacturing. They were looking to revamp their outdated website to provide their clients a better user experience and differentiate themselves among competitors. During the process, SpanTech was also made aware of the need to unite their brand appearance across different media for brand recognition.
My contributions: wireframes (joined effort), creative direction, iconography, mockups, prototype (built with proto.io), assets for development, and brand book.
Live website: SpantechConveyors.com
Leaf, a fictional science center, plays a leading role in transforming the nation’s relationship with science, technology and beyond. Their mission is to educate students in the K12 system, as well as to inspire people of all backgrounds to explore and develop their interests in understanding the natural and human-made world.
Their logo, inspired by spheres found in the science world, in combination with the use of fun colors and fluid curves create a distinct, energetic, yet elegant identity system.
*This project won a Louisville ADDY student award.
Paragon is FirstBuild’s induction cooktop with advanced heat monitoring technology, perfect for sous vide cooking, deep frying, chocolate making and more. With many possible functionalities, Paragon requires a mobile application that is user-friendly and simple, yet powerful. In this project, I was responsible for UX/UI design and collaborated with the engineer team to build an easy, seamless cooking experience for Paragon owners. In addition, the app is also a base platform for FirstBuild’s future appliances.
» Learn more about Paragon
Pinnacle (previously known as Notch and Needle) is a fictional local sporting goods store in Burlington, Vermont. They are dedicated to the local community and deeply commited to customer service. Pinnacle brand is identified by a wood-inspired color palette and texture, combining with a hand written typeface to create a warm, welcoming and authentic feeling. The responsive website is designed to have clear calls to action, logical navigation and clean layouts.
» Home page - desktop | tablet | mobile
» Product page - desktop
» Check out page - tablet
» Contact page - mobile
» Home page prototype for desktop
*This project won a Gold Louisville ADDY & an AIGA Louisville student award.
Snapchat is a video/photo messaging mobile application. Using the application, users can take photos, record videos, add text and drawings, and then send them to a controlled list of recipients. Users set a time limit for how long recipients can view their content. As much as I like the idea of snapchat, the design of this app at the time was confusing and not user-friendly. Therefore, I redesigned the app with the intention of making it better, prettier and easier to use.
*This project won an AIGA Louisville student award.
In the original design, when you open Snapchat, it takes you right to camera screen. There is no navigation, which is very confusing. In the redesign, I added a camera button in the middle for quick photo taking and home and notification buttons on the sides for easy navigation. The background is real time camera.
The camera screen is kept close to the original design. White icons are easy to notice and they don’t interfere with the camera's view. The video icon is also added to let users know about that function.
In the photo edit screen, a white background has been added to call out the buttons. And a filter icon is added because this function was hidden in the original design.
The original design doesn’t have any kind of navigation system, which is the main reason why the app is hard to use. To fix the problem, a side navigation is added. It can be accessed from any screen.
Two tabs are added in the home screen for clarification and easy access. Snap - for pictures and Chat - for messages. A shape system is also added: square for photo, triangle for video, and circle for message. The yellow dot in the profile pictures indicates online status and availability for video chat.
The contacts screen also has two tabs: individuals and groups. The groups feature has been added because it helps you send a snap to a group of friends, coworkers or family.
Notification doesn't exist in original design but it has been added for two reasons. First, users can easily summarize what happened since the last log in, which increases engagement. Second, so recent updates wouldn’t take up space in contacts screen.
The profile screen is another screen that has been added for better user experience. It lets users access their friend’s information: score, best friends, and stories.
Design Heroes is a booklet about designers that I admire the most. The lively layout creates a flow and rhythm. It is inspired by the successful careers of these designers, which never stop evolving and changing. Typography is kept as clean and minimal as possible. Futura Condensed, which is bold and full of characters, is combined with the friendly and neutral Baskerville. The combination creates a push and pull, which is exciting, yet graceful to the eye.
Hite Art Institute is the Fine Arts Department of University of Louisville. The purpose of this project is to improve the website both visually and functionally, to bring a new look to the website and to bring students to the art programs. At the same time, the design has to be cohesive and consistent with the school’s brand guideline. The website redesign applies user experience best practices, implements fun interact with users, and enhances a well balanced structure with uses of color, layout, typography and photos.
» Home page - desktop | mobile | tablet
» Programs - desktop | mobile
» Gallery page - desktop | Gallery details - desktop
For home page, along with providing a clear call to action and shortcuts to information, letting user change the site's background image is a fun interaction that raises engagement. Images can be photos from around campus to give website visitors a feel of Hite's life, or a student's artwork to show off and inspire potential students.
Pho Ville is a fictional Vietnamese restaurant, located in downtown Louisville, KY. Its delicious and healthy “pho” (Vietnamese noodle soup) is made with 100% locally grown ingredients. The restaurant appeals to Louisville locavores and authentic Vietnamese food lovers. Based on that special characteristic, a unique mark is designed by combining Fleur-des-lis, Louisville’s symbol, with a bowl of pho. In addition, an earthy “pho”–inspired color palette and a fun handwritten typeface tie together a friendly, yet modern brand experience.
During my internship at FirstBuild, I had a great opportunity to work as an UX/UI designer and collaborated with developers to create a couple exciting apps for smart home appliances. Pizza Oven App and FirstBuild community app are two of those.
Pizza Oven Invision Prototype
Pizza Oven is a FirstBuild's product in development stage. However, the product branding lies under the Monogram - luxurious GE Home Appliance product line. Therefore, the app color is black and white to follow the Monogram's modern and elegant visual brand language. This mobile app prototype is created for the product's pitch to potential business partners and customers. The app is connected to the pizza oven through Bluetooth. It helps control, as well as provide recipes to make a perfect pizza.
1B Community Invision Prototype
FirstBuild's expanding community needs a social network platform to connect everyone and help managing projects. Therefore, a mobile application is being developed to serve the community. The Invision prototype below is a work in progress and the application is being developed by FirstBuild team in beta mode.
In the world of thousands of typefaces, many of which serve the purpose of beauty, Nano was created to serve a specific function. Inspired by sustainability and productivity, Nano has been carefully designed to be extremely legible at a small size. The typeface is perfect to print on an inkjet printer and a professional printer, or display on screen. It doesn’t matter how small your project gets, Nano is to the rescue.
To better present this unique typeface, I hand-made a mini type specimen accordion book that is 2.5 x 2.5 inch, and added a clamshell box for a finishing touch.
During my time at FirstBuild, I had a great opportunity to get involved in a very wide range of projects. They include business cards, brochures, leaflets, posters, signages, map, mobile apps, website, and Powerpoint presentation. Beside design skills, I learned to manage different projects at the same time, prioritize tasks, organize files and workspace, brainstorm ideas, communicate with team members, proof read and, most importantly, do whatever it takes to get the job done.
Brand identity project is always fun, especially when it is for myself. This project includes logo, patterns, resume, business cards and thank you cards.
The logo is created by combining my initials together. With the hexagon shape, it looks like a box in space but it's not a close box. It reminds me that as a designer, I always have to think outside of the box for my design problems.
I had the most fun to create 12 patterns to go in the back of every piece. What holds them together as system is the fun color palette and the hexagon or hexagon inspired shapes.
My business cards are printed on personal printer and hand cut because I couldn't find a print shop that I trust and I wanted to use water color paper because of its feel.
As a perk of working at FirstBuild, I get access to a laser cut machine and I finally had a chance to learn and use it on this project. First, I used it to engrave my logo to my portfolio book. Later, I came up with an idea to make business cards and thank you cards with the laser cut machine. After some trials and errors, I finally got what I wanted.
Collaborate with product manager, interaction designers, researchers, copywriters and developers to implement Humana’s new brand, build modules and templates for Humana.com. Build scalable, reusable design system using Sketch library. Deliver high fidelity comps, design assets, style guide for development.
June 2016–March 2018
Collaborate with product manager, designers, writers and developers to build websites that solve business problems. Conduct usability tests for websites and mobile apps. Build and test wireframes, prototypes and mockups. Deliver design assets, live style guide for development. Develop brand guideline.
June 2015–June 2016
Build prototypes and UI design for mobile applications. Design promotional and marketing materials for products and events. Brainstorm and communicate ideas with team members.
August 2014–December 2014
Collaborate with team on Interapt’s internal promotional materials and client works. Projects include mobile app, web, branding and print.
August 2013–May 2016, GPA 3.88
BFA in Communication Art & Design | Minor in Marketing
Louisville ADDY Student Award, Gold | Leaf Science Center | 2016
Louisville ADDY Student Award, Gold | Mattingly Edge - Group Project | 2016
AIGA Louisville Student Award | N & N Website | 2015
Louisville ADDY Student Award, Gold | N & N Website | 2015
AIGA Louisville Student Award | Snapchat App Redesign | 2014
Welch Printing Scholarship | 2015–2016
UofL Women’s Club Scholarship | 2015–2016
Hite Art Institute Scholarship | 2014–2016
KCTCS Academic Scholarship | 2013–2016
UI Design, UX Research, Interaction Design, HTML & CSS.
Sketch, Proto.io, Invision, Photoshop, Illustrator, and After Effects.