GettyImages-533225515-1.jpg

Mastercard | baobab social media learning platform

Desktop and Mobile App UX + Visual Design

Baobab: a new kind of social network

Thousands of students from African countries pursue their education each year through the support of The MasterCard Foundation Scholars Program. Becoming a MasterCard Foundation Scholar can be a life-changing moment that opens up opportunities to study at top universities in Africa and around the world. 

 

At Artefact, I was asked to help design a community that would support Scholars throughout their education and set them up for success long after graduation.

 

This community would be based on a new social learning platform that elevates scholarship into a source of lifelong learning and empowers the next generation of African leaders to create social change.

Because this community was so large and diverse, we wanted to ensure the system was scalable across both desktop and mobile, yet each element completely accessible. We felt the onboarding process for new scholars would be critical to enabling integration. If we could get them to properly signal what they were interested in and tie that into the network, much of the rest of the experience would be set up for success. We began sketching big picture flows and interaction models before considering the details of the visual design.

I wanted the scholars to simply be able to say what they wanted to do. This led me to design a phrase-based onboarding system that would be the portal to the rest of the network.

This led to basing much of the UI around phrases to help make it more intuitive and clear.

We worked through dozens of higher fidelity UX flows to ensure the community was functional and accessible. 

 

The result was a community enabling scholars to easily exchange ideas and learn from each other. They are able to join forces and share resources on common challenges to help them accomplish their goals, boost their resumes, and attract employers. 

Baobab_Conversations and Community.png

Sparking conversations and community

Before Baobab, Scholars had no way to easily connect with fellow Scholars involved in The MasterCard Foundation across campuses and programs. Baobab acts as a digital rolodex, giving Scholars instant access to a community of students like them who share their experiences and can serve as a built-in support system as they adjust to life in a new location.

Baobab_Experience and Expertise.png

Connecting Scholars with experience and expertise

We designed space within Baobab for Scholars to meet career mentors and find job opportunities to accelerate their success once Scholars return home. Specially invited African business and community leaders participate in Baobab as mentors and chat directly with Scholars, answer their questions and provide valuable professional advice.

 

Today, more than 2,000 Scholars from nearly every sub-Saharan country use Baobab, with thousands of new users becoming eligible each year.

Scholars use the platform daily to connect with others, tackle shared challenges and find inspiration and guidance from mentors. For more information, please visit

Artefact 

Mastercard Foundation

 

 

 
construction.jpg

bitkemy | 

kagami erp system

Visual + UX Design

Custom erp generation

Enterprise resource planning (ERP) solutions are costly and time consuming to design, create and implement. The existing process is manual, consisting of many consultants conducting many in-person discussions followed by custom design and coding, equalling lots of time and money and limited ability to change the software once deployed without incurring high additional costs. 

 

Bitkemy asked us at Artefact to design a modular system that would "generate" custom ERP applications for businesses.

 

The amount of variables a system like this has to consider made this an extremely complex problem—one of the most complex in Artefact's history, in fact. We drew on Kagami's deep understanding of their target companies in areas of the world, such as concrete manufacturers in Africa, to learn how the custom applications would be used. We developed seven personas to address the complexity of people and roles involved in the process. We then created a set of scenarios that identified all of the key activities that each persona would need to generate the ERP applications. This helped us develop six overarching design principles to guide our design.

 

We sketched hundreds of scenario solution ideas and categorized them by task within each scenario.

 

These ideas addressed both what capabilities the application should have, and the unique ways the tasks might be realized in the interface. 

We then worked through dozens of UX flows and tested them with our clients to zero in on the final solution.

 

 

Solution

This process enabled us to design a system inspired by visual programming for kids that would be simple and flexible enough to mold to any of our client’s target organizations.

 

Our system had two main components: 1) Templates and 2) Projects.

Kagami_Process Flow Creation.png

templates

