UX Projects

UX Specifications - flow - wireframing - interactive prototyping
UX Software Tools
  • Client
    Wurth McFaddens
  • Project
    Online Invoices Access & Remittance
  • Module
    UX - UI - Mobile Invoicing Module

CHALLENGE STATEMENT
Increasingly customers wanted access to invoice history as offered by our largest competitor in the US and CAD market. Highly problematic at year end for many SME businesses that wanted online access to purchase orders and corresponding invoices randomly sent throughout the year captured from multiple order channels.


Listening to our customers, understanding their issues, exposing new ideas and turning them into validated real value. Building a technology roadmap into a complete customer experience.
my musings

Paper White board paper for ongoing discussion
Critique Sessions: throughout the project we post components; mobile and desktop to review with stakeholders
User Research
Market Research
Hypothesis Prioritization
User Testing + Validation
User Flows
Product Design Sprints
UX + UI Design
Product Roadmap
Making invoicing and remittance easy online
The goal was to develop payment flows and principals of autonomy and automation that would enrich the back-office systems and strengthen our customer experience.

The end result will lead to stronger customer relationships and part of a roadmap that extends beyond technology towards a better brand expereience.

INTERACTIVE CRITIQUE & RESEARCH
I prefer an immersive experience and like to print screens to review and get an overall feel away from my monitors; my way of stepping back to change perspective. Feedback in intervals from other principals was done like this in the form of a review critique. It helped people understand the process and collectively turned team hypothesis into stakeholder research with breakout testing and iteration where required. Involving the commercial sales team, administrative staff, developers and IT kept the project focused and expectations in check.

PROJECT TOOLS
Adobe products have historically been my go-to for design and development support with XD being both a powerful UX and UI application tool. With this module we moved to Figma to work with a small team of specialized developers who were familiar with this application and file sharing. To this day I still can’t get my fingers to relearn hotkeys that change across platforms. What was very useful is sending quick links for soft protypes the internal team could view as new screens became available for review. Early review and testing was typical of an Agile methodology and lean UX mantra we used to present iterations.

UX Art Board Wurth Invoicing Module
UX Art Board Layouts Desktop Online Invoicing Module

UNDERSTANDING CUSTOMER PAIN WITH EMPATHY
From a UX process point of view we tended to validate assumptions and hypotheses through a combination of internal stakeholders and the recruitment of customer participants who expressed an interest in better tools and useability.

Many of our customers fit into the SME category and needed support managing purchasing and payments. Not providing this led to stresses applied to internal customer service teams and the accounts receivable team.



A curious mind that embraces technology, yet humanizes digital platforms ensuring processes are intuitive and easy, leading to the user experience customers expect.
gentle musing


OUR WIREFRAMES
Our design process began with quick whiteboard sketches and working prototypes flushing out initial hypothesis, ideation and validation with stakeholders in house. Even prior to this, interviews were setup for all departments ensuring requirements were established and documented.
UX - Invoicing account list view
UX - Invoicing mobile sort selections
UX - Invoicing mobile filter options
UX - Invoicing account detail.
ERROR HANDLING
Users make mistakes, and basic flagged error handling on many sites does not sufficiently understand the frustration a user feels when transactions fail. To improve the user experience, we decided to ratchet up error handling, messaging, and explore the exact responses that could be determined from banking and credit card codes. There are complex error messaging codes in Canada but rarely are messages passed back to the user. We also wanted to allow screens that loaded failed pages to redisplay as much permissible data as possible, so the user did not have to reinput every field.
UX - Invoicing add payment method
UX - Invoicing error screens
UX - Invoicing payment success
UX - Invoicing add EFT payment
BREAKPOINTS & MEDIA QUERRIES
I like to test using mid-fidelity wireframes to ensure stakeholder understand the interfaces and systems being considered. Everyone found the modal layers used on desktop screens kept the user focussed on data and ensuring they completed input and selections without losing focus. Generally, to too-big desktop view was made easier by displaying only the steps required and keeping eyes of other navigational sources.

A bit of research and testing pointed to some user having issues with tabs previously setup on mobile. For the desktop we came to a radial button methodology with a clear rollover selection function.


"Designers should focus on creating experiences that accommodate users’ interactions and responses, rather than trying to create new and different experiences that users can’t relate to".
philosopy & musings
Double Diamond & Design Thinking as a UX Methodology in Product Development
Design Thinking as a UX Methodology in Product Development
STAKEHOLDERS AND TIMELINES
Over the years I have responded to many RFP’s, was shortlisted and won digital projects that were difficult to scope or measure expectations. Even worse, the client and stakeholders often don’t know what they wanted much less understood processes to determine what they needed. Every client has a budget for the shiny product they want to invest in but typically has no concept of what it takes build it. Think of it as a problem space and a solution space each with processes to determine the best execution for the project. In the problem space discovery and research should confirm you are solving the right problem. Process and documentation will validate the solution space of a product.

Not every product you develop requires the same amount of attention and this simply might be the innovation requirement leans on existing products in the market and won’t require the same validation or risk. For this module some of the B2B environment enterprise processes in house limited how the data was displayed and even how quickly an invoice could be paid. Validations revealed exceptions that could not be handled digitally.
UX - Online Invoicing Module - Add new credit card
UX - Online Invoicing Module - Error Message for payment method
BEING ADAPTABLE - TEST ITERATE
With the launch of new phased products even the most senior stakeholders who invested in the outcome changed their ideas through discovery and an iterative process. At first, like mobile we looked at vertical content areas for desktop screens but tested a horizontal two column layout using the same design systems that everyone preferred. The wider screens with a clear success message led to less double clicking and transaction errors.

Finally, a modal layer over the parent screen ensuring the users undivided attention was also added. An explicit X button on the top right ensuring the end user could back out of a payment process or rethink critical actions.
UX - Online Invoicing Module - Payment methods for credit card & EFT
UX - Online Invoicing Module - Payment successful & resend options
UX - Online Invoicing Module - Add new credit card
UX - Online Invoicing Module - Error Message for payment method
Responsible for: Product ManagementUXUIHTML CSS
Strategic Thinker and completely hands on

View this project in my User Interface (UI) section

View Wurth and other development products
Responsible for total project lifecycle management, technical and creative production in agile work environments including enterprise integrations. Passionate about online shopping experiences, including product development focused on web and mobile experiences.
View More

Contact me to chat and learn more

Empathetic design is the fundamental understanding of how people use the tools that we build. Setting aside assumptions and listening to our customers allows us to understand users' experiences, motivations and problems.

CONTACT ME!
  • Client
    Specialty Medical Supply
  • Services
    UX - UI - Development - HTML CSS - Branding
  • Markets
    United States
Cart Adoption / Abandonment Rates
Prior to updating the checkout flow our abandonment rates were high and we know it had to do with the registration processes. Site architecture did not allow us to move to a one-page-checkout currently. We did offer an 800 number to our call center but at times it was overwhelmed with calls in cue. We only managed the call center in one time zone and wanted order taking to be automated as much as possible.

What we did not know was what percentage of our abandoned cart customers might have not called our 800 number avoiding checkout processes if the user experience was more intuitive.

Impact of Abandonment
Lost sales by cart abandonment were inevitable but there were more cost considerations than just a lost sale. If this was a potential life-time customer, they might have represented a reoccurring revenue stream and a lot of effort goes into driving traffic to our site. We ran a significant PPC strategy on Google, generated content marketing, and employed influencers in the home medical space. This simply meant our customer acquisition costs were a significant per transaction.
Specialty Medical Supply Checkout Registration BEFORE Screens
Call Center Research & Survey
We had great control over the call center and easily implemented a voice survey to understand why customers did not interact with our web site. Orders over $75 dollars were FREE delivery and 85% of all transactions met that threshold so shipping did not factor in to an unknown. What we did find:

1.   A small percentage of customers were unable to setup an account or password, sometimes this was as simple as they did not have an email – 10%
2.   Some customers did not trust any site with our credit card information but ironically were fine giving it to us over the phone – 10%
3.   Checkout process looked to be to be complicated, checkout was too long, and steps were not understood – 32%
Specialty Medical Supply Checkout Screens Final
Checkout Flow
We quickly confirmed our checkout felt too long and complicated for what might be a single transaction. We decided to invest in a fully Branded user centered checkout experience, intuitively keeping the customer aware of where they were in the process. We also focused the checkout process flow by removing site navigation and keeping checkout as the sole focus. We added other confidence messaging by reinforcing our no hassle returns and displaying security badges around the credit card input on our payment pages.

** The result was a significant change in online order volume, notably after normal business hours when the call center was closed. Lastly, phone calls did not subside, but transaction volume did increase 15%.
SMS Design Systems
Responsible for: Everything! UXUIHTML CSS
Product Manager & Designer with a can-do mindset

For a complete project overview visit The Work

View Specialty Medical Supply and other development products
Responsible for project management and product design supporting the project plan; including high level strategy and specific details of all product backlogs and iterations. The project lifespan to launch fully implimented was 12 months.
View More
  • Client
    SHIFT Outdoors
  • Services
    UX - UI - Development - HTML CSS - Branding
  • Markets
    Canada - United States - United Kingdom

What are SHIFTRewards points?
SHIFT Rewards is an online loyalty program initiated with every first order increasing customer retention and engagement. Exclusive emails were utilized for loyalty members driving shoppers to repeat purchases with strategic triggers and branded Reward cues. The checkout process was customized, and rewards built into the confirmation process. The program was highly successful and generated significant repeat customer volume.

UX Sigmacon White Board Session
SHIFT Outdoors Site Map - AXURE
Sigmacon Site Map
SHIFT Rewerds Checkout Screens UI / UX Layouts
SHIFT Rewerds Program Screens
  • Client
    Sigmacon
  • Services
    UX - UI - Development - Dynamic Navigation
  • Website
    offline

Sigmacon Aesthetics Statement of Work defined over 100 pages required with navigational flow and architecture requirements to be determined. Whiteboarding sessions defined content areas, functionality, and secondary navigational aids for the client. Sitemaps and wireframes further identified functionality and secondary navigational requirements. Dynamic navigation with descriptions added additional navigational functionality that was built to be edited from a text file for scalability.

Understanding their customers was critically important for the visual-design experience. The response to skin conditions & products with an empathetic approach to customer engagement was also identified. This consideration changed depending on the product category.

UX Sigmacon White Board Session
Sigmacon UX Meeting Discovery
Sigmacon Site Map
Sigmacon Category Page - UX Outcomes
  • Client
    Kia Motors Canada
  • Services
    UX - UI - Development - Motion Graphics
  • Website
    offline

Client engagement involved the creation of a full content managed and driven Media site for Kia's dealer network. This included UX, flow charts, wireframing confirming high quality user experiences. Full creative delivery; data and application development for front and back-end functionality; QA assesment and migration to Kia's servers. The project was a sucess leading to a secondary component for a Kia Rio micro-site employing motion graphics and continueing maintenance on Kia's primary marketing site.

Kia Motors Canada StoryBoard
Kia Motors Canada - Story Board
Kia Motors Canada Media Site UX

UX User Expereince Design

Usability, requirements gathering, and documentation prior to the start development helps a project team ensure that user outcomes enhance the experience in our applications. Well-designed products and services will deliver value to our customers projects and instead of just meeting business goals.
Back to the Work
BACK
NEXT