Objective
A handful of business cases that are currently being solved individually (e.g., repeat purchase, promotions, add-ons, bundles, & upsells) will be solved using a single system based on an updated mini-basket design.
Solution
This new smart basket will work similarly to a previously explored proposal, but will take the business/customer needs, page context, as well as the user’s authentication into account and not solely based on adding products into the cart.
Result
It will reduce the number of different business cases into a single engineered & designed system that communicates to the user at the exact moment of their need and decision making, with few distractions.
- Due to launch middle of the year (2022)
(Above) A link could create a ‘soft bundle’ (set of individual SKUs) inside the Mini-cart.
(Above) A Collection upsell (pt.2 alt): The user would rather have two separate products and effectively dismisses the promo.
(Above) A Collection upsell (pt.1): Two or more products in a Collection are added to the cart separately, a promo displays a price savings.
(Above) A Collection upsell (pt.2): The user decides to ‘upsell’ to the Collection and effectively changes the cart.
Objective
Help the Business and Engineering Development understand and determine the end-to-end technical & UX flow of integrating online financing within our eCommerce platform for customers that wish to use it.
Solution
Created a set of three possible technical flows for discussion and a primary one to select for all stakeholders
Developed a UX flow to discuss and identify gaps in the experience with all team members
Designed a number of high-fidelity mockups at various customer touchpoints for marketing, sales funnel, and transaction
Result
Actionable assets that were used by all to determine variations, selection, and scope (sprint stories, visual design, and contractual agreement).
Categories
Design strategy, information architecture, eCommerce, online financing, product design
- Launched in mid 2022
(Above) High-fidelity first concept of announcement banner for flexible payment schemes
(Above) In the cart-checkout, ‘online financing’ is treated as another payment option
(Above) Flowchart maps out each implementation option to help the business and dev team select the best one
(Above) A hybrid model between purely API (Option 1) and completely hosted (Option 3) was selected after reviews & discussion
(Above) Second draft UX flow chart
Objective
Identical ‘purchase & pricing’ information is displayed in two locations within product centers; confusing customers, diluting SEO value, and creating additional work for web publishers.
Solution
Created a slimmed down buy selector with price display, flexible enough to work globally across all of the product offerings which can also be directly linked.
Result
Immediate improvement of both qualitative & quantitative metrics across search result click-thru () and cart completions ().
Objective
As a subscription business we need to let our customers change the duration (term) of their paid subscription to a different one (e.g., 1 year to 3 year or monthly) without having to cancel it and buy the same product from the store, again.
Solution
Utilized a flexible design pattern & modular code base of the cart-checkout within a separate domain & system
Enabled greater flexibility to change or update the UX & optimize (A/B testing)
Provided a quick and responsive development capability
Removed duplicative functionality, saving time & money
Result
Usage metrics in the first three months showed that 75% of customers picked a longer term, resulting in 3x more billings than expected. Follow-up surveys indicated users were comfortable using a familiar UI as their initial purchase.
Tags
Design pattern, eCommerce, subscription management, code optimization
- Requires an existing product subscription to use this feature
(Above) The initial Subscription detail page where a user can change their subscription term
(Above) Selecting ‘Change’ opens a modal with a term selector using the same code base as the one used for initial purchase
(Above) The user selects then confirms one of any available terms, e.g., 3 year
(Above) A final screen indicates the changes for this subscription term change
(Above) User returns to the management screen, with a small note indicating the future term change
Objective
The simulation software team needed an engaging way to communicate the concept of ‘Automotive light-weighting’ to customers.
Solution
Created a highly interactive visual tool showing parts on a car that could be light-weighted
Includes a calculator showing weight reduction for those more data driven or swayed by numbers
Speaks the customer’s language with industry fuel economy savings estimates based on CAFE standards
Result
The demo engages & visually informs the customer with data and is the most trafficked simulation demo sales page in use to this day.
Tags
Conceptual design, interactive demo, simulation, sales & marketing tool
https://www.autodesk.com/solutions/simulation/automotive-lightweighting
(Above) Final functional design of the automotive light-weighting tool in action
(Above) Concept wireframe showing information layout and clickable targets.
(Above) An affordance on the right, highlights or exposes the lightened part in the first concept
(Above) A visible slider could be used to highlight or exposes the lightened part in the second concept
(Above) Tapping on the part displays the light-weighting data for that part, but too may controls
(Above) There is also a desire to show the weight savings as well as the rendered simulation, the slider is too much
(Above) Wireframe showing overall page layout and display of concept for light-weighting tool
(Above) Final design and layout of the entire Automotive light-weighting page
Objective
The AutoCAD marketing team wanted a highly interactive ‘product features’ sales tool which covered the newest and popular features, explained how build them, and could easily display them in 3D & 2D modeled scenarios.
Solution
Created the UX concept and worked with our Cl3ver partner to update and refine
Designed the navigation and information architecture
Managed screen production with the visual designer and primary stakeholder
Collaborated with partner on the digital asset production for the final screens
Result
A satisfactory but not great product since the underlying platform wasn’t well suited to show software emulation & piecemeal 2D production, but rather is better suited for 3D interactive tours of structures.
Tags
Conceptual design, software tutorial, product management, information architecture
- The cloud-based demo was removed the following year for a new product feature prototype (2017)
Original URL: http://3d.cl3ver.com/SEAmV
(Above) Final concept wireframe using real AutoCAD source file for feature explanation
(Above) Third layout concept wireframe
(Above) Initial navigation & layout concept wireframe showing potential 3D model on background screen
(Above) AutoCAD demo flow map with asset annotation
(Above) Example of storyboard used to describe all user viewable screens
Objective
Fireman’s Fund Insurance Company wanted to update and improve the UX of their Claims Lookup web application.
Solution
Created a new and more noticeable Claim Lookup (form entry) launch point on the Agent Desktop homepage as well as creating new Claim Results and revised Details screens with additional claims information.
Responsibilities
Created low & high-fidelity wireframes
Developed UX
Delivered final UX designs, documentation, and 'slideware' prototypes based on existing design system
Result
Successful launch of both the Lookup component and the redesigned IT Intranet.
- Lorem ipsum dolor sit amet consectetur adipiscing elit. Maecenas condimentum ornare vestibulum erat ipsum rhoncus est (2006)
(Above) Search results and the Claim record can be modified by a few parameters
(Above) Additional parameters under Advanced Search can narrow the results further
(Above) Additional information such as ADP (Auto Property Damage) amount or Collision paid are displayed in sub-tabs
(Above) File Notes can be added to the Claim Detail record but user access is determined by role
(Above) A section for only viewing a FNOL (First Notice of Loss) document as no changes are allowed
Role
UX Designer
Responsibilities
As part of a global team, designed various portions of IBM Workplace, a desktop based rich-client platform built on the Eclipse IDE, used by IBM Domino & WebSphere Portal customers.
• Designed search, filtering, & sorting interaction functionality based on existing web portal search features that would be integrated into the managed client
• Collaborated with other designers & product managers providing wireframes, design documentation, and user-acceptance testing for functionality & features of the baseline framework
• Worked with a global team of developers (web & java) and lawyers to implement design to code of customer-oriented features for the managed client
• As a part of the productivity tools team, created designs for various productivity apps with focus on spreadsheets, presentations tool, documents, and window management
Result
Helped to successfully launch two iterations of the rich-client platform & associated tools over the course of two years learning to work closely with development engineers in a large organization with a lot of moving parts to a platform
- Although IBM Workplace was initially meant as a standalone product, it became a Lotus Notes replacement. It maintained the Lotus brand until 2012 then Notes was eventually sold to HCL Technologies (2019)
(Above) Visual design implementation of Text and Cell Properties sidebar
(Above) Coded beta implementation of the Text and Cell Properties sidebar based on wireframe
(Above) Simplified exploration of a Personal Time off app using an inbox pattern
(Above) Design team managed & created wireframe to explore and test various layouts and affordances for the Workplace Managed Client
(Above) Example prototype of type-ahead feature within a managed client window
(Above) Web page prototype source for possible search features to implement in rich-client prototype
Objective
Assist the Charles Schwab Marcom group in creating the Customized Communications Tool (CCT), a new expanded letter-writing tool for Schwab’s internal employees, to create customized, regulatory approved, client letters tailored to their specific needs with attached collateral which could be sent physically or electronically.
Responsibilities
Hired by 4Di as a consultant to help formulate the design solution and create the HTML templates used by the engineering team for the Web App.
User Research - Along with 4Di’s president (primary client contact), conducted interviews with Schwab employees at their workstations to understand the existing letter generation flow
Information Architect - Organized & analyzed the user interviews, existing system screens & flow with regards to pain points & usage gaps to inform the scope document (functionality of keys screens). Attended client review meetings of proposed screens & workflow
UX Design - Using the RFP, scope document, and interview notes, created a set of eleven high fidelity wireframes based on Schwab’s internal design system
Front-End Coding - Created HTML file of the key screens to use as templates
Solution
The design is comprised of three parts:
Letter management - under ‘Personal Letter Queues’
Letter creation - The tabbed screens in the page body
Letter approval - Not shown
Result
Successful launch and utilization of the new tool as well as repeat business for other projects.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed lobortis eros eget mattis iaculis. Nam rutrum enim purus, consectetur hendrerit nisl lacinia eget. Mauris ultrices eu libero id viverra. (2002)
(Above) Lorem ipsum dolor sit amet, consectetur adipiscing elit sed sit amet ex arcu
(Above) Fusce venenatis mattis efficitur. Donec fermentum eget massa volutpat fermentum
(Above) Vestibulum faucibus eros eget faucibus hendrerit ut in sagittis mi
(Above) Etiam sed velit enim nulla porttitor lacinia massa in egestas aliquet nisi enim
(Above) Integer nec lorem at risus congue semper aenean dignissim tempor libero, blandit iaculis lacus varius
Role
Account Manager & Producer (non-UX)
Responsibilities
Pre sales - worked with sales to set client expectations, answer process & platform questions, and ensure project viability.
Post sales - worked with clients throughout entire production process (including UAT & QA) ensuring final delivery and sign-off with client.
Producer - managed logistics and guidance for video production team (in-house & remote capture) as well as working with web/CD-ROM production teams and developers.
Result
Over 75 projects within a two year period with frequent repeat business from J&J, GSK, Bayer and other Pharma & device companies.
- After a number of management changes, DigiScript filed for Chapter 11 bankruptcy and is no longer a going concern (2008)
(Above) DigiScript eLearning platform (with J&JPRD branding) showing video, transcription, presentation slide, and slide index
(Above) Semi-customized CD & web page table of contents for eLearning modules
(Above) eLearning platform with small video only
(Above) eLearning platform with audio only source for clinical trial
(Above) eLearning platform with customizable tabs, this one provides downloadable handouts
Role
User Experience Manager & Creative Director
Responsibilities
With a small team, converted a purely editorial site filled with financial advise into a web portal with content, financial tools, and brokerage for independent advisors and their clients.
UX Design - developed concepts, storyboards, and wireframes of all tools & pages approved by the business and dev teams, as well as our SaaS partners.
Project Management - collaborated with the dev team and business group to create and manage the design & front-end development schedule.
Creative Direction - worked with and managed an external design agency to create and deliver a visual design system for all aspects of our portal site, including user management, editorial content, tools, and brokerage functions.
Web Production Management - converted purely functional Excel tools/calculators into functional visual Excel wireframes for web production as well managing a team of front-end web developers.
Result
From 2000 to 2002 EAInvest signed up 132 individuals as well as 53 Financial Advisors with a combined total ‘managed accounts’ worth $67M.
- After an initial investment of $8.3M, EA’s burn rate was too high for the economic downturn and the company was sold to State Street (2002)
(Image 1. - EAInvest portal homepage)
(Image 2. - 401k investment calculator tool)
(Image 3. - financial advisors ‘Your practice’ gateway page)
(Image 4. - signed in page showing asset allocation for each financial goal)
(Image 5. - a more advanced personal finance tool displaying credit card consolidation calculations)
(Image 6. - legacy editorial content index page)
(Image 7. - an example of using Excel as a wireframing tool)
(Image 8. - EAInvest portal high-level IA site map)
