genesis finance website re-design
project brief
as lead UX designer, I re-designed the Genesis Finance website for our client, Hyundai Capital America, and created a template for overhauling its partner websites, Hyundai and Kia Finance. we streamlined the architecture of all pages with the aim to help customers easily access help and FAQ information as well as created a 2-click payment experience with the goal of reducing support call volume and associated costs. the Genesis finance site publicly launched August of 2023.
individual role and timeline
submitted winning design proposal, created UX/UI wireframes in partnership with art directors, created high fidelity prototype and handoff files and annotations via Zeplin to HCA (Hyundai Capital) developers.
timeline: twelve months (for UX contribution), site launched August 2023
UX deliverables
general evaluation of previous Hyundai Capital sites with feature proposals via Powerpoint
two design proposals
final hi-fidelity responsive wireframes submitted via Adobe XD
final annotations for all pages submitted via Zeplin
team
experience strategy, UX, creative, copywriting, Q&A/proof, account/project managers, Hyundai Capital developers
tools used
Adobe XD, Invision, Zeplin, Powerpoint
current state website
• was originally created with focus on “payment” actions
• the site architecture and UI had not been updated for over 5+ years
• FAQ/help was not prominently featured (hidden in the footer) and immense amount of help topics were all shown in one long scroll, causing user reader fatigue
what's the problem?
the three customer finance websites under the Hyundai Capital umbrella all shared the same architecture which isn’t inherently a bad thing. however due to the limitations of the UI design, the different sites had no cohesion with their individual OEM/mother sites (Kia, Hyundai, Genesis) which caused customer confusion when switching between the different websites. this confusion also slowed down customers trying to complete actions such as logging in to their accounts, seeking customer support or making payments and forced them to seek outside support through the call centers.
branding alignment to the OEM sites
• JD Power Consumer Satisfaction had ranked Hyundai Capital sites below industry standards for payment and website experience
• HCA wanted to upgrade site templates and wireframes to match the OEM user experience and allow for deployment of modern digital components such as navigation, menus, promotions and other content
simplify navigation to critical functions and sites
• the current website foundation/design was limited in its back-end capacity tied to eService navigation
• another goal was to create a personalized customer dashboard which would help support sales as they provided customers a “one-stop shop” with resources ranging from financial education to sales action items
create a 2-click experience to make quicker customer payments
• the current state website would routinely require 5+ clicks to get simple things done (ex: making a payment)
• HCA’s goal was to aim to simplify navigation by housing key information in less clicks or tabs making pages easier to find
initial research and competitive analysis
after receiving the business scope and brief from our client, we conducted some competitive research and suggested features (grouped in good, better, best groupings) that we felt would translate to the new revamped Hyundai Capital site. while not all of our suggested features eventually made it to the end product, we wanted to make sure that each recommendation was grounded in business and tech constraints in order to maximize the potential for client sign-off and approval.
some of the feature recommendations presented to client based on comparative research
some notable payment or account details we found were:
• incorporating vehicle images or offers prominently to break up payment text information
• popup functionality: making payments a separate popup which could make the task easier for customers
• a visual indicator of how many payments were left for customers whether it be a bar or graph
some key takeaways from this research were:
• grouping the most important functions or information into tiles of categories
• “less is more” - the customer didn’t need to see every FAQ question in equal prominence. it was up to the company to determine what was important to feature, whether it was a popular question or a business-directed feature placement.
the design process from low to hi-fidelity
after submitting two different visual mockups with some of our feature ideas sketched out, we moved forward with one general proposal and began the work of partnering with our copywriters, art directors and Adobe experience managers to lay a foundational UX architecture down, consolidating pages and navigation, adding new features and translating what felt like hundreds of pieces of information into one cohesive prototype and site for both new users and internal Genesis customers.
final design features
home page
FAQ/self-help
making a payment
offers
consolidation
home page alignment with OEM Genesis site
• multiple options for log-in through main hero banner and hamburger menu
• tile structure to highlight the most important points of communication
• offers are prominently featured through revolving carousel, tile, and sign up section
• visual layout aligns more closely with OEM Genesis main site
• footer was expanded to offer better search and navigation
FAQ navigation improved
where the original layout featured an endless list of questions to scroll through...
we grouped the categories into tiles with a search input field, list of preview questions and a pop-up interaction. same information, easier to read.
2-click make a payment interaction
one of the main client requests from HCA had been to figure out a way to incorporate a 2-click interaction for a customer to complete a payment.
we utilized a popup interaction for authenticated users already logged in to be able to easily make a quick payment without having to get to the payments page.
offers and promotions
we created a new popup interaction for viewing offers that allowed a customer to view all of the Genesis offers for a specific vehicle without having to navigate to multiple pages or leaving the finance website to navigate to the original Genesis site. we also offered an opportunity for customers to sign up if they wanted to see more offers, which was not previously built in before.
all in one downloads and sliding tab visual improvements
there were several opportunities to condense the information seen and help the customer avoid reading fatigue. one example was providing a “download all” option for the numerous PDFs available under the vehicle protection section. previously, the customer would have to scroll through all the pages to access each PDF.
we also redesigned a sliding tab navigation for the customer that Genesis Finance was already utilizing for some of their pages to align with Genesis OEM branding as well as make other pages within the site easier to read.
rollout to kia and hyundai finance sites, UX learnings
once the site layout/architecture, content, design and annotations were approved by HCA, my team built out the wireframes for the sister brands, Kia and Hyundai. Genesis Finance was the first of the three sites to launch in August 2023, with its sister brands rolling out their respective sites shortly after.
the major highlight of this project was being able to analyze and tweak the various interactions and convert a mountain of information into more accessible hills of text. working with our client developers rather than our in-house Latcha engineer team posed a variety of challenges. Incorporating feedback from clients while still maintaining a user-centric perspective became crucial and resulted in a streamlined framework for all three Hyundai Capital finance sites.