Templates are the starting point for projects that are manually created by industry experts and are intended to be reused by multiple projects in an industry. Templates look like logic diagrams and take a visual, contextual approach to programming. That is, only certain functions and options are available at contextually-appropriate places, helping the expert craft project flows quickly and accurately.

 
Kagami_Form Creation.png

Projects

Projects are the final product and output of the system. They are basically forms, such as an HR form, with each field having only the options specified by the template. The customization of these forms allows the organization to employ less technical people instead of high-cost ERP experts to reduce overhead costs.

 
Kagami_Projects & Templates.png

portals

We designed a series of portals for Kagami experts to access their various libraries of Projects and Templates while separating out the most relevant things at any given moment.

Kagami_Reports.png

dashboard

We also designed a dashboard view capable of generating extremely detailed custom reports. 

 

Through a series of iterative cycles, we designed the key product features and a large 100+ page document describing the functionality for the Kagami development team.

 

As of this writing, the product is still in development.

 

 
hr-64384_DARK.jpg

thales | avant ife experience

Visual + UX + Motion Design

Destination-Based entertainment

Thales, one of the leading in-flight entertainment companies in the world, approached us at Artefact to take the in-flight experience (IFE) to the next level. Building on the work we had already done for them in this space in 2015,

 

we felt there was an opportunity to bring the passenger's destination a little closer during the flight to help immerse and prepare them for the experience ahead.

 

We began by sketching out IFE UX flows that contained almost exclusively destination-based content and worked through ways that could logically and comfortably enhance the flight experience. 

 

We decided to base our concept on a flight from NYC to Paris, and themed content accordingly.

 

The flight to Paris, for example, featured films set in France with French artists, musicians, and travel guides peppered throughout. We took our designs to a higher visual fidelity and cut it together into a two-minute video that fleshed out the animations and transitions for a full IFE experience. 

 

 
3-alaska_airlines_terminal_signage_DARK.jpg

alaska airlines | call center ux strategy

Visual + UX Design

helping call center representatives

Alaska Airlines approached us at Artefact to help them improve the workflow and software user experience for their call center representatives.

 

The reps' fragmented and inefficient workflow hampers their ability to give the much-touted Alaska customer service.

 

After a couple of weeks of hands-on research at their call center, we synthesized our findings, gleaned insights, and developed design principles which informed every aspect of the design. We then began to sketch new workflow and software concepts.

 

 

We brought our concepts to a higher fidelity and created rough concept prototypes in Invision. We went back to the call center to evaluate them in-person with call center representatives, and

 

we refined the prototypes into a final flow that incorporated five key opportunity areas that we discovered through our research:

 

  1. failure-free synchronized data
  2. consolidated one-stop shop for info and apps

  3. pushed and contextual information

  4. consistent and intuitive UI
  5. automation of complex processes. 

 

We also provided a high-level roadmap for future rollout. The UX concept screens flowed through a future scenario as though Alaska had executed the full roadmap.

The scenario followed Gloria, an agent, through a call with a customer named Rebecca who called in with two issues on an existing reservation:

  1. Her sister’s name is incorrect on the reservation

  2. She needs to change an existing flight segment

The UX concept screens illustrated specific examples of solutions within each key opportunity area.

 

 

 

This project helped them understand the importance of approaching future development from a user-centered standpoint, and committing to doing it right rather than simply plucking off low-hanging fruit.

 

 
StockSnap_BSALH690F5_DARK.jpg

vmware | vrealize operations vision

Visual + UX Design

A new vision for vrealize operations (ops.next)

VMWare asked us at Artefact to establish a new vision for vRealize Operations (Ops.Next) based on research-driven insights.

 

The vROps application was understood by a relatively small group of “PhD” masters of the tool, and we were brought in to help make it more relevant and accessible to the rest of the users. 

 

After extensive user research across several states and companies, we noted plenty of challenges the users faced day-to-day. We saw opportunities to transform vROps from a “views and reports” tool to a portal that would empower teams with shared understanding and help IT business decision makes become proactive and confident about the health and capacity of their systems. 

We designed a customizable dashboard that would serve as the launching pad for the rest of the app in order to optimize for common workflows and reflect best practices. We enabled it with pin-able information cards and intelligent search to cut through the noise and provide clarity of purpose. We also designed a system of application-centric troubleshooting to provide for a varied set of users with a focused set of needs. 

We created click-through prototypes to paint a future vision where Ops.Next became a critical tool for more stakeholders within the organization.

 

We showed specifically how more team members would overcome the app's steep learning curve and use it daily to diagnose and resolve most problems.

 

This would free the “PhD” level masters of the tool from heavy use, allowing them to delegate more tasks to their team to focus on planning and strategy. Our vision would also enable customers to self-diagnose their applications and solve problems with fewer escalations.   

 

 
Emirates-flight-to-yangon_DARK.jpg

emirates | new passenger experience

UX + Storyboard + Illustration

a holistic brand experience that is unmistakably emirates

Emirates is more than the world’s premier airline; it is one of the world’s premier luxury brands. At Artefact we proposed a new In-Flight Entertainment (IFE) customer experience for them with today’s accelerated changes in consumer behavior firmly in mind. We felt they could create lasting product leadership for ICE (their proprietary in-flight entertainment system) through a continued commitment to being different and being the best. We also wanted to raise the bar for the entire industry and deliver the world’s most entertaining, innovative, and radically simple IFE customer experience. 

We researched emerging trends in luxury and travel and based our designs on much of the data we found. For example, in 2015, 77% of the time people are using a TV, they are simultaneously using another device. This has huge implications for the IFE category, as it is moving from a passive entertainment experience, to becoming the centerpiece of a connected digital ecosystem. Since Emirates' ICE originally debuted, a new media landscape has emerged—coinciding with major changes in consumer behavior.

 

How we buy, how we watch, and how we communicate has all changed dramatically. We saw this as an enormous opportunity for Emirates,

 

as well as a danger sign that if they failed to act, they might be ripe for disruption.

We storyboarded an experience that would bring the Emirates brand to life through the creation of the most unique, innovative and luxurious digital experience in any category—not just aviation. We prioritized entertainment, and wanted to radically simplify the core ICE user experience. We also wanted to celebrate the global experience by supporting dual-byte languages and making ICE accessible to an audience with different abilities. 

 

We showed how they might smartly use connectivity to surprise and delight the passenger throughout the experience.

 

Further, we personalized the relationship with the passenger to make it easier for them to engage with the content and services they want, such as Netflix.

We also designed an IFE VR scenario and explored the different ways VR might be leveraged to make the flight both enjoyable and unique.

 

Using StoryboardVR, we created a UX flow demonstrating interesting concepts, including how external cameras might be accessed to put the passenger in the sky without the plane. 

 

 
ZERO1-artefact-Vicis-Helmet-Hero_DARK.jpg

artefact | design management institute

Design Value Awards Application Poster Design

Artefact submitted two projects to the Design Management Institute (DMI) to be considered for Design Value Awards (of which, Vicis ZERO1 won second place). I was asked to design the print posters for the application.

 

The posters had to communicate the project value proposition and process at a glance, while still being somewhat comprehensive of the design process. 

 

 
Artefact-studio-western-Conference-1_DARK.jpg

artefact | artefact talks

Animated Title Visual Storyboards

Once upon a time Artefact was going to produce a series of thought leadership talks called "Artefact Talks." I was tapped to design the animated bumper package for the series.

 

The challenge was to "design something with personality and visual interest" while fitting into the constrained Artefact brand guidelines with clean layout, limited color palette, and zero visual assets to build from. 

 

I designed a series of visual storyboards to guide the discussion. I also created several animation concepts showing transitions and motion to suggest how these might come to life.

ArtefactTalks_Comp-3.gif
 

 
IDEO_Table_Screengrab_02_DARK.jpg

ideo | future of automobility

Visual + UX design

Project Team: Danny StillionWill CareyRicardo FigueiroaFrancois RybarczykDav RauchQuinton LarsonClaudio Fresneda, and myself

How will tomorrow be different from today? We’ll live longer and move faster. Our resources will dwindle while our technological capacity grows. But our basic needs to sleep, eat, work, and get from place to place will stay the same. That last part is what we were interested in. How will we move people, things, and spaces together in the next decade?

 

I was fortunate enough to be involved with nearly every aspect of the project including vehicle interior and screen design, as well as vehicle personality display

 

(Exterior SUV design by Ricardo Figueiroa). For the full rundown, visit automobility.ideo.com.

 

 
Face_Wide_01_DARK.jpg

personal | sunflower: tactile navigation system 

UX + Industrial + Visual Design

For my master's thesis at the University of Washington (M.Des, 2015), I designed a bodysuit-based navigational system for low-vision environments called "Sunflower," named after the flower that always orients toward the sun.

 

Sunflower is an exploration of new ways to interpret ambiguous information about the world around us.

 

People in low-vision environments often meet challenges that cannot be solved by handheld mobile devices. Firefighters work in extremely low visibility while carrying heavy loads. Parents fear a small child wandering off in a crowded public area, lost in a sea of bodies. Students on complicated campuses often bike outdoors, only to proceed indoors where GPS is no longer viable. In these situations where eyes- and hands-free are not optional, how might we use other senses to find what we are looking for? 

I created a Firefighter journey map to understand the navigational pain points and sketched out a ton of ideas that could help alleviate them.

Eventually this work led to the concept of a full-body wearable consisting of a network of tiny nodes that contain sensors, actuators, IMUs, and CPUs to orient a user to the environment. Similar to pixels in a screen, the nodes fire together in swarm patterns to generate haptic feedback from the surrounding environment. Although the uses for a device like this are countless, this project focused on design to impact personal navigation, particularly in low-vision environments.

Sunflower provides both an eyes- and hands-free solution by locking on to a destination within a scanned 3D floor plan of a building and leading the user by touch.

 

Sunflower generates a pulse that moves freely across the body informing the user of the location of the destination.

 

It also provides a secondary pulse for decision point assistance to guide left, right, up, or down. As the user approaches the destination, the pulse intensifies like a game of “Hot and Cold” until he or she arrives. Through this combination of pulses, the user essentially feels 3D space.

 

I roughly prototyped the pulse in a couple of different ways to test whether this pulse idea would be effective. The test results showed that it actually holds a lot of promise.

Sunflower_-Tactile-Navigation-in-Low-Vision-Environments-Pages_RGB_FINAL39.jpg

sunflower

Creative Process Breakdown

 

 
SUL02_Logo_03.jpg

sulky bros. | Brand identity

visual design

A few years ago I designed the corporate identity system for my design firm, The Sulky Bros. Manufactorium that I formed with my best childhood friend, Brandon Brown. Our own narrative of a couple of designers who shared the same hopes and dreams since middle school informed everything from the main brandmark, Robbinius J. Robb (which may or may not have been named after something like this) to the short story script and world design that informed everything else.

Robbinius, or Robbi for short, emerged from an infatuation with flight and discovery in a simpler time, and symbolized this childhood friendship forged in a time of less care and responsibility. The mark was designed to symbolize the challenges and efforts of two designers who wanted nothing more than to break the gravity that bound them to this earth to see the world from an uncommon vantage point.

I extrapolated the phrase "a simpler time" to a Victorian, fleur-and-bent-metal visual theme that inspired our main logo typeface as well as decorative elements and layouts.

 

I maintained strict Swiss design principles of clear hierarchy and ultra-generous whitespace to prevent these visual forms from becoming gaudy.

 

The result was a clear, yet personality-driven and rich identity that conveyed the energy and creativity of the Bros., and lent itself well to any design space across screen or print.