Ian Sterling_Interaction Design Portfolio 2019

IAN STERLING PORTFOLIO

INTERACTION DESIGN INTERACTION DESIGN

INTERACTION DESIGN PORTFOLIO 12019

IAN STERLING

IAN STERLING SPRING 2019 INTERACTION DESIGN ART CENTER COLLEGE OF DESIGN PASADENA, CALIFORNIA

IAN STERLING

WORK EXPERIENCE

Hello, I’m Ian. I am an Interaction Design student at Art Center College of Design in Pasadena, California. As a designer, My goal is to explore different ideas in the realm of user experience as it relates to current and emerging technologies. Aside from general UI design, I am passionate about immersive storytelling, motion design, and mixed reality. I pride myself on being a multi-skilled creator who is always on the hunt to learn something new.

Virtual Reality Technician, The Void / Glendale, CA March - September 2018

In my sparetime, I enjoy fitness, travelling, as well as looking for new music to listen to. isterling793@gmail.com 303.594.8997

• • •

Maintain equipment used for VOID Experience Center, including HMD, Vest, Guns, and packs Assisted when corporate team pushes new builds, verify flash firmware on vests and guns Calibrate stage, restart servers/networks/Wi-Fi, and test equipment

Intern, User Experience Studio, BMW Technology Office USA / Mountain View, CA March - September 2016 • • • •

Work alongside the UX team to research innovative designs for driver and passenger experiences Concept new user interface designs for future BMW automobiles Create both wireframes and storyboards to develop cohesive and clear designs to present to the rest of the design team Develop functional proof-of-concept designs using emerging technologies

EDUCATION Art Center College of Design / Pasadena, CA Continued Studies, B.S. in Interaction Design, 2018-Present University of Denver / Denver, CO B.A. Degrees in Global Political Economy / German, 2014 GPA: 3.5

SKILLS • • • • •

Strong interpersonal communication skills Strong sense of design and creative problem solving Ability to work well in team/group work environments Adaptable and quick to learn new skills Organized and ability to function well under high stress moments

TOOLS • • • • •

Adobe Creative Suite InVision HTML/CSS Sketch Unity

• • • • •

Cinema 4D Unreal Engine 4 3DStudio Max Vray Hand Sketching

CONTENTS USER INTERFACE/USER EXPERIENCE PocketCPR Spotify Music Video and Lyric Feature Augmented Wrist Wearable (AWW)

MOTION DESIGN AR Concert Poster

3D MODELLING 3D Low Poly Animal Studies

USER INTERFACE/USER EXPERIENCE IAN STERLING

INTERACTION DESIGN

5

PocketCPR

7 PocketCPR is a concept application focused on helping people who are certified in CPR/First Aid as well as those looking to get certified practice the skills necessary to perform high quality CPR. In one year alone, 475,000 Americans die from a cardiac arrest. Although some software

INTERACTION DESIGN

PROJECT BRIEF

exist (smart backboard, dual accelerometers, reference markers, and others), continued development of optimal and widely available CPR monitoring is a key component to improved performance.

This project utilizes wearable technology to help users practice chest compression tempo techniques to develop muscle memory with timed exercises. The results of this can be sent to their employer if they are required to know CPR/First Aid, or to their CPR instructor in case they need to be recertified in the future. This can help give both average citizens and health professionals more confidence if they are ever in an emergency situation.

TOOLS USED ADOBE XD SKETCH INVISION IPHONE/APPLE WATCH AFTER EFFECTS

IAN STERLING

(automated algorithms) and hardware solutions currently

INTERVIEWS For this project I interviewed people who were either CPR-certified, trainers of First Aid/CPR, or people who haven’t been certified but are interested in learning about the

“Many people have a false sense of security because of previous CPR training”

“I forgot most of what I learned from my CPR/First Aid class I had to take”

“Online videos and illustrations are not realistic and don’t help in real scenarios”

“I’m more of an experiential learner and enjoy hands-on practice of the skills”

process.

