WORKS | UX Designs

CASE STUDY 1.1/ Fleetmatics Infotainment Integration / VHU

A goal here was to show the usage relationship between a mobile UI and an Infotainment UI and how they potentially could be used together while also complimenting each other. Using the desktop display mode in Invision allows the display of multiple screens which helps show the proposed functional and usage relationships.

Shown here is a potential mobile app job scheduler view and the initial VHU default screen if the mobile device has been paired with the vehicle. The visual format of the VHU is from the Ford Sync 3 specification. The initial screen confirms location and that the mobile device is successfully paired.

This document was part of a series of documents showing a potential UX for mobile and infotainment integration, these visual experiments help to emphasize the importance of adapting the UI to limited attention scenarios.

CASE STUDY 1.2 / Fleetmatics Infotainment Integration / Steering Wheel D-Pad

A goal here was to show and indicate some sample interactions via a vehicle steeling wheel's integrated tactile interface elements. Also visualized is a notifications view, inspirations included Ford Sync3 and Android Auto interfaces.

This document was part of a series highlighting various use cases, in this case exploring how notifications might be envisioned helped to conceive a potential UX and design direction going forward.

Interactions while driving need to be limited as not to increase distraction. Vocal commands help with this by keeping visual attention on the road, however care still must be taken when designing the overall experience as listening, concentrating, and physical movement all add to the complex task of driving, any and all tasks need to be considered and optimized as to have the smallest of impact on driving attention.

CASE STUDY 2.0 / Small Asset Tracking / Alert Types Flow Analysis

This project emerged after market analysis revealed that lost, stolen or left behind Assets (tools and equipment) constitutes significant financial losses across multiple industries. The team conducted quantitive and qualitive studies to determine current state market landscape and to gain customer insights into the problem of lost assets.

Shown here is a flow diagram outlining the communicative relationships of the primary user roles with the differing alert types they would use. It was necessary for me to visualize potential alert flows as I development the overall interface so as to: 1) show who participated in which alerts, 2) show who needed validation and confirmation, and 3) show an overview of specific alert types and how they could be categorized among other functions.

The team worked closely to define what hypothesis we were trying to confirm. The team was composed of a Product Lead, a Technical Lead, myself and the project Manager. Having an international conference during the project helped the team focus and to deliver concepts and a working prototype on-time for the event.

During the interview process, I discovered the extreme diversity within the industries we were looking to provide solutions for. Determining the use cases that best justified the potential resources needed for development and subsequent hand-over of the project became a source of insight helping to guide the design direction of the project.

The document helped the team see at-a-glance which alerts could be used for an initial POC and it helped me visualize the necessary use cases I used in all prototypes I subsequently created.

When a new team starts to work together (especially remotely) its vital that alignment on project goals and mission are clear. Clear and continual communication helps to resolves non-aligned teams.

CASE STUDY 2.1 / Small Asset Tracking / Map Marker Icons

A core view within the asset tracking UI we were developing was the map view that details vehicle status, asset status, movement indication and other relevant indicators. All possible iconic representations were needed to show the widest amount of potential uses. In order to achieve this a conceptual icon set needed to be designed.

After researching all scenarios that we predicted we would need representation for, I created a color-coordinated, consistent look-and-feel icon set that could temporarily represent the intended functional coverage.

This icon set allowed me to create multiple designs and iterations going forward, and it represented a robust set of indicators I could consistently apply.

CASE STUDY 2.2 / Small Asset Tracking / Click-through Prototype

Represent the results of our research and proposed solutions in a click-through Invision prototype showing interactive flows of both Field Technicians and Mobile Supervisors.

Chief concerns we had throughout the development included: which customers to test with, how much do we let ourselves be constrained by current internal application functional specifications, and will divergent design ideas cause confusion to current customers. In the end we were able to achieve the go-ahead to hand over the project based on the decisions we made throughout our development process. This supports the idea that having a bias for action and taking risks often benefits a speedy output and quick-to-market strategy.

CASE STUDY 1.0 / Mobile UX Redesign / Current State Step Analysis

The companies flagship app is one that is essentially a karaoke experience that records your performance. When I first started and as I studied the UX flow, I noticed friction in the current state UX design notably clumping of functions in certain views. I thought it would be better handled by relocating some of them based on the mental model of what they represent and at the moment of when they are most needed. I first created this step analysis document to show how steps were not optimized and how they could be best associated with a beginning, middle, and end modes in the mental model of the user.

I took initiative and ownership for the redesign as I noticed the cause of the issues were the organic nature of the legacy development process and how constant change of the UI without thoughtful consideration of the future accumulates design debt going forward. I felt it best to redesign the core flow before adding in more requested features, allowing the new features to more seamlessly integrate with the app.

CASE STUDY 1.1 / Mobile UX Redesign / Flow & Feature Wireframes

Based on the step-analysis (shown previously) I was able to move forward with the proposed re-design of the flagship app. I then designed a new approach that addressed flow issues and feature placement issues while allowing new space for proposed new features in an ordered, cohesive flow. New design features included tabbed navigation that gave more screen space to features that had poor discover-ability. I created a better organization of finishing-state actions calling this added view POST and it included the features associated with the after-editing state. I also revised and unified icon representation that gave both consistency and uniqueness to the icon set.

I was glad to deliver these design solutions quickly in mid-sprint and felt that my decision to advocate for a redesign was the right thing to do. The new design and proposed ideas were received positively and had alignment between both stake-holders and the dev team.

CASE STUDY 2.0 / Mobile Game Design / Flow & Feature Wireframes

Part of the company's products included educational digital tools for students to learn about and development their understanding of music. One growing area of engagement we wanted to develop was mobile gaming.

The basic challenge shown in this example was how to create a gaming experience that teaches and excites students while being fun and easy to use.

Our goal was to teach music fundamentals to the elementary school age group and so we brainstormed ideas and iterated possible multiple interactive scenarios to find the best potential options. We finalized our ideas on three initial areas: Scales, Call and Response and Melodic training.

Some insights from my research emphasized how the rise in digital tools and the increasing popularity of gamification into the educational realm are making digital learning experiences more engaging and more commonplace in the industry.

CASE STUDY 1.0 / Customized Application / Music Clearance Dashboard

I was the lead UX/UI Designer on an application designed to manage the entire process of music licensing for Warner Bros. I worked closely with the product designer to translate client work flows and specifications to a new set of digital tools not yet available within the industry. I delivered all required documents including, site maps, wire-frames, interactive prototypes and visual designs to the development team.

Design and create an application dashboard that successfully collects and displays the essential data sets for users to quickly get a sense of their project's status. Also allowing them to take project level actions and quickly navigate to those other areas of work the user chooses to address.

Incorporated feedback within iteration cycles from the Product Designer and client to create a continually evolving design. I constantly refined and adjusted the design and the display format to best digitally represent the optimal user work flow.

Allowing the users to provide work flow details while listening carefully to their ideas concerning data visualization, gave me the opportunity to design a unique custom visual solution that integrated well within the dashboard format.

Design expectations can vary wildly between internal concerns and client concerns, balancing both these views in order to maximize UX quality should be taken into account early on in the project.

CASE STUDY 1.1 / Customized Application / Budget Details View

Create a singular, easy-to-comprehend view to manage and quickly see an at-a-glance view of the fiscal details of a project.

Incorporated client feedback with the Product Designer's outline to create a clear data visualization of financial status.

Knowing the required engineering effort on proposed interface interactions influences design direction. Working closely with the development team during the discovery phase of a project benefits the product's feature sets by determining what can be realistically delivered within a project's time-line.

Listening carefully to various multi-disciplinary inputs advances the experience, by pushing what was previously thought possible further than originally conceived.

CASE STUDY 1.2 / Customized Application / Clearance Details View

I was also the lead visual designer on all projects. I delivered all the required visual design elements including, final designs, graphic assets, and style guides.

A significant UI challenge was to create a consistent look and feel during an organically evolving and constantly changing design. The above sample was especially challenging as there were so many data elements and interactively that needed to be represented.

Building and updating a visual style guide was crucial to organizing and maintaining the application's visual consistency.

Using interactive page elements, for example modal windows, tabs, flyouts, and pull downs was instrumental in organizing hierarchical content and non-linear work flow navigation.

Information architecture and content organization play a very important role when data sets are large and complex. Making the UX seem simple while managing large data complexity produces a rewarding and productive experience.

CASE STUDY 1.0 / Online Policy Editor / Task Flow

This project was an online insurance policy editing interface in the process of ongoing development. I joined the team with the Project Manager and the teams' developers assisting with the visualization of the user journey throughout the multiple tasks needed to edit policy details. I acted as the UX designer by rendering developer produced user stories and the project manager's presentation documentation into annotated wire-frame documents showing interface details and interactive elements.

Upon entering this project, I immediately determined there was an clear need for more UX documentation. The scope, tasks, and interactivity were not clearly outlined or visualized in a useful way. I took initiative and acted as a UX designer to create this task flow document to bring more clarity to the project. The document intended to allow all stakeholders to see the interactive elements of each step as well as visualize the customer journey in order to help guide ongoing software development iterations.

After learning about the project goals and current development status, I applied screen delineations and numerical versioning to isolate distinct experience views and tasks. This aided with cross-team communication and team alignment.

I was glad to work with the project team members and provide them documentation to help visualize the user experience. I learned the documents I created were a big help to the project by enabling the project manager to clearly show the overall project scope along with the individual interactive steps to executive stakeholders attached to this project.

For large corporations without a dedicated UX designer role on the project team, lack of communication and increase of experience design-debt is very likely. I was happy to contribute to help solving these issues on this project.

CASE STUDY 1.1 / Online Policy Editor / User Flow Wireframes

My challenge included the creation of an easy to see-at-a-glance UX document, visualizing the entire interactive process. The document intended to allow all stakeholders to see the interactive elements of each step as well as visualize the overall experience map in order to help guide ongoing software development iterations.

The project had a very limited amount of documentation, so I quickly accessed the project goals and constraints and provided imagery to help facilitate a fast completion to next steps in the development process.

The amount and complexity of the tasks was surprising for a mobile experience, limiting user actions to singular and simple steps throughout the complete user experience was a unique insight.

The mobile view documentation was useful for both executives, managers and developers to formalize the UX outline, facilitating better communication for all stakeholders working on the project.

CASE STUDY 1.2 / Online Policy Editor / User Configuration Wireframes

The complexity of the different user scenarios was a major challenge to visualize. Understanding policy details, legal constraints, and various use cases was instrumental in the development of the UX design process.

Working closely with the team, we broke down the use cases into fundamental groups with basic goals formalized, then I rendered this core functional flow into a fully realized UX wire-frame showing complete interactive elements rendered in a mobile view.

Again the complexity of this project clearly showed me the importance of cross-disciplinary team work. All team members need to share their knowledge and skills with the team as a whole in order to meet the challenges of complex software requirements.

Meeting the challenge of this project was difficult, leading to a high sense of accomplishment when delivering finalized documentation. Overcoming problems though design is one of the most rewarding experiences as a UX designer.