Kennedy UI/UX Portfolio 2015

Page 1

Brian Kennedy Design Portfolio 2015

1


Moti A new wearable interaction that allows for the exchange of subtle emotional cues for partners in long-distance relationships.

Brian Kennedy 5 months, 2014 University of Illinois Urbana-Champaign 2


Ren & Cassie live over 10,000km apart...

Tokyo, Japan

Ren is a recent college graduate. He works M-S from 8am to 6pm.

Chicago, Illinois

Cassie is a university student. She keeps a busy, inconsistent schedule

3


60%

of respondents said they dealt with a difference in time zones [Time differences] limit communication times, but lines up some key moment of free time.

If he has to work the whole afternoon, we aren’t able to talk. By the time he comes home from work, I’m already in bed.

We would both get frustrated and it put a strain on the time we were actually talking to each other.

Sometimes we just miss speaking to each other because the other went to bed just as the other woke up.

4

*In a survey of 100 LDR participants


Current product-scape

Meaningful

Intimacy through technology

Target Solution

In-convenient

Practical

There is opportunity for a practical, device that can help build intimacy over distance.

Gimmicky 5


Wearable tech - Tangible user interfaces - Intimacy through technology

6


Concept Selection With wearables as the forefront of technology, how can we use them to change the way that we communicate with one another?

Wearable bracelet that allows for communication of mood and feeling through light & color.

The product should be able to improve non-verbal communication and instill a feeling of closeness by helping to build intimacy. 7


10 “interactive� prototypes were made for user testing

8


Getting prototype feedback To review the prototypes, I returned to talk to some of my initial interview participants to get their feedback on the concept. They told me which concepts fit best into their lifestyle and chose their 3 favourite designs.

“Tapping is easier than pressing or pinching. It also feels more intimate. Like a tapping language.”

“You don’t want people to assume that it is just a mood ring.”

“About the color…. The definition of color will change between cultures.”

“Constant communication builds trust. Technology today allows LDRs to be possible & enjoyable” 9


Feedback analysis

State switch Single button Squeeze action large Touch Strap Circular dial Tactile strap buttons Dedicated cue buttons Squeeze action small Square Half Dial

1 2 3 -

1 3 2 -

2 1 3 3 -

1 2 3 -

1 2 3 -

2 3 1 -

7 6 9 9 8 0 0 0 0

1.4 2 2.25 2.25 2.6 0 0 0 0

After compiling the data based on the multiple rankings given by the testing participants, the features of the top prototypes were taken and fused, taking into account the comments from user testing. 10


Resolving time display & input Dual time displays

Single time display & squeeze action

Single time display & button press Chosen for familiarity & simplicity 11


Introducing Moti Smartwatch for communicating emotion & presence over distance

12


Signing up to use Moti The Moti mobile app is plug’n play. Set up your Moti watch to sync with your long distance partner.

13


Fully customizable moods & colors Neutral

Longing

Irritated

Sad

Enthusiastic

Calm

Colors were chosen based on user feedback and psychological research. They can be customized by either parter at any time. 14


Hardware interactions Moti watch face doubles as the main hardware button.

The color ring is a capacitative touch wheel.

15


Interaction: Sending cues Quickly and easily send emotional cues to your long-distance partner.

Home State

Shows your time, partner’s mood

16

Single tap display

Select mood cues to send

Multi-directional gesture

Mood cue sent, return to Home


Japan Tokyo Time (UTC +9)

United States Central Time (UTC -5) 17


Moti uses an included wireless charging for a cord free experience

Qi wireless charging standard Because the watch utilizes LEDs, bluetooth, & touch pad, it requires charging on a daily basis. 18


Component overview

Rear casing Inductive charging ring Magnetic adhesive backing Lithium Ion battery PCB / motherboard Stainless casing RGB LED strip Capacitative touch ring Translucent button

19


A-Champs.com A-Champs A-Champs first website to establish their emerging brand in the toy market & to accomany to their soon to launch Kickstarter campaign.

Branding & web design for A-Champs Ltd.

20

Brian Kennedy, Designer Marvin Boontjes, Developer 2 Months, 2015 A-Champs Ltd.


Branding & UI/UX Initiative

The brief ™

Create a website to explain ROXs gaming console to prospective buyers and spread the A-Champs brand name.

Deliverables: 1. Site proposal 2. Layout & wireframing options 3. Design specifications for developer 4. Live Website

21


Identifying the basics: Typography & Color

The offscreen activity console to get kids moving ROXs provide endless hours of active fun. Power up!

ROXs comes pre-programmed with 8 games that can be played alone or with friends.

Power up! Power up!

22

A-Champs is dedicated to improving the health and wellness of all children by making physical activity fun and exciting by delivering toys built on the concept of offscreen active gaming.


Color Palette

#F59431 #FFAF32

#2382BB #29ACD1

#F5F5F5 #F57B31

#4A4A4A

#2E6EAF

Active • Energetic • Enthusiastic • Vibrant 23


A-Champs.com Site Map & Proposal A-Champs.com Priority of Home page items A. Our Product & mission - Link to ROXs / Kickstarter The call to action will vary based on our progress B. Our Story / Brand / facts - Link to Brand Info C. Learn more - Facts, Health tips Infomation needs to be concise & glancable

1) ROXs What are ROXs? - How they work - How to play w/ROXs Why buy ROXs? - 8 Active Games - Customizable gameplay - Family Fun - Easy to use

2) About A-Champs

3) Power Up

4) Contact Us

Mission Statement

Active Gaming Intro

Contact Info

Company Values

Social Media

Background Story

Email Opt-in

A-Champs Team

How to buy ROXs? - Link to Kickstarter

FAQ

5) Website Footer Quick Links

Terms of Service / Privacy

Press Materials

Email Opt-in

The sitemap was presented to the client before moving ahead with the wireframing. Though the site is simple in structure, the challenge was explaining the product in a concise way. 24


Wireframing & Layout

25


Header Design Specifications 15 px A-Champs_Logo1.png 150 px

15 px

700 x 68px Total

Navigation bar Responds to screen width 68 pixels tall Orange 1 #FFAF32

148 x 68px Each 3 States

Navigation_Home_Up.png

26

Navigation_ROXs_Up.png

Navigation_Aboutus_Up.png

Navigation_Powerup_Up.png

Navigation_Contactus_Up.png


Footer Design Specifications

Roboto Slab Bold 22px White #FFFFFF

Oxygen Regular 20px 80% Black #58595B

Oxygen Regular 22px White #FFFFFF

Oxygen Regular 12px White #FFFFFF

Links to appropriate page on A-Champs.com Please underline link on hover!

Button_Facebook_Up.png

Button_Twitter_Up.png

Button_Insta_Up.png

All buttons have 3 states

Button_Youtube_Up.png

Button_Join_Up.png

27


Visual Design

28


Check out the live site at: A-Champs.com! 29


Curry Companion Product design targeting the high end food storage market in India. An exercise in designing for culture and connectivity.

Collaboration with World itchen Asia acific

Brian Kennedy, Loh Min Hwe 5 months, 2012 National University of Singapore


After making home visits to learn from Indians living at different socio-economic levels throughout Singapore, we learned that eating with the hand is a common experience across India

Bite-sized portions

Flowing movements

Gentle gestures

31


Meet Bharti “I eat with my hand at work. It’s about tradition, but it also feels more natural.”

Bharti is a professional but even in the workplace she wants to be able to eat her food in a familiar and comfortable manner.

32


Identifying user, task, & environment Eating with the hand

Middle Class Indians

For meals away from home

33


Two different eating experiences Tiffin Lunch Carrier A commonly used meal container in India, often contains rice, curry, dal, and chapatis (spicy meats).

Affordable, durable material

Stackable, secure food compartments

Handle may limit convenience May leak liquids & sauces Heat retention is poor, difficult to reheat

34


Banana Leaf A natural eating utensil, used for special eating occasions, emphasizes eating with the hand.

Large, flexible, waterproof Food is easily accessible

Used to help cook & flavor food Cannot store or carry food Cannot be reused

35


Current product-scape

High End

Current products on the market only partially meet the needs of the Indian consumer.

Kitsch

Elegant

Glass and ceramics represent the bulk of premium kitchenware Tupperware and Lock & Lock are prominent storage container brands Proliferation of plastic kitchenware and storage in the lower-range

Low End

36


What if we could combine the elegance of the banana leaf with the usefulness of the tiffin?

37


Initial concept ideation - Design for eating with the hand

A concept with a feasible folding mechanism, partnered with a natural pulling action was chosen. 38


Concept refinement

Concept refinement focused on improving the folding action & other functional aspects like the lid / shape. 39


Testing insight: increase reliability

Design is functional, but appears untrustworthy.

40


Wall fold mechanism redesigned to improve stability. Promotes confidence.

41


Curry Companion expands to create a larger eating surface

42


Comments on manufacturing

Candidate materials Main shell: Polypropylene Joints: Thermo Plastic Elastomer

After a consultation with...

Both materials... • Are food-safe • Can form complex shapes • Are highly reusable • Have excellent heat resistance

Orca engineers stated: Co-injection moulding is possible for high production volume, and various surface finishing.

Engineering firm, Johor Bahru, Malaysia

Consider reducing the footprint to only two food sections for better mold flow to help ensure variable thicknesses are achieved.

43


Two dividers separate portions to keep the meal fresh 1

2

4

44

3

5


45


Mobile User Experience Intern Technology & Innovation Center, Moline, Illinois 2013, 5 Months

As a UX team member, I prototyped and made design decisions working in tandem with colleagues and external software vendors. I designed software much like the example above, for both iOS and Android platforms, created detailed spec documents, and interviewed with expert machine operators to build backend workflows for iOS applications. 62


John Deere UX Visual Branding

I designed with John Deere’s visual marketing department to create a design framework for application icons. Challenges included creating multiple icons for applications that targeted a single Deere product line, creating different visual styles for varying audiences, and adding function symbols to the icons. The icon shown to the right is an early iteration for GoHarvest.

63


User Experience Intern Research & Development Center, Singapore 2012, 7 Months

Cloud Storage Market Research

Collected data on cloud storage and file collaboration by competitors. Presented findings to development team.

What are other products doing better? Where does Autodesk 360 Desktop fit? How can I help improve the product? First use experience was part of the research.

64


Project: Autodesk 360 Usability Testing Built and tested interactive flash based prototypes for Autodesk 360 desktop.

User sign in

sync settings

Creating software at Autodesk is about enabling users to work in a familiar and understandable way. 360 Desktop folDer

The product usability tests covered separate aspects of the software, including copy linked data files, AutoCAD integration, and sign-in feedback

DisableD

enableD

65


Thank You

Brian Kennedy hello@briken.co

104


Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.