RickGutierrez-UX-Portfolio

RICK GUTIERREZUSER EXPERIENCE DESIGN & PRODUCT STRATEGY
L EA RN A B O U T M E A N D M Y WO RKRICK GUTIERREZ 248.978.5247

ABOUT
ME
I am a user experience designer and product strategist.
I help companies define and launch their initial product and
optimize products already in market.
I do this through research, comprehensive user flows, wireframes
and prototyping.
I am an expert communicator, problem solver and creative thinker.
My goal is to identify the business problem, find the opportunities
to innovate and then work with users to create a great experience
that solves the problem in a way that delights.
NEX T COMPANIE S I’VE WORKE D WIT HRICK GUTIERREZ 248.978.5247
 Back

COMPANIES I’VE WORKED WITH
careC2
NEX T S E LE C T E D WOR KRICK GUTIERREZ 248.978.5247
 Back

SELECTED WORK
RESEARCH UX DESIGN VISUAL DESIGN
‣ SaaS Mortgage Platform ‣ Instant Mortgage Pre-Qual ‣ My Design Samples
‣ Observation Patient Flow
‣ Operation Room Readiness
LIVE WEBSITES
‣ Delivermyride.com
‣ Lenderful.com
‣ Flagstarmortgage.com
‣ Online Car Buying
RICK GUTIERREZ 248.978.5247 … O R CL I CK H ERE TO S EE A L L CAS E S T U D I ES
CHOOSE A DIRECT LINK HERE…
 Back

Overview:
Design an application that provides a holistic observation unit patient flow, trend and
awareness tool. Observation Units (OUs) offer an option between traditional inpatient
admission and discharge from the Emergency Department (ED. OU patients often
experience delay with diagnostic & lab screenings as well as discharge. Improving holistic
view of the observation patient flow, quality, and length of stay (LOS metrics within a
facility improves awareness, efficiency and revenue.
FLOW
DASHBOARD
FLOW
DASHBOARD
FLOW
DASHBOARD
SELECTED WORK - LEIDOS CAREC2 COMMAND CENTER “OBSERVATION”
OBSERVATION UNIT PATIENT FLOW APPLICATION
Responsibilities:
UX Strategy & Design, Visual Design, Design System Made with Adobe
Pitchboard Quality Metrics Length of Stay
NE X T CA S E  S aaS M O RTGAG E P L AT FO RMRICK GUTIERREZ 248.978.5247
 Selected Work Home

Overview:
The Lenderful MVP was a simple WordPress solution. The MVP had seen a 400% increase
in loan conversions and included a consumer facing front-end with a digitized government
1003 mortgage form. Despite its success, the UX of the MVP’s digitized form (the primary
task) was a tedious digital replica of the paper experience. As a result users were starting
the process but drop-off was high. I worked with leadership on Lenderful 2.0 researching to
find ways to improve experience and conversion.
SELECTED WORK - LENDERFUL 2.0 SAAS MORTGAGE PLATFORM
UX RESEARCH
CONTEXTUAL INTERVIEW
UX Strategy
INDUSTRY TRENDS
COMPETITIVE UX
PERSONAS
USER JOURNEY/NEEDS
The User
VISION ARCHITECTURE
The Vision
TASK ANALYSIS
Responsibilities:
UX Strategy, User Research and Vision Architecture
NE X T CA S E  M O RTGAG E I N S TAN T P REQUAL I FI CAT I O NRICK GUTIERREZ 248.978.5247

Overview:
As a result of the research I had done on Lenderful 2.0 it was clear that the real estate
buyers journey was long, and that we needed to keep users engaged throughout that
process. The earlier the engagement the more likely users were to convert. As a startup we
had to be choosy about where we committed our resources. It became obvious that we
needed to give users something useful immediately. The “Automatic Pre-Qualification” was
designed to enable users to begin shopping with an agent confidently and immediately.
SELECTED WORK - LENDERFUL 2.0 SAAS MORTGAGE PLATFORM
INSTANT PRE-QUALIFICATION APPLICATION
FLOW
WIREFRAMES
USE CASE
FLAGSTARMORTGAGE.COMDESKTOP PROTOTYPE
MOBILE PROTOTYPE
UX Design UI Design The Website
Responsibilities:
UX Strategy & Design, Visual Design, Design System Made with Axure
RICK GUTIERREZ 248.978.5247 NE X T CA S E  OP ERATING ROOM READ INESS AP P LICATION

Overview:
Provide real-time notifications and to update surgeons, and nurses on their caseload
across the O.R. with a tailored view of user information specific daily activities. The
application interacts with ICU and Emergency Department solutions to display changes as
they occur in real-time, provide notifications for room and case preparation, and to inform
users on room capacities. The application standardizes communication across the O.R.
while reducing delays and overall time spent in the OR.
SELECTED WORK - CAREC2 ALPHA “MY CASES”
OPERATING ROOM READINESS APPLICATION
FLOW
DESIGN / USE CASE
Surgeon View
FLOW
DESIGN / USE CASE
Nurse View
VIEW WITH FIGMA
Prototype
Made with Figma
Responsibilities:
UX Strategy & Design, Visual Design, Design System
RICK GUTIERREZ 248.978.5247 NE X T CA S E  O N L I N E CAR B UYI N G EX P ERI EN CE

Overview:
The challenge was great. Normalizing vehicle and pricing data across multiple dealerships
and brands, not to mention employee pricing, monthly rebates, incentives, tracking
inventory availability and scheduling delivery - it had never been done on that scale. It
would be too time consuming to figure all of that out at once. We approached the MVP at a
high-level while keeping all of those factors in mind.
SELECTED WORK - DELIVER MY RIDE
DELIVERMYRIDE.COM - THE MVP
RESEARCH
VISION
Discovery
FLOW
WIREFRAME
UX Design
LOOK AND FEEL
Visual Design
Responsibilities:
Research, Vision, Flow, Wireframes, Visual Design Visit the live site
RICK GUTIERREZ 248.978.5247 P R E V IOU S CA S E  O P ERAT I N G RO O M READ I N ES S AP P L I CAT I O N

OU PITCHBOARD (PATIENT FLOW)
‣ THE TASK
Provide a way for the user to
interact with a holistic timeline
view depicting reoccurring
screening efforts (vitals),
diagnostics & labs, medications,
consults and the complete
discharge process
Allow patients with observation
status to be prioritized and patient
care to be at optimal efﬁciency,
while mitigating LOS delays to
increase OU efﬁciency.
RICK GUTIERREZ 248.978.5247 1 O F 6

SELECTED WORK - CAREC2 COMMAND CENTER “OBSERVATION”
OU PITCHBOARD
1
3
‣ KEY BENEFITS
Viewing real-time info about who is
in charge and at what capacity the
OU is operating helps the user spot
backups and identify who they can
work with to make adjustments.
Comparing their current average
LOS to goal the user gets a reality
check on current performance
answering the question, “Is this
normal activity.”
Checking the list of patient cases
gives the user a prioritized view of
cases and their status at a glance.
Selecting a patient case list item
gives the user a complete drill-
down on key patient milestones to
quickly identify and address issues
disrupting the ﬂow of the OU.
2 4
1
2
3
4
Made with Adobe

QUALITY METRICS FLOW
‣ THE TASK
Give the user the ability to
see an Inpatient Conversion
Rate, outlining patients
moving from observation to
inpatient status within
deﬁned time period
This high-level overview
provides the user with
metrics categorized by
attending physician and
complaint/diagnosis.

OU QUALITY
‣ KEY BENEFITS
These panels enable users to
research and mitigate repeat visits
within 30 days. Such visits are not
billable so this tool presents an
opportunity to help cut loss and
maximize ROI.
Viewing this widget enables the
user to see the current OU to
Inpatient Conversion Rate for a
deﬁned period of time overall.
This panel provides the user
with a break-down of in patient
conversion rate by individual
complaint/diagnosis (DRG)
categories.
1
2
1 2
Made with Adobe
RICK GUTIERREZ 248.978.5247 4 OF 6

LOS COMPARISON FLOW
‣ THE TASK
The “LOS” or “Length-of-Stay” will display more
granular information in it’s visual structure.
Grouping LOS into tiers directly correlating to
observation Medicare/Medicaid patient billing
definitions (<24h, 24-48h and >48h).
The user will also have the capability to filter
LOS data by attending physician, insurance
provider or both to help identify potential gaps
& problem areas/resources to help increase
efficiency in the OU.

LOS COMPARISON
‣ KEY BENEFITS
This graph provides
the user with a view of
LOS which correlates
directly to how the OU
is billed
The user can also ﬁlter
LOS data by Attending
Physician and
Insurance network to
help spot potential
gaps, problem areas/
resources
1
2
1 2
Made with Adobe

SELECTED WORK - LENDERFUL MORTGAGE 2.0 RESEARCH
PERSONAS
Simplicity Steven , Age 68
31% of borrowers fit this profile
▸ High-middle income
▸ Married
▸ He values thrift, concision, and a person’s word
▸ He’s buying a retirement home for him and his wife
▸ Steven just wants a simple hassle-free mortgage. He is a much less
risky borrower, given his low level of existing debt and fairly large
income.
Digital Doug, Age 45
▸ High income
▸ Married
▸ He values convenience more than any other group
▸ He’s done this before and looking to save money by refinancing
▸ Doug wants fast and convenient online experience that doesn’t affect his
busy schedule. He’s more likely than any other user to use a lender that he
already has a relationship with
Connection Carol, Age 60
▸ Affluent
▸ Single
▸ She values Trust, friendship/relationship with loan officer
▸ She’s a refinancer that wants a trustworthy lender she can see as a friend
▸ Carol wants someone to help her along step by step. She’s still new but
knows enough to look for a lender that personalizes the experience, and
provide individualized mortgage recommendations based on her needs
Rookie Rita, Age 26
▸ Lower income
▸ Married with children
▸ She values time savings and convenience
▸ She’s a first time home buyer who just wants more space for her family.
▸ Rita wants a hands-on lender experience that walks her through the process.
She is willing to pay a premium for a lender that makes home visits and a
hassle-free experience that allows her to move into her new home on time
BorrowingExperience
Technology Experience

SELECTED WORK - LENDERFUL MORTGAGE 2.0 RESEARCH
LENDERFUL 2.0 - VISION ARCHITECTURE
‣ Many ideas for process improvements, new features and enhancements came
out of the research for Lenderful 2.0. The areas of automation, gamification,
voice interface and the concept of a user/lender hub topped the list. Of all the
findings we chose to focus our efforts in the areas of automation and
personalization in order to reduce the amount of effort it takes users to meet
their goals and match them with better loan solutions overall.
Lenderful 2.0 - Vision Architecture
Made with Axure
‣ These included:
Intelligent support engagement levels
Personalized loan recommendations
Tools for learning, planning, saving and applying
Asset and income verification
Employment and identity verification
Transaction and account history
Google API account sign-in
Automated pre-qualification

SELECTED WORK - LENDERFUL MORTGAGE 2.0 INSTANT PRE-QUALIFICATION
INSTANT PRE-QUALIFICATION FLOW
‣ THE TASK
Create wireframes for a pre-qualification process that will allow
user who meet the criteria to be pre-qualified automatically,
and get a printable pre-qualification letter allowing them to
shop with a real-estate agent (RE) immediately.
Give the loan process a place to live by creating a user hub
where buyers, lenders and REs can communicate throughout
the home buyer journey
Work with development to create customized documentation
from the wireframes to help them begin the back-end
development in tandem with visual design to meet accelerated
timeline now and speed development in the future.
Made with Axure

WIREFRAMES To see ﬁnal wireframes and development ﬂow documentation Click Here

To see ﬁnal wireframes and development ﬂow documentation Click Here
WIREFRAMES

SELECTED WORK - LENDERFUL MORTGAGE 2.0 INSTANT PRE-QUALIFICATION USE CASE
Simplicity Steve is a retiree. He wants a simple hassle-free mortgage. He is a much less risky borrower, given his low level of existing debt and fairly
large income. He’s using flagstarmortgage.com to instantly pre-qualify for a mortgage and start shopping with a real estate agent today
Steve is taken to a form where he can indicate where he is at in the buying
process and his purchase timeline. He clicks “Next” when he’s done.
He answers questions about the amount he’d like to pre-qualify for, the
type and use of the property and where he’s looking, then he clicks “Next.”
A Steve has completed step 1 of the process. In step two he is asked to
enter his personal information including his name and contact…
B …Next, Steve indicates whether or not he will include a co-borrower on
the loan and can read the communication policy. He clicks “Next” once he’s
completed this section.
Steve included a co-borrower on his loan pre-qualification so he’s taken to
a screen where he can enter their personal information. He clicks “Next”
once he’s entered the information.
Steve is taken to a screen where he is asked about veteran or military
service status because special loans are available for veterans and military
personnel. He clicks “Next” once he’s made his selection.
He sees the mortgage solution options in the hero area and clicks “get pre-
qualified” to get started.
SIMPLICITY STEVE
Made with Axure
Steve is now introduced to his loan officer and is informed that a “Soft”
credit pull is needed. He can see the loan officer’s NMLS number so he can
be assured he is dealing with a qualified professional. He click’s “Next.”

Steve see that there are a few more questions about his financial history to
answer. He can toggle to select any that apply to him and then click “Next.”
He can now see the results of his soft credit pull along with tips to maintain
his excellent score. If his score were low, he’d see tips on how to improve it
as well. Steve clicks “Next” to complete step two.
Steve is now asked to provide some information about his income. If he has
more than one source, Steve can easily add them to the form.
After completing step three Steve is asked to indicate available funds and
what amount he will contribute to a downpayment on his loan. When he’s
done, he clicks “Next.”
The system has found some information about Steve’s existing real estate
liabilities and asks him to indicate what he plans to do with the properties.
After Steve completes assets and liabilities he’s immediately shown that he
has been pre-qualified along with his pre-qualification amount.
INSTANT PRE-QUALIFICATION
SELECTED WORK - LENDERFUL MORTGAGE 2.0
Steve is fine with the summary so he clicks “Send My Letter.” The email
field is populated with the address he provided in step one. He can use it
or provide a new email address and then continue.
With step five complete, Steve sees a summary of his pre-qualification. He
can choose to edit and recalculate it or email himself the pre-qualification
letter so he can start shopping with an agent immediately.
steve@stevesemail.com
Made with Axure

Now that Steve has sent his letter, he checks his email for it. He can see he
has received an email from “Lamont at Flagstar” and clicks on it.
The email has some instructions about how to get his letter. He clicks the
link to log in to the Flagstar Mortgage account that’s been created for his
pre-qualification.
Steve is taken to the landing page for his pre-qualification letter where he
can view, edit, download, share the letter with his real estate agent or set
an appoint meant with Lamont, his loan officer. He clicks “View Letter.”
INSTANT PRE-QUALIFICATION
SELECTED WORK - LENDERFUL MORTGAGE 2.0
Steve reads through his letter and everything looks great. So he clicks the
print icon in the header and prints himself a copy. He’s ready to start
shopping. Flagstar will follow up in 48 hours to see how it going.
G OA L ACHIE V E D
Made with Axure

SELECTED WORK - LEIDOS CAREC2 ALPHA “MY CASES”
SURGEON FLOW
‣ THE TASK
Provide real-time, relevant
notiﬁcations to physicians
regarding case scheduling,
operating room readiness, and
basic actionable case information.
Prevent delays by providing
access to details of upcoming
cases, with the ability to review
and approve or suggest
rescheduling if needed.

THE SURGEON Dr. George Fields is an orthopedic surgeon. He’s using careC2 “My Cases” to review his upcoming surgical cases so he can stay updated in real-time
to any changes that occur in his caseload, and he can communicate any changes or requests to his team well in advance of surgery day.
He sees a case list item he needs to make a change to and clicks “Edit
Case” and he sees the state of the list item change.
He clicks on “View Readiness” and the patient readiness modal overlays
the screen.
He sees patient info, what’s being waited on, and timeline details. He clicks
the arrow on the patient info to expand it.
He see’s there are two others viewing the case so he rolls over the text to
see who which team members are involved.
He can see that Dr. George Fields and RN Lindsey Stroud are viewing the
the other team members viewing the case.
He enters ”Shoulder” into the search and selects “Painful shoulder
movement” from the contextual search results.
The new term is added to the tags associated with the case. George clicks
save and closes out of the readiness modal.
Made with Figma
He clicks on the surgery end time, sees a list of available end-times and
chooses 1315

George can see the change 4h 45m to 5h instantly. Now he clicks on the
date to make change the date of the surgery.
A calendar appears and George selects the new date and then he clicks
out of the calendar
George can see the date he selected has been updated and now he wants
to change the room the surgery is going to be in so he clicks on it.
A list of available rooms appears. George doesn’t need a portable x-ray as
the icon indicates so he selects a room without one.
George can see the room change has taken place. He has no more
changes to make so he clicks on “I’m Done” to complete his review.
The list item goes back view mode and George can see the status of
Approved/Conditions indicates that is has been edited and when.
G OA L ACHIE V E D
THE SURGEON
Made with Figma

SELECTED WORK - LEIDOS CAREC2 ALPHA “MY CASES”
CHARGE NURSE FLOW
‣ THE TASK
Provide real-time, notifications to
charge nurses form surgeons
requesting schedule,
instrumentation, medical equipment
and other changes within the
context of the ever-changing OR
schedule.
Maintain efficient flow of the OR
while working to accommodate the
needs and preferences of surgeons
to ensure everything goes smoothly
from “wheels in” to “wheels out”

THE NURSE
RN Jessica Moore is a charge nurse. She’s using careC2 “My Cases” to help orchestrate upcoming surgical cases in her OR. careC2 helps her keep
things running smoothly with maximum uptime by providing visibility into the constant change and unpredictability inherent to the environment while
balancing the needs of doctors, patients and additional OR staff with maximum uptime to the operations of the OR department.
Jessica has sorted her cases to see those with requests from surgeons
awaiting review. She clicks on “Edit Case” to look into the first case
The list item she is editing changes to the edit state and she clicks to
expand the “Awaiting Review” status.
Jessica checks the her scheduling system and sees the room and time
changes requested by the surgeon are tentative so she clicks “Approved”.
Since the time slot is tentative Jessica needs to check with central
scheduling. She enters a comment to notify the surgeon of this.
When she enters a comment the status changes to Approved/Conditions
and she clicks on “Submit.”
With no more edits to the case Jessica clicks on “I’m Done.” The edits are
saved and notification of the status change is sent to the surgeon.
The list item goes back view mode and Jessica can see the status of
Approved/Conditions indicates that it has been edited and when.
G OA L ACHIE V E D
Made with Figma
5 OF 5RICK GUTIERREZ 248.978.5247

DELIVERMYRIDE.COM - THE MVP
The challenge was great. Normalizing vehicle and pricing data across multiple dealerships
and brands, not to mention employee pricing, monthly rebates, incentives, tracking
inventory availability and scheduling delivery - it had never been done on that scale. It
would be too time consuming to figure all of that out at once. We approached the MVP at
a high-level while keeping all of those factors in mind.
We began with
▸ Defining the vision architecture that would give us an idea of what the project might need long term
▸ Determining primary use cases and workflows in order to help us identify the MVP
▸ Prototyping different MVP models to test and learn
SELECTED WORK - DELIVER MY RIDE
RICK GUTIERREZ 248.978.5247 1 O F 2 6

DELIVERMYRIDE.COM
THE CHALLENGE
DMR needed to develop a marketplace that displayed the live inventory of select local
car dealerships allowing the user to shop, compare and configure the right financing or
leasing terms for their new vehicle 100% online.
▸ Give the dealer a lead that has already been approved – all they need to do is deliver the vehicle and sign
the paperwork
▸ Give the user an experience that allows them to shop all the dealerships inventory online, find their perfect
vehicle and configure a deal that works best for them without the hassle of visiting the dealership and
dealing with sales staff

MY ROLES…
▸ Research
▸ Vision
▸ Flow
▸ Wireframes
▸ Visual Design Take a look
DELIVERMYRIDE.COM

DELIVERMYRIDE.COM
USER RESEARCH
To determine what DMR needed to do next we took a closer look at what the customer needed. To do this we
looked into industry data sources and validated those with feedback from existing customers and current users.
Major pain-points included:
▸ Frustration with paperwork, and contracts involved with purchasing or leasing a vehicle
▸ Intimidation and reluctance over negotiating the purchase or lease price
▸ Lack of certainty over finding the best deal/price
▸ Frustration dealing with salespeople and driving all over to search inventory from dealership to dealership
▸ Difficulties finding the right vehicle
▸ Uncertainty in valuing their trade-in
▸ Time it takes to apply for, and get a response during financing
▸ Dissatisfaction with excessive time spent at the dealership in order to purchase a vehicle (about 3-hours).
Research Vision Flow Wireframe Visual

SELECTED WORK - DELIVERMYRIDE.COM
VISION ARCHITECTURE
▸ THE DELIVER MY RIDE (DMR) TEAM
Mike McInerney - DMR Founder and SME
Peter Schmidt - Marketing
Rick Gutierrez - UX Strategy and Design
Matt Stauffer - Lead Developer - Tighten.co
‣ THE TASK
Deﬁne the overall structure of the technology
needed to support the long-term vision in general
terms, facilitate build vs buy discussion and MVP
possibilities
Made with Axure

USER FLOW
Take a look
▸ My Role: Turn research into ﬂow maps that optimize the
experience within the different contexts along the automobile
purchase journey. The purpose was to understand how
different users navigate their way, discuss their needs
Related to speciﬁc points in the journey as well as the technical
challenges to be faced at every turn.
DELIVERMYRIDE.COM

UX DESIGN: USER FLOW OVERVIEW
▸ GOALS
Describe user ﬂows for different use cases we
identiﬁed
Use the high-level view of the entire product to
begin to narrow in on what should be prioritized for
the MVP
Get an idea of the requirements behind the
components that make up the application
Start to evaluate components to be built with
available technology vs custom development
DELIVERMYRIDE.COM Research Vision Flow Wireframe Visual
Made with Axure

▸ Focus on three different user contexts
▸ At this point we weren’t sure if we wanted to
focus on just one context or all three?
The Fast Lane is for those who know exactly what they want
and just want to find the best deal on that specific vehicle as
quickly as possible.
For those who want to buy but need a little refinement to
their search there is a buy path starting with brand selection.
For those just shopping there is a path that begins with the
selection of vehicle type.
UX DESIGN: USER CONTEXT
1 2 3
1
2
3

UX DESIGN: “BUY” USER FLOW
‣ Describes user ﬂows for the buy process
‣ Describes components on a conceptual level
‣ Documents options being discussed for data
sources vs custom development
‣ Shows decisions within the context of alternate
paths within the application
Made with Axure

‣ Describes user ﬂows for the shop process
‣ Describes components on a conceptual level
‣ Documents options being discussed for data
sources vs custom development
‣ Shows decisions within the context of alternate
paths within the application
UX DESIGN: “SHOP” USER FLOW
Made with Axure
RICK GUTIERREZ 248.978.5247 1 0 O F 2 6

UX DESIGN: “I KNOW WHAT I WANT” USER FLOW
‣ Designed to be the “Google” of car buying
‣ The simplest user case application
‣ Designed to measure demand
‣ An isolated test of the buy process

‣ To be used when user wants to add additional
equipment to the existing vehicle configuration
‣ Displays results on predetermined match
percentage threshold
‣ System stores snapshots of each configuration
and asks the user to save configurations to their
garage non exit from the application
UX DESIGN: “CONFIGURE” USER FLOW
Made with Axure

UX DESIGN: “SHOW MATCHES” USER FLOW
‣ After the user selects "Show Matches" they will
be taken to the SRP where they will see deals
listed.
Deals will include a picture of the vehicle,
MSRP, DMR pricing, Match Percentage based
on original request, Overall vehicle rating, fuel
economy and other summary information.
The user will have the ability to ﬁlter the list of
vehicles, or adjust selection criteria to get
more results.
Made with Axure

‣ Includes a media gallery for both photo, video and possibly
interactive 3D content
‣ Icons indicating standard and additionally selected vehicle
options included on the vehicle and link to details
‣ The vehicle pricing information will display Price, MSRP,
Savings and Lease payment.
‣ Calculator gives user the ability to adjust payment terms to ﬁt
their needs
‣ Suggested Vehicles includes a listing of comparable vehicles
to current vehicle being detailed
‣ The user will have the ability to Buy Now, Schedule a test
Drive and Ask a Question and Counter Offer the deal
UX DESIGN: “VEHICLE DESCRIPTION PAGE” (VDP) USER FLOW
Made with Axure

DELIVERMYRIDE.COM
UX DESIGN: “BUY NOW” USER FLOW
‣ When the user selects
"Buy Now" they are asked
to register if they have
not already done so.
‣ The purchase process includes
Trade In, Finance Options,
Credit Application, & Deposit
‣ Delivery Scheduling and all related
paperwork that will be processed
prior to delivery.

WIREFRAMES
Take a look
▸ My Role: Translate feedback from ﬂow maps
into wireframes using Axure in order to begin testing
user orientation, navigation and usability factors as
well as continue the discussion over the proposed
functionality for the MVP.
DELIVERMYRIDE.COM

WIREFRAME V.1: LANDING PAGE
DELIVERMYRIDE.COM
I began by showing users how to get started
by including the desired actions in context to
the process and actions needed to find a new
vehicle.
▸ The make, model, trim choices are
presented with the zip code so the results
are within the users delivery radius
▸ The process is included as part of the
overall experience to show the user the
path to success.
▸ Deal of the day is included to display deals
the system identifies as being exceptional
to increase engagement over time
Image gallery and price overview populates the banner area
by default when user choses “2-customize & find your ride”
User can experiment with color choices and the 360°
gallery updates with the changes applied to the vehicle
User can experiment with option choices and the 360°
gallery updates with the changes applied to the vehicle
The V.1 wireframe of the DMR landing page communicated the value proposition, explained the process
and exposed dealers to deals that are intended to be memorably good, and perhaps inspire immediate action.
Banner Vehicle ConfiguratorLanding Page
1
2
3

WIREFRAME V.1: REGISTRATION
DELIVERMYRIDE.COM
Once the user has chosen a vehicle they can
personalize their deal so that we can find them
all of the special pricing, rebates and incentives
available at any given time
▸ The profile helps registered users see, and
get, the best pricing available for their
situation on all the site’s inventory.
▸ This profile helps DMR learn more about
things that affect user pricing and follow up
with more relevant offers
▸ The process helps the user understand how
the price is arrived at and what incentives are
available to them
▸ At the end of the process the vehicle is
automatically saved to a “Garage” so the deal
can be accessed later or the properties of the
deal can applied to a new search if the vehicle
becomes unavailable
1 2 3
4 5 6
7 8
Made with Axure

WIREFRAME V.1: DETAIL PAGE
The vehicle description page is the place
where a user is presented all of the details
about the vehicle they are looking to
purchase. The key user goals include:
‣ Customizing and
negotiating price
‣ Confirming vehicle
features & options
‣ Filtering options to
find a better match
‣ Dealer communication
and scheduling
‣ Saving search criteria
to continue journey
DELIVERMYRIDE.COM
Price and savings display
together to show the user
something significant about
the price being offered.
Showing the price in
context to other price
standards make the amount
more meaningful too.
The Calculator allows the
user to customize lease or
loan payments to their own
financial needs and see a
real payment instantly
Communication with the
dealer helps move the deal
along…
The user can configure
additional details in order to
find a better match…
Details about the existing
vehicle features and options
are displayed in order to
assure the user that the
vehicle has the items they
are expecting…
Suggested vehicles help the
user to explore brands and
options they might not
otherwise consider
Vehicle ranking and market
price comparison to address
common purchase hurdles

The user puts time and work into their vehicle search so we wanted to give
them a place to organize their search and have the ability to come back to
vehicles they have configured. This makes their search more efficient and
organized while giving them the ability to pick up where they left off.
‣ The ability to continue the journey increases value to the car shopper and increases the
likelihood that they will return to the site
‣ The Garage cards show percentage match to the users “ultimate” list of requests, shows
the VIN to increase credibility – this is a real car on a local lot and displays the pricing
information the user has customized.
‣ To continue the journey the user has the ability to find similar deals where the search
criteria for the given Garage card is applied to a new search. They may return to the
original VDP or they can begin their purchase.
‣ When a deal is expired the search criteria goes into “Saved Searches” which can be
entered from this page or a from the account menu after a user has logged in.
WIREFRAME V.1: GARAGE
DELIVERMYRIDE.COM Research Vision Flow Wireframe
Made with Axure

UX DESIGN: SAVED SEARCH
The user has put a lot of time and thought into their
search for a new vehicle this is why we save searches
when a vehicle is added to the garage, when an
offer expires, or upon leaving a session a user will be
asked if they would like to save the searches from
the current session. Saved searches can then be
applied to later searches.
▸ Simple cards are used to show previous search, search date
and how many vehicles are available that meet the same
criteria
▸ The user has the ability to review the saved search or apply
it to a new search
Made with Axure

VISUAL DESIGN
Take a look
▸ My Role: Gather feedback from wireframes and
collaborate with a remote designer to establish
the visual direction at a for DMR while exploring
application to the design system at a high level.
DELIVERMYRIDE.COM

VISUAL DESIGN: INTRODUCTION
In the beginning we were introduced through
Tighten.io (our developer) to their designer Steve
Shoger. Steve loves to design Icons and and we
loved them too.
‣ There was opportunity to use this to differentiate DMR from
competitors over abundance of glossy, impersonal beauty
shots.
‣ We wanted to create something friendly and approachable
with a tech edge
‣ Steve came back with these preliminary icons and we
decided that we could use icons like this as a textural
treatment and also for speciﬁc vehicle options

These were the ﬁrst iterations of design
for the home page that Steve presented
based on our concept for the icons and
the wireframes I had given him.
‣ The design was applied to a light and a
dark version
‣ Incorporated the iconography in textural
background elements and in illustrating the
process for our process
VISUAL DESIGN: HOME PAGE

VISUAL DESIGN: VEHICLE DESCRIPTION PAGE (VDP)
The visual design of the VDP is shown here in
both light and dark mode versions. The team liked
the dark version for a few reasons.
‣ Dark mode allowed us to establish more visual hierarchy
‣ Light areas in the dark mode tended to stand out more
and cue the user to areas of importance than in the light
mode
‣ The light mode was very ﬂat and did not place focus on
important elements as much as dark mode and the blue
colors had a tech feel against the dark gray, the look was
the start of the direction we ended up taking.

The review of this design left us with a very high-level view
of not only the visual design but sparked some new
thoughts on the overall VDP and home page.
We proceeded with a second round of wireframes to
incorporate feedback from
this ﬁrst round and describe the interface
in greater detail and then followed up with
a more complete visual design exploration.
DMR has continually evolved since the MVP. We eventually
moved development in house, and completely rewrote the
initial codebase. During that time I was responsible for
adding many new processes including, trade in value, loan
pre-qualiﬁcation, bank integration, soft-credit pull, a SaaS
white labeling program, and much more…
The newest developments, as well as the current visual
design can be seen in this walkthrough made with inVision
VISUAL DESIGN V.1: RESULTS

RickGutierrez-UX-Portfolio

Recommended

Recommended

More Related Content

Similar to RickGutierrez-UX-Portfolio

Similar to RickGutierrez-UX-Portfolio (20)

Recently uploaded

Recently uploaded (12)

RickGutierrez-UX-Portfolio