Maurice Matthew UX/UI Product Design

Background · Creating illustrations for a new feature setup

As a critical feature for customers, senior stakeholders took a strong interest in setting this feature a part from the rest, in evry way.

I was brought in to work on the illustrations for the feature, allowing the User Experience Researcher time to focus on the constant changes to the flow, and screens.

Opportunity · A friendlier flow for complex configs

As IT software doesn't strike many as simple or pleasant, the team found the opportunity to flip the script and provide our users a guided, and visually appealing flow that stands a part from the competition. To give our users a sense of what they're configuring and the affect it might take on the devices they manage, it was decided that setting would be accompanied by a visual representation from the device's perspective.

With the amount of flexibility the options provided by each setting, the team decided to be as ambiguous as possible, keeping the doors open to endless possibilities. Being IT software, many changes to the settings aren't represented visually to the end user, therefore, part of mission was to make a distinction between those that happen in the background and changes to settings that can be shown within the UI.

How might we design illustrations that depict front-end and back-end scenarios and align with the stakeholders’ vision?

Goals · Softening the enterprise edge

Although this is an enterprise product, to align with the business’ goal of improving the products visuals and make the the product more welcoming and conversational, the stakeholders wanted to introduce a look that was still professional, but also pleasantly simple through softer queues.

Slightly curved corner radius

Soft color palette

Soft shadows

Design language · Matching visuals to mental models

As the team was sorting out the vision for the illustrations and what needed illustrations, with the different setup questions each screen presented, we decided to make a distinction between abstract and representational screens.

concrete phone views

blurred, hazy setting

Sketching · Visualizing the configuration through sketches

Before moving onto digital illustrations, I began to draft sketches based off of each setup prompt. During this process I was able to focus on shapes and composition.

Iteration · Sketch to hi fidelity illustration

After some time of sketching and iterating, I shifted into digital. This process began with modifying open source shapes and creating my own to suit stakeholder’s vision, the feature’s styling and of cource, the prompt.

Solution · Introducing product feature illustrations

Results · Simply delightful

By incorporating more illustrations into the product’s core feature, we support the business’s goal of creating a friendlier, more engaging experience that reduces cognitive load and offers users alternative ways to process information.

Increased product engagement

With the additin of these illustrations, the feature is a driver for new customers, and a better quality of experience for it's users.

Reduced cognitive load

By allowing users to visualize the options and choices they were making, users would have a simlper time understanding what the step sre asking of them.

Learning opportunity

K.I.S.S (Keep It Simple Stupid!)

It becomes very easy to want to include all the bells and whistles when designing, but it's very important that you keep the problem in the forefront and not include anything that wasn't helpful in getting the message across.