michele erin clarke

{product designer}

 
 

What is mPath?

An enterprise app platform that enables teams on-the-go to quickly build and customize internal apps to do their jobs. Without coding and in less than a day, team members can create and share a fully functional native app with their coworkers on iOS, Android, and (coming soon) desktop web.

 

My experience & roles

The mPath platform is one of the most challenging and rewarding products that I have helped create. I contribute as interaction designer, visual designer, customer lead, researcher and quality tester.

Short intro video

Watch this video for a one minute overview of the mPath platform. It provides helpful context for my portfolio work to follow.

 
– mPath Web App –

Overview

Even for teams on the go, people need to access their data from their laptop or while at their desk. Once our iOS and Android v1 apps went live, we got to work extending the platform for the web. Since our iPad optimized app is still in progress, the Web App is designed to scale down to the iPad.

My role

I lead the Web App project as interaction designer, visual designer, researcher, tester, and co-product manager.

Apple monitor
Web/Studio - All Pathlets Web/Studio - Table Options Web/Studio - List of Datacenters Web/Studio - Assets in a Datacenter Web/Studio - Tap to Search/Filter Web/Studio - Filter Options Web/Studio - Search&Filter Web/Studio - Search Web/Studio - Search Results Web/Studio - Select an Asset Web/Studio - Asset Detatils Web/Studio - Save the view Web/Studio - Rename the view Web/Studio - Quick Add Web/Studio - Add Asset Web/Studio - Clear Search Web/Studio - All Assets Web/Studio - Scroll to view more Web/Studio - Sort Web/Studio - Save View 1 Web/Studio - Save View 2 Web/Studio - Customize Pathlet
Initial Vision
DESIGN DATE
Fall 2015
During my first year at mPath I learned a lot about what works, what doesn't, and how our product could be even better for our customers. The main discovery was that people want an app to do their work, but they don't really want to build it from scratch. Building was just a means to an end. As long as they could customize (aka tweak) the app to show the data to match their workflow, they were happy.
Presented with an opportunity to add a web app to our platform, I designed a proposal that blurred the lines between our Studio Editor to build apps and a Web App to access data.
What is shown here is the experience once an initial Pathlet is automatically generated for you. As you do your work and interact with your data (navigating, searching/filtering, and saving views) you are dynamically customizing your app, perhaps without realizing. I like to think of it as "the art of building, without building".
(Fun inspiration clip ›)
 
Apple monitor
Web App - Sketches - Datacenters Web App - Sketches - Pathlet Switcher Web App - Sketches - User profile Web App - Sketches - Options Web App - Sketches - Datacenters - scroll Web App - Sketches - Datacenters - select one Web App - Sketches - Assets table Web App - Sketches - Assets table - scroll Web App - Sketches - Quick add Web App - Sketches - Inline add Web App - Sketches - Table edit Web App - Sketches - Table edit - single Web App - Sketches - Multi-select Web App - Sketches - Multi-select Web App - Sketches - Multi-edit Web App - Sketches - Multi-edit select field Web App - Sketches - Multi-edit field Web App - Sketches - Multi-edit save Web App - Sketches - Multi-edit success
Sketches
DESIGN DATE
Fall – Winter 2015
The initial vision was well received by the team as inspiration for the future. Following this I led discussions grounded in customer needs to help narrow the scope and agree on the features to support in our first version.
Once set, I explored various designs with Balsamiq sketches. This example is a mix of compact views to quickly find data and interactive tables optimized for viewing and editing large data sets.
 
Apple monitor
Web App - Sketches - Datacenters Web App - Sketches - Assets by Row & Rack Web - Skethes - List of Assets Web - Sketches - Asset Details Web - Sketches - Pathlet Navigation Web - Sketches - Global Compose Menu Web - Sketches - Compose View
Sketches
DESIGN DATE
Fall – Winter 2015
Another concept extended the experience of our iOS and Android apps to the desktop, so that customers familiar with the phone apps could open the Web App and immediately know how to use it. It mimicked the apps, while still optimizing layout and interactions for the web/desktop. This concept was selected for our v1.
I continued using sketches as I worked through the interaction details and numerous design reviews with the team. Once finalized, I moved into visual design.
 
Apple monitor
Web App - Asset Management - Datacenters Web App - Asset Management - Assets by Row & Rack Web - Asset Management - List of Assets Web - Asset Management - Asset Details Web - Asset Management - Multiple Assets Selected Web - Asset Management - Edit Multiple
Visual Design
DESIGN DATE
Winter 2015 - Spring 2016
With the core layout and interaction design complete, I worked on the visual design.
By this time our other designer had finished designing the v2 of our iPhone app, which was a complete overhaul of our first version. In order to keep the products aligned, I used this as the visual base for the Web App.
The Web App is currently being developed and is not yet live, but I am happy to demo the progress so far.
 
Transitions & Animations
DESIGN DATE
Spring 2016
Once I completed the core visuals, I prototyped the transitions/animations.
This exercise served two purposes:
  1. Explore which transitions/timings worked best.
  2. Provide a detailed spec to engineering.
– mPath Studio –

Overview

In the mPath Studio, you can drag and drop data fields to create a Pathlet (aka mini-apps). Once ready you can instantly publish the Pathlet to your entire team or individuals. They will instantly receive it on their device (100% native app, no app store submission or approval process needed).

My role

The Studio Editor was designed and built primarily from Spring 2014 - Spring 2015. My roles included lead interaction designer, visual designer, and tester.

Contact me for a demo

The initial design work took place my first year at mPath. That work is not yet included in what is shown below. If you are interested, I am happy to give a demo with a walkthrough of my designs.

 
Studio Sign in - Mobile Studio Sign in - Mobile Studio Sign in - Tablet Studio Sign in - Desktop Studio Sign up - Desktop Studio Sign up - Desktop Studio Sign up - Desktop
Sign in & Sign up
DESIGN DATE
Summer 2015 (pre-launch)
Although the Studio Editor is designed to only work on iPad landscape or larger, we know that potential customers can come to our sign-in page from any device. As such it was designed to be responsive to make it easier for people to sign up, regardless of what device they are on.
We officially went live at the start of Fall 2015.
 
Studio - Welcome Studio - Get App Studio - Pathlets Studio - Add Pathlet Studio - Add Pathlet Settings
Getting Started
DESIGN DATE
Fall 2015
For most customers, we work with them directly to learn what they need and then we build the Pathlets that they can further customize. For those we do not partner with, I completed various designs to help them get started.
 
Studio - Add Widget Studio - Assign Field Studio - Assign Field
Visual Refresh
DESIGN DATE
Winter 2015
The initial visual design for Studio began to feel "heavy / dark" over time, which is contrary to a perception of "light / easy to use". I revisited the visual design to brighten the overall experience as a new feature (the mPath User Widget) was added.
– mPath Android App –

Overview

Development of the Android app began after the release of our first iPhone app. Our engineering team took the lead in mimicking the iPhone app, using standard Android components where applicable.

My role

As code was in progress on the various features, I tested the app to identify bugs and user experience issues. Where needed I quickly created mocks and visual specs to help the engineering team polish the app experience. Below are a few examples.

Android Galaxy S3 frame
Android-Maps Android-Maps Android-Maps Android-Maps Android-Maps Android-Maps
Address/Maps
DESIGN DATE
Summer 2015
To help the user enter a correct address, I designed an experience that supports current location, recent locations, and nearby places as the user searches. Once an address is selected, a map displays the location. For saved records, quick access to directions and time-to-destination is available.
 
Android Galaxy S3 frame
Android-Signup Android-Signup Android-Signup Android-Signup Android-Signup
Password set up
DESIGN DATE
Summer 2015
When new team members are invited, they receive an email with a link to activate their account and create a password. For enterprise level security, the app has strict password requirements, which can often be difficult for people.
To help the user, the design ensured that all password requirements are easily visible. If any requirements are missed, they are explicitly identified to help the user fix. And of course, success is celebrated.
– mPath iPhone App –

Overview

We recently launched the 2nd version of our app in the App Store! A complete re-write from the ground up, written with Swift and various other new frameworks.

My role

My fellow designer Aaron Sagray is the lead on both the v1 and v2 of our iPhone app. I contribute through design reviews, customer research, and testing. On a few occasions I designed features, which are showcased below.

iPhone 5 frame
iPhone Date Widget iPhone Date Widget iPhone Date Widget iPhone Date Widget iPhone Date Widget iPhone Date Widget iPhone Date Widget iPhone Date Widget
Date Widget
DESIGN DATE
Summer 2015
First of all, a date widget should always come with a calendar. I feel that is essential to a good user experience. When selecting a date we often think "next Monday" and then with the aid of a calendar, identify that as Feb 15.
That being said, since Apple does not support this by default in code, it is always extra work to develop into an app. This was not our top priority at the time, so my design of the date widget aimed to still help the user a much as possible.
The standard date picker opens up directly below the field, with the day of the week displayed. As such, it is possible for near-term dates to scroll the picker to select "next Monday".
 
 
iPhone 5 frame
iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter iPhone List Filter
Filtering on Lists
DESIGN DATE
Winter 2015
Many of our customers, especially those in Datacenters, have a lot of data to track. In order to find a record, customers rely on search and filtering.
For this feature I designed the Studio portion and assisted Aaron in the design on the iPhone. My key contribution to iPhone was always showing a dynamic counter of how many records would display as you added / removed filter criteria. As such, when you finally hit "Done" to apply the filters, you will already know how many records will display.
This can be especially helpful in scenarios where the combination of filters selected results in zero or few results. (This is not a new design, and I must give much credit to VRBO over the years for doing this well as I searched for places to stay.)
– Specs for mPath –

Overview

Ah, specs! The "fun" part of a designers job. I am very thankful to all engineers I have worked with that are comfortable using Sketch & other deign tools as reference when coding. That being said, I believe specs are often an invaluable resource and am a proponent of making them when needed.

My role

At mPath I have not only done specs for visual and interaction design, but also for some of our platform architecture. A core aspect of our Studio is the underlying logic that understands the database schema and assists the user in designing an app with data flow integrity. I designed this logic and spec'd it for the team.

 
Widget Interactions - Text Widget Web app List spec Studio - Screen Connection & Data Flow Examples Studio - Screen Connection Logic Studio - Loading Animation Spec
Sample specs
For the larger images, you can tap on the fullscreen button and zoom your browser to view the specs in more detail.
 
 

Intuit - Financial Services Division

The Financial Services Division at Intuit created white-label apps and online banking services for thousands of smaller banks and credit unions. As such, our customers were both the banks (B2B) and their customers (B2B2C). In fall 2013 Intuit sold this division to an investment company, and the team operated under the name Digital Insight.

My role

Over the course of over 7 years I worked on a wide range of products, primarily as lead interaction designer. At times I also dabbled in visual design, research, testing, and coding. The project work below showcases my designs during my last few years.

iPhone 5 frame
Screenshot of iPhone login Screenshot of iPhone menu Screenshot of iPhone accounts Screenshot of iPhone account history Screenshot of iPhone transfers Screenshot of iPhone transfers success Screenshot of iPhone bill paye scheduled payments Screenshot of iPhone bill pay payees Screenshot of iPhone bill pay payment Screenshot of iPhone locations map
iPhone App
Redesign of the white label mobile banking app. The app has a 4.7 star average rating across 500+ small banks & credit unions.
RELEASE DATE
Summer 2013
  View more images! Swipe or click
 
iPad frame
Screenshot of iPad login Screenshot of iPad accounts Screenshot of iPad account history Screenshot of iPad transfers Screenshot of iPad transfer success Screenshot of iPad bill pay payees Screenshot of iPad bill payment Screenshot of iPad locations map
iPad App
White label mobile banking app for hundreds of small banks & credit unions.
RELEASE DATE
Fall 2011
 
Android Galaxy S3 frame
Screenshot of Android phone login Screenshot of Android phone accounts Screenshot of Android phone account history Screenshot of Android phone transfers Screenshot of Android phone transfer success Screenshot of Android phone bill pay scheduled payments Screenshot of Android phone bill pay payees Screenshot of Android phone bill pay scheduled payment
Android Phone App
Redesign of the white label Android banking app that services 500+ small banks & credit unions.
RELEASE DATE
Summer 2013
  View more images! Swipe or click
 
Android Tablet frame
Screenshot of Android Tablet login Screenshot of Android Tablet accounts Screenshot of Android Tablet account history Screenshot of Android Tablet transfers Screenshot of Android Tablet locations map
Android Tablet App
White label mobile banking app for hundreds of small banks & credit unions.
RELEASE DATE
Spring 2013
 
Apple monitor
Screenshot of Bill Pay Screenshot of Bill Pay reminder setup Screenshot of Bill Pay payment history
Bill Pay
A complete redesign of the existing offering in order to simplify the experience. Focus was placed on primary vs. secondary features in order to only show the key elements up front and reveal secondary elements to the user as needed.
RELEASE DATE
Spring 2012
 
Apple monitor
Screenshot of the mobile branding tool for iPhone Screenshot of the mobile branding tool for iPhone Screenshot of the mobile branding tool for iPhone Screenshot of the mobile branding tool for Android Screenshot of the mobile branding tool for Android Screenshot of the mobile branding tool for Android
Branding Tool
A visual tool to help banks and credit unions select their brand options for Intuit’s white label mobile banking apps. Supports app previews for iPhone, iPad and Android Phone and tablet. In addition, allows Financial Institutions to upload their logo in various permutations and auto-generate all of the required sizes for submission to the app stores.
RELEASE DATE
Spring 2013 (white space project)
 

Graduate School

Master's degree in Human Computer Interaction
Graduated in August 2006

Company experience

As part of two projects, I had the opportunity to work with both Microsoft and Google. To a certain extent I am able to discuss those projects. Below is a separate project completed as team with two others classmates for an interaction design class.

Samsung tv frame
Sonovis
An audio-visual experience for the young modern that reintroduces album art as an expression of music, while offering simplicity of control throughout the home.
Masters of HCI project
Spring 2006

If the video does not work or if you'd like to download, try these versions: MOV | MP4 | Ogg