One issue that was repeatedly brought up was that CPR courses are very information heavy, and that people do not retain this information very well afterwards. This includes the actual skill of performing chest compressions at the right

KEY INSIGHTS

tempo up to a 5-minute duration.

Additionally the only opportunity that people get to practice skills outside of an emergency situation is when they actually get recertified, which can be anywhere from a one to several years later.

Trainers of CPR feel that people are not recertified frequently enough, or atleast that people do not practice the skills they learn after certification often enough

CPR courses are very information-heavy and often requires people who take it to review information afterwards, but people rarely do it

Tempo for chest compression is one of the biggest challenges when training people

Even though CPR training is offered now in “blended” learning, i.e. reviewing text info and videos online and then taking a shorter certification course, trainers don’t feel that it is adequate in the long term for actual CPR performance

People who have taken CPR courses before appreciate the experiential / hands-on and interactive training during courses.

9 A recent study found that smart watches may have the advantage in helping Good

INITIAL IDEATION

Samaritans accurately perform the first aid technique. A South Korean research team compared the devices found that the smart wearers

outperformed

the IAN STERLING

watch

INTERACTION DESIGN

CONCEPT RESEARCH

smartphone users in delivering accurate CPR. I chose to use this research for the main technology to be featured in my application concept.

Smartwatches as chest compression feedback devices: A feasibility study. https://www.ncbi.nlm.nih.gov/pubmed/27 004719

Following my research I began an initial brainstorming of how an application could be used for CPR skills practice. This allowed me to later plan out the information architecture.

INFORMATION ARCHITECTURE PocketCPR

Main Page

Home

Chest Compression Practice

Quick Quizzes

CPR Visualizer Step-by-Step

Profile

Activity & Notification Updates

Instructions for Exercise

List of Recommended Quizzes

List of Recommended Quizzes

Connect to First Aid ID

Exercise Main Page

Log of Previous Scores

Log of Previous Scores

Connect to an Instructor or Employer

Log of Previous Sessions

Send Results to Instructor or Employer

Send Results to Instructor or Employer

Send Results to Instructor or Employer

Device Settings

Training Log

Find a CPR Trainer near you

Additional CPR Resources

11 recently-certified lifeguard. He is instructed by his employer to download the PocketCPR app so that he has a way to prove that he is staying on top of a very necessary skill that he needs for his job. This rough version of his journey was the outline for later wireframing.

INTERACTION DESIGN

Create a better method for people to practice CPR and First Aid techniques and knowledge in order to help improve the chances of performing high quality CPR.

I based my user journey off one of the people I had interviewed earlier; a

IAN STERLING

UX VISION

USER JOURNEY

3

MOBILE APP UI

APPLE WATCH UI

INTERACTION DESIGN

functionality such as smart watch-based chest compression tempo practice and quizzes.

-

My initial wireframes were designedbased on the user journey to get an idea of how one could download the app and then access different

PORTFOLIO

LOW-FIDELITY WIREFRAMES

13 INTERACTION DESIGN

USER TESTING After designing wireframes for both the smartphone and Apple Watch, I quickly focused on user testing for both the UI and how the chest compression exercise would work in practice. I also tested different materials that a user could practice with at

IAN STERLING

home as a replacement for CPR manikins.

I worked with a CPR/First Aid instructor on finding the right material to practice with that would offer enough recoil to replicate compression depth with, and found that stress balls were a great alternative to use.

User testing: Practicing chest compression tempo exercise with stress ball material.

STYLE GUIDE MOODBOARD

SCHEME

#EF3024

#7B7B7B

#EF3024

#3E3E3E

#D2D2D2

ICONS

APP LOGO

APPLE WATCH VARIATION

15 INTERACTION DESIGN

An animated mockup of how the Apple Watch would function can be viewed here: PocketCPR Apple Watch Animation

IAN STERLING

FINAL UI DESIGN

Spotify Concept Features Music Video, Lyric and Karaoke Modes

17 The goal for this project was to prototype several new features on an existing streaming service platform. I chose to explore how song lyrics and music video features could be integrated into the current Spotify web player.

I did not want to alter much of the current UI, so I chose to add in the features in a very

INTERACTION DESIGN

PROJECT BRIEF

features in a HTML/CSS prototype.

I also added a Karaoke feature, which would be a new social experience for Spotify users to be able to sing along with their favorite songs by themselves or with friends.

TOOLS USED ADOBE XD SKETCH HTML/CSS TAILWIND CSS

IAN STERLING

seamless fashion. This required that I study the existing brand identity in order to integrate my

USER PERSONA Prior to designing my wireframes and choosing how the features would be integrated, I created a user persona based off interviews I had with current Spotify users. This would help guide me through creating the flow of the UI.

19 After user-testing, however, I found that it would be easier to design the experience first in tablet-size format and then develop the responsive variations afterwards.

INITIAL SKETCHES

MOBILE LAYOUT WIREFRAMES

INTERACTION DESIGN

Initially I targeted the mobile version of Spotify web player to design my wireframes around.

IAN STERLING

LOW FIDELITY WIREFRAMES

HIGH FIDELITY WIREFRAMES After testing the low-fidelity version of wireframes, I went on to creating the high-fidelity interactive mockups in Adobe XD. The new features are toggle icons which appear next to the selected song.

Main Screen

Music Video Toggled On

Song Selection

Music Video Full Screen Mode

Song Lyrics Toggled On

Both Music Video and Lyrics Toggled On

Song Lyrics Full Screen Mode

Karaoke Mode Toggled On

Karaoke Full Screen Mode

21

designed and tested earlier. This was designed for responsiveness on mobile, tablet, and desktop.

INTERACTION DESIGN

The final version was coded in HTML/CSS based on the high-fidelity wireframes I had

IAN STERLING

FINAL RESPONSIVE DESIGN

AUGMENTED WRIST WEARABLE (AWW)

23 An AR interface for wrist wearables that functions in a hardware ecosystem with smart glasses/HMD. Augmented Wrist Wearable (AWW) was a team collaborated project created at Reality Virtually hackathon at the MIT Media Lab and was designed and prototyped in under 48 hours.

PROBLEM

INTERACTION DESIGN

PROJECT BRIEF

shortfalls when it comes to displaying information to users. Part of this is due to size limitations of display, as well as resolution provided by the screen hardware. Interaction with these wearables is restricted to both the size of the display (if touch-based) and physical buttons.

SOLUTION The future designs of wrist wearables might not require any form of display, but instead work in sync with another wearable device i.e. augmented reality headsets.

When paired with an AR headset, a wrist device could utilize the freedom of spatial 3D user interfaces to create new forms of user interaction. Though the wrist wearable could still contain all the necessary sensor hardware technology to collect user’s data, the need for an external display is totally optional and unnecessary, freeing up the hardpoints in the physical design requirements.

TOOLS USED ADOBE ILLUSTRATOR UNITY AR KIT 3DSTUDIO MAX IPHONE 8 PLUS/APPLE WATCH

IAN STERLING

Screen-based wearables such as smart watches and fitness/bio trackers have several

UX IDEATION GLANCEABLE INFORMATION One of the benefits of wrist wearables such as smartwatches is the ability to quickly glance at the device’s display and view information quickly. This is a simple, single action movement that gives the user necessary information instantaneously.

QUESTION: How can glanceable interactions be improved with smart glasses?

GAZE AND GESTURAL SELECTION Navigation methods in a spatial UI could utilize both gaze selection (where the user looks directly at an interface element) in combination with gestural movements with hands to select and move through a menu. This would require hand tracking which is already being implemented in current smart glasses such as Microsoft Hololens or Magic Leap One.

25 The Smartphone was used in place of the AR smart glasses and screen based interactions represented gestural input.

Markers were placed on the Apple Watch to be used with orientation data to trigger different menus. The application was then developed in the Unity Game engine.

INTERACTION DESIGN

This concept was prototyped using both an Apple Watch and iPhone 8 Plus with the ARKit.

IAN STERLING

PROTOTYPING

SPATIAL UI DESIGN Part of the challenge with designing an interface for augmented reality is placement of elements in 3D space. I chose to focus on how a home menu, Spotify music player, and fitness app would appear in an AR format. These were based on my preliminary concept sketches, and I used a combination of 2D assets with 3D elements such as a beating heart for the fitness app, modelled and animated with 3DStudio Max and made interactive with Unity.

27 correct in the real world, I then worked together with my team member to code the logic for the different UI functionalities.

An video of the functioning prototype can be viewed here: Glyphs: Wearable Augmented App Experience

INTERACTION DESIGN

After the initial UI was designed and tested to make sure that the scaling and placement was

IAN STERLING

FINAL PROTOTYPE

MOTION DESIGN

AR PROMOTIONAL CONCERT POSTERS IAN STERLING

INTERACTION DESIGN

29

PROJECT BRIEF The theme for this project was to find a way to make motion graphics more of an interactive experience. As an interaction designer, I find that there are many opportunities to combine motion design with new forms of technology to create novel experiences for viewers. I chose to combine motion design and augmented reality to create a new way to view a traditional form of advertisements, in this case concert flyers.

Having designed concert flyers for punk bands in my formative high school years, this is a project which I was passionate about and wanted to see how far I could push myself. My goal was to create a seamless experience between graphic design of the physical printed poster, and the animated digital version viewed on a phone or tablet.

TOOLS USED ADOBE ILLUSTRATOR AFTER EFFECTS UNITY AR CORE

31 that the clean shapes and typefaces would be a juxtaposition to the aggressive and chaotic music from the bands I chose to advertise.

INTERACTION DESIGN

The graphic design of the posters was inspired by minimalist and bauhaus themes. I found

IAN STERLING

MOODBOARD

IDEATION After brainstorming I did a series of rough sketches to find how I would want my posters to animate. This was kept loose and quick as most of the experimentation with form and movement was done in After Effects.

STYLEFRAMES

PROTOTYPING & USER TESTING After creating both the posters and animations, I used Unity game engine to create the augmented reality experience. I also did user testing to see how I could add interactions to make the experience better. both posters animations are ar capable and also available to view outside of the app.

User testing to find best interaction methods for how someone will use a smart device to view the poster. This included whether or not there should be a screen-based UI, pause/play function, or tap gestures for the posters.

35 INTERACTION DESIGN

FINAL DESIGN

DEAFHEAVEN

07 .

06 .

19

07 .

06 .

19 wolves in the throne room

Lorem ipsum

Lorem ipsum

th e vip ro er om

th e vip ro er om

HE

8p m

AL TH

21+

ch

els

ea

HE

8p m

AL TH

21+

ch

els

wo lfe

The Orpheum Theatre 842 S Broadway, Los Angeles, CA 90014

01.15.19 21+

ea

wo lfe

IAN STERLING

An video of the animated posters and AR interactivity can be viewed here: Augmented Reality Concert Posters

3D DESIGN & MODELING

3D LOW POLY ANIMAL STUDIES IAN STERLING

INTERACTION DESIGN

37

PROJECT BRIEF This project, originally an experiment with low-poly modelling techniques, resulted in a playful exploration of different materials used for 3D printing. Though the intent was originally a simple exercise to become more familiar with the modelling to printing workflow, this this became a fun way to learn new skills and have a tangible out come from the process. The subjectmatter I chose to model was based off my rather plump corgi.

TOOLS USED 3DSTUDIO MAX 3D PRINTING

39 low-poly aesthetic, and began modeling the design in 3DStudio Max after I had better visualized the concept on paper.

INTERACTION DESIGN

This project began with hand sketching how I wanted the model to appear. I went with a

IAN STERLING

PROCESS

FINAL DESIGN The final model was printed using an SLS 3D printer.

IAN STERLING

INTERACTION DESIGN

FINAL DESIGN 41

FINAL DESIGN

IAN STERLING

INTERACTION DESIGN

SURFING HUSKY VARIATION 43

THANK YOU.