KATIE CAIkatiecai.com/folio/KatieCai_UI-UX-Designer_Portfolio.pdf · focused on the UI & UX design. Being a small studio, it was important to make the prototype flexible and easily

KATIE CAIUX, UI & A DASH OF VISUAL DESIGN

[email protected] www.katiecai.com www.linkedin.com/in/katiecai0431-581-700

Designer / [email protected] / +61 431-581-700

HELLO!I’m Katie, a multidisciplinary designer passionate about creating useful and delightful experiences.

Over the last 6 years+ I’ve worked with agencies, brands and startups big and small in Australia, USA and Japan.

I love bridging ideas, tech & innovation with people and helping solve social problems through design.

Here is a small section of my work.

SOME CLIENTS I’VE WORKED ON INCLUDE:

NEXT Thankyou 02 /20

Designer / [email protected] / +61 431-581-700NEXT The New Business Funding Model 03 /20

THANKYOU

Thankyou is a social enterprise that aims to end global poverty by committing 100% of product sale profits to helping people in need.

As a promise of transparency between the business and consumers, “Track Your Impact” (web app) was developed so that customers can follow their individual impact by tracking the unique Tracker ID# on each purchased product.

BRIEF: Earlier this year, Thankyou adopted a new profit collection process to maximise funding efficiency. To reflect these changes, I collaborated with the Digital & UX manager, Marketing and Impact team to reimagine and design a new “Track Your Impact” app experience.

ROLE: UX & Design, User Interviews, Visual Style-guide, EDMs

CLIENT: Thankyou

DESIGNING A NEW ”TRACK YOUR IMPACT”

PROJECT:


To ensure better long term impact results, the new model sees profits to be collected and saved up throughout the year and distributed to project partners at the end. However for consumers this means they may have to wait up to 17 months for their funding reports. We needed to come up with a solution to communicate these changes and also not lose user retention and trust.

We started off the design process by analysing the existing app and mapping out a new user journey and low-fidelity wireframe prototype on InVision.

THE NEW BUSINESS FUNDING MODEL

THANKYOU - Designing a new “Track Your Impact”

NEXT UX Challenges 04 /20



The main UX hurdle we identified was content strategy since there was a lot to communicate through the digital experience. Adopting a user first mentality, we focused on creating a step by step approach to

help guide users through the process start to finish. To achieve this, multiple rounds of prototyping and revisions were required and careful consideration of tone of voice, design categorisation and user flow.

UX CHALLENGES

NEXT UX Solutions 05 /20


So to not overwhelm users with too much copy, we broke down the process into cards. Highlighted cards indicates what the user has completed and greyed-out ones shows unfinished steps. Visual elements and the left blue bar also updates whenever the funding progresses in the timeline.

We also utilised timely EDMs and aspects of gamification to help with user retention in order to create investment value. Users are able populate their profile page with previous track information and unlock product sections with each ID# input.

To clearly and simply explain the new business model clearly, we developed a mini “How It Works” guide. This could be accessed at any time from the top menu and various CTAs around the app.

User testing and interview results also showed that users who read the guide are significantly less confused as to how the app works later on, therefore we made the decision to forcefully display it at the beginning of the experience.

UX SOLUTION - GUIDED EXPERIENCE UX SOLUTION - HOW IT WORKS


NEXT Rethinking the Mobile Experience 06 /20



During the mobile design process, we quickly identified that the desktop experience did not translate over well. Because of this, we came up with a separate mobile user experience with a focus on designing with phone gestures and habits in mind.

Users are guided through the steps with interactivity and timed triggers. We wanted to make the experience immediately intuitive and simple.

RETHINKING THE MOBILE EXPERIENCE

NEXT Mobile Experience 07 /20



MOBILE EXPERIENCE

NEXT Gyroscope Software 08 /20

Designer / [email protected] / +61 431-581-700NEXT Branding an Invisible Product 09 /20

GYROSCOPE SOFTWARE

Gyroscope Software is a San Francisco startup focused on helping game developers monetize smarter with the help of machine learning and advanced systems programming.

BRIEF: In order to catch attention among the Bay Area’s busy startup scene, Gyroscope asked me to help create a branding that captures the company’s professional and exciting identity. This needed to also reflect across all digital and print touch points, including the product website and developer dashboard interfaces.

The challenge is how to represent a product that is only three lines of code.

ROLE: Branding, UI & Design, Website, Print and Collateral

CLIENT: Gyroscope Software

BRANDING AN AI

PROJECT:


GYROSCOPE SOFTWARE - Branding an AI

Because Gyroscope Software’s product is invisible, my solution builds off their futuristic vision and innovative allure. I chose a vibrant modern colour palette and paired it with abstract imagery and played with the basics - shape and colours.

BRANDING AN INVISIBLE PRODUCT

NEXT Brand Visual Styleguide 10 /20



NEXT Website Design 11 /20



NEXT Dev Dashboard Interface 12 /20

WEBSITE DESIGN



The main UX challenge for the developer dashboard interface was displaying all the complex data in a simple way. Working with the founders, we sketched and wireframed various solutions.

DEV DASHBOARD INTERFACE

NEXT AR Wine Bottle 13 /20

Designer / [email protected] / +61 431-581-700NEXT 6 Day Design Sprint 14 /20

Ignition Immersive is a VR film production studio specialising in cinematic storytelling. The founders were interested in exploring new business offerings in the VR, AR and projection experience space, so I came on-board to help explore new strategies.

BRIEF: To add value and increase interest to an existing product, in this case wine.

I initiated and led a 6 day design sprint with a team of developers, 3D modellers, VFX and sound technicians to build a pitch prototype from concept to final.

ROLE: Art Direction, UX & Design

AGENCY: Ignition Immersive

IGNITION IMMERSIVEAR WINE LABEL

PROJECT:


IGNITION IMMERSIVE - AR wine label

For this design sprint, I acted as art director and focused on the UI & UX design. Being a small studio, it was important to make the prototype flexible and easily adaptable for future uses.

With only 6 days to complete, we started off by defining and categorising content into three main

Initial “3D wireframes”

sections - “The Story”, “Region”, “Flavour” and a link to the eCommerce store.

The concept was to create an AR wine label that tells a story through each category via videos, image gallery and text. 3D graphics and sound also helped compliment the overall experience.

6 DAY DESIGN SPRINT

NEXT Design & UX Challenges 15 /20



After testing the first low-fidelity prototype, we identified that floating UI was not ideal to use and was sometimes difficult to see against a real world backdrop. By bringing the UI to the front and onto the screen, it helped eliminate this problem. We also removed the board base idea because of wobbly tracking and slow landscape render from Mapbox’s api.

DESIGN & UX CHALLENGES

Revised UI designs

NEXT Final Prototype 16 /20


The final AR prototype consisted of:

1) The Story - Marketing video 2) The Region - Slideshow of photos 3) Flavour - Animated flavour chart 4) Store - Link to eCommerce store 5) Screenshot - Ability to save and share

FINAL PROTOTYPE


NEXT No Touch! 17 /20

Designer / [email protected] / +61 431-581-700NEXT 3 Step Strategy 18 /20

NO TOUCH!

*50-70% of women in Japan have being groped on the trains at least once. Having lived in Tokyo and experiencing it for myself, I noticed the normalization of this issue and lack of support from law enforcements especially for foreigners.

BRIEF: I wanted to come up with a solution to help victims and avoid possible encounters.

*Data based on a survey result conducted in 2013

ROLE: Strategy, Branding, Product Design

PERSONAL PROJECT: Work in progress

TACKLING TRAIN GROPING IN JAPAN

PERSONAL PROJECT:


NO TOUCH! - Tackling train groping in Japan

My idea comes in three parts:

1) Mobile app and widget to easily access help 2) Education and anonymous community building 3) Consistent branding for instant recognition

Main screen - Alert Map - Real time train location and data

Branding concept

3 STEP STRATEGY

NEXT Contact me 19 /20

WANT TO CHAT? FEEL FREE TO SAY

[email protected]

[email protected] www.katiecai.com www.linkedin.com/in/katiecai0431-581-700

Documents

KATIE CAIkatiecai.com/folio/KatieCai_UI-UX-Designer_Portfolio.pdf · focused on the UI & UX design. Being a small studio, it was important to make the prototype flexible and easily