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
PHYSICAL PROTOTYPING EyeDuino
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
PHYSICAL PROTOTPYING
45 For this project, the assignment was to create a wearable device which would visualize information about the user’s body. I chose to create an Arduino-based head-mounted display (HMD) unit, nicknamed “Eyeduino”. The goal was to use Eyeduino as an inexpensive wearable platform capable of visualizing realtime data based on whatever sensor was in use. In this case, I used Eyeduino to render a visual representation of data being collected by an absolute orientation sensor. The data generated manipulates a three-dimentional wireframe cube which is viewable
IAN STERLING
through a small transparent lens. As the user move’s his or her head, they are able to smoothly shift the perspective of the cube accordingly.
INTERACTION DESIGN
PROJECT BRIEF
TOOLS USED ARDUINO FUSION360 TYPE A 3D PRINTER
INITIAL RESEARCH After having conducted an obsessive amount of research on the technology used by a number of optical HMD’s, I figured I’d try to replicate a more economical version of the same type of display used by Google Glass.
47 In this stage, I attempted to create a display system with Arduino and some
IAN STERLING
laser-cut acrylic pieces.
INTERACTION DESIGN
RAPID PROTOTYPING
After a heavy amount of testing and further research, I scaled down the display and used a small microcontroller in order to make the device an actual wearable.
FURTHER DEVELOPMENT After sketching and measurement, I used Autodesk’s Fusion360 to model the enclosure for the electronics. I chose to keep the wires still visible in order to give the piece a cyberpunk aesthetic.
IAN STERLING
INTERACTION DESIGN
49
FINAL ASSEMBLY To make the device wearable, it was attached to a pair of simple shop glasses. When worn, the Eyeduino displays a wireframe cube which updates in realtime and moves based on the user’s head position as tracked by the absolute orientation sensor. A video of the device’s functionality can be viewed here: Eyeduino AR headset
51
USER INTERFACE/USER EXPERIENCE PocketCPR Spotify Music Video and Lyric Feature Augmented Wrist Wearable (AWW)
INTERACTION DESIGN
CONTENTS
AR Concert Poster
3D MODELLING Sci-Fi Virtual Reality Rig 3D Low Poly Animal Studies
THANK YOU.
IAN STERLING
MOTION DESIGN