User Interface

Anticipating the User's Eye and Hand Movements

Obtaining a positive user experience evolves anticipating the user's needs before the user has a need. This occurs in both the system and in the design. Cohesion of these two elements ensures the user's needs have been met.

It doesn't matter how dynamic a system is, if the user does not have an immediate visual connection to the product, they will not continue to use it. Likewise, a the system that is visually pleasing, but is non-functional, will quickly loose the user. Both will translate into a poor CX experience.

Want to test drive some live prototypes? Click on the buttons below.

Adobe Xd UI Mobile App Prototype AXURE UI WEX Exercise Prototype

AXURE UI Dashboard Prototype

Or scroll through the slide shows below to see screen images.

Professional young man working on tablet.

Prototype Design

Testing before Production

Prototype design allows for user tester to occur to ensure a positive user experience. This process provides the opportunity for redesign. Prototyping can be in the form of a physical product or beta testing of software. Systems such as AXURE and myBalsamiq are industry standards for prototyping.

Prototyping can be done in low or high fidelity. I use low fidelity prototyping to test the user on the system. This allows for the user to stay focus on the task and not get distracted with wanting to provide design critique. Low fidelity testing benefits the development team. To test for user product interaction, I like high fidelity prototyping. This allows me to determine the product's visual and physical appeal to the user. High fidelity testing benefits the design team.

UI Dashboard and Calendar

Visual Design and Prototype with Adobe Xd

Adobe Xd provides the ability to design and prototype in the same application. This demonstration focuses on the UI of quick editing of events and tasks. It also demonstrates calendar interfaces.

Step 1

Dashboard welcomes the user with the user’s name and provides the user their Pipeline, Events and Tasks. The calendar is designed off of MobiScroll design style.

Adobe Xd Prototype

Step 2

The user is able to quickly edit the user through a swipe right action.

Step 3

User is shown editable fields for the event.

Step 4

Editing the time will provide the user the ability to edit their time.

Step 5

Editing the date will provide the user with a calendar.

Step 6

Swiping left will allow the user to delete the event.

Step 7

User is provided confirmation that the event has been deleted. They are also provided with the ability to undo or close out.

Step 8

Slide right on the edit allows user to a quick edit.

Step 9

User is shown indication that task is ready to be edited.

Step 10

User sliding left on the task will engage the delete interaction.

Step 11

Slide left provides the user the ability for a quick task delete. User can undo this task or close it out.

Step 12

Closing out brings user back to the Task section without the deleted task.

Step 13

User is provided a legend for their events and tasks. Events area represented by squares in the upper left corner of the date. Tasks are shown by triangles in the upper right of the date.

User is provided the current day through a filled square.

Step 14

When user selects current day, they are shown the date, tasks and events for the day. User is provided the ability to add an event or task or to close out.

User is provided with the event and task legend icons to assist with recognition rather than recall.

Step 15

User selecting a past or present day is shown their selection by a grey box around the selected date.

Step 16

When user selects an upcoming or past date, they are provided with the events and tasks for that day.

User is provided with the ability to add an event or task for the day or close out.

Step 17

When user closes out the daily brief, they are shown the calendar with the legend.

Previous Next

Basic Bootstrap with Customized Option

Live Coding Prototype with PhoneGap

This first form demonstrates basic Bootstrap buttons with the option of how the buttons can be styled to match the form. This style implements material design concepts.

Classical Style Form

Live Coding Prototype with PhoneGap

This classical style form is implemented in the color palette and shape. The form elements match the heading. The buttons were design to provide aesthetically pleasing user feedback.

Tab Style Form

Live Coding Prototype with PhoneGap

The Tab Style Form provides the option when multiple forms are required. Separate forms can be implemented in a small space through the use of tabs. Form elements and buttons continue with the tab style to provide a positive user experience and feedback.

Bright Style Form

Live Coding Prototype with PhoneGap

The Bright Style Form gives an updated and freshing look to forms. Subtle changes in the IdX provides the user feedback on form input.

Bar Style Form

Live Coding Prototype with PhoneGap

The Bar Style Form provides a combination of classic style with a bit of a modern feel. Using the strength of the bar provides an almost animation feedback to the buttons.

Previous Next

WEX Home Page

Your Weather Exercise Experts

WEX is a prototype weather and health fitness application. With one press on your phone app, you can quickly see whether the weather is conducive to outdoor exercise by providing the air quality index.

Level 1 Prototype: Main navigation usability.

AXURE Prototype

WEX Timer Page

Exercising is all about timing.

WEX timer page provides quick access to timing your exercise routine.

WEX Tracker Page

Tracking your Heart Rate Progress

WEX tracker page allows for quick measurement of your heart rate. Once the heart rate has been recorded, you can quickly access tips and informaiton about your current heart reading.

WEX BPM Page

Understanding your BPM

WEX BPM page provides tips and information about your current BPM. This page automatically updates each time you measure your heart rate in the Tracker page.

WEX Tracker Day Page

Your Daily Tracking System

WEX tracker day page provides details to all your measured heart rate for the day.

WEX Tracker Week Page

Your Weekly Tracking System

WEX tracker week page keeps track of your heart rate measurements for the week.

WEX Tracker Month Page

Your Monthly Tracking System

WEX monthly tracker page monitors your heart rate measurements for the month and provides you with details on your progress.

WEX Tracker Year Page

Your Yearly Tracking System

WEX yearly tracking page provides yearly detail to all of your heart rate measurments for the entire year.

WEX Exercise Tips Page

It's Like Having Your Own Personal Trainer

WEX exercise tips page provides exercise video training to keep you in top form.

WEX Meal Tips Page

Healthy Eating for Healthy Living

WEX meal tip page provides video instruction on how to make healthy meals. A quick press of the button takes you to the recipe page.

WEX Recipe Page

Healthy Recipes at Your Fingertips

WEX recipe page provides healthy recipes right at your fingertips. Shopping just became one press easiery.

WEX Setting Page

Customizing your WEX Application

WEX setting page allows for customization of the app. WEX takes out the guess work by providing drop down menu's for quick body information input.

WEX Search Page

Because our App is so Robust

WEX search page allows for quick searching and filtering to locate the exact information you are seeking, in a minimal amount of time.

WEX Info Page

Providing Step by Step Instructions

WEX system was designed to be user friendly. But just in case, we've provided step by step instructions on how to work our system.

Previous Next

Financial Vacation Planner Prototype

Using Sketch and InVision

Sketch and InVision are a very popular choice for prototyping. While Sketch currently doesn't have the stencil integration that OmniGraffle Pro does, there are many functions and features that make it an appealing prototyping tool.

InVision has benefits over AXURE since it allows for comments and feedbacks to be provided. InVision is also a good tool in conducting usability tests, as it not only will record the screen, but will record the user's face and comments while participating in the usability test. Seeing facial expressions is beneficial when conducting usability tests.

Where InVision falls short in comparison with Axure is in the stability of sharing the prototype. The slide show contains images of the prototype done in Sketch due to InVision's prototype sharing function crashing, thus not providing me with the stable user experience I desired for my prototype portfolio demonstrations.

myTime Trips Page

Planning for your personal time out.

MyTime's trips page provides a quick glance at what trips have been planned and the progress of saving for these trips.

myTime Hawaii Trip Details Page

Individual trip details.

myTime's individual trip page details provide further information to the user's progress.

myTime Disney Trip Details Page

Individual trip details

Sub-categories are displayed to assist in overall budget planning.

myTime Cruise Trip Details Page

Your Daily Tracking System

Confirmation that the user has reached their budget goal for an individual sub-category is shown.

myTime Transfer Resources Page

Allocating resources at your fingertips.

The transfer page allows the user to view what resources they have in their personal account and allocate them to sub-categories in each trip.

myTime Transfer Resources Confirmation Page

Live updates to allocation progress.

The user is provided with a confirmation page which shows the trip, how much was transfered and their updated progress.

myTime Log Out Page

Through the setting's page, user is able to customize the settings and log out.

myTime Log out Confirmation Page

User is provided confirmation that they have logged out of the system.

Previous Next

User Interface

Anticipating the User's Eye and Hand Movements

Want to test drive some live prototypes? Click on the buttons below.

Or scroll through the slide shows below to see screen images.

Prototype Design

Testing before Production

UI Dashboard and Calendar

Visual Design and Prototype with Adobe Xd

Step 1

Step 2

Step 3

Step 4

Step 5

Step 6

Step 7

Step 8

Step 9

Step 10

Step 11

Step 12

Step 13

Step 14

Step 15

Step 16

Step 17

Basic Bootstrap with Customized Option

Live Coding Prototype with PhoneGap

Classical Style Form

Live Coding Prototype with PhoneGap

Tab Style Form

Live Coding Prototype with PhoneGap

Bright Style Form

Live Coding Prototype with PhoneGap

Bar Style Form

Live Coding Prototype with PhoneGap

WEX Home Page

Your Weather Exercise Experts

WEX Timer Page

Exercising is all about timing.

WEX Tracker Page

Tracking your Heart Rate Progress

WEX BPM Page

Understanding your BPM

WEX Tracker Day Page

Your Daily Tracking System

WEX Tracker Week Page

Your Weekly Tracking System

WEX Tracker Month Page

Your Monthly Tracking System

WEX Tracker Year Page

Your Yearly Tracking System

WEX Exercise Tips Page

It's Like Having Your Own Personal Trainer

WEX Meal Tips Page

Healthy Eating for Healthy Living

WEX Recipe Page

Healthy Recipes at Your Fingertips

WEX Setting Page

Customizing your WEX Application

WEX Search Page

Because our App is so Robust

WEX Info Page

Providing Step by Step Instructions

RVC Front and Backend Prototype

Using OmniGraffle Pro and AXURE

Financial Vacation Planner Prototype

Using Sketch and InVision

myTime Trips Page

Planning for your personal time out.

myTime Hawaii Trip Details Page

Individual trip details.

myTime Disney Trip Details Page

Individual trip details

myTime Cruise Trip Details Page

Your Daily Tracking System

myTime Transfer Resources Page

Allocating resources at your fingertips.

myTime Transfer Resources Confirmation Page

Live updates to allocation progress.

myTime Log Out Page