top of page
Can I have a discount?
Nixon has been the premium lifestyle accessory brand for independents, creatives, and free-thinkers globally. This is a story of how I made a positive difference in this platform by enhancing the country's selection process.
To comply with my confidentiality agreement I have gained approval to post these designs on my portfolio. Nixon is a consumer-facing e-commerce site is a local San Diego Brand available for retail sale.
PROJECT
Discount Code
The discount code allowed all users especially (First Responders, Doctors, and Teachers) to quickly locate the discount field improving customer experience with a 77% reduction in cart abandonment and improving the customer experience. This was an extra initiative due to COVID.
TEAM MEMBERS
UX/UI Designer
VP of Product
Director of E-commerce
Project Manager
Dev/Engineers
TOOLS
CLIENT/DATE/TIMELINE
Figma
Jira
User Testing
Zoom
Nixon, Inc.
05/04/2020 - 05/29/2020
1 Month
MY ROLE
I was the UX designer at Nixon and responsible for creating desktop and mobile responsive. I led the UX work, producing all major deliverables and presenting them to the client during COVID in May 2020. I worked alongside the business, product, and the engineering team for feedback.
DESIGN THINKING
Design Roadmap
Design roadmaps outline important phases such as research, creative approach, delivery, and implementation.
1
2
3
4
5
6
UNDERSRTAND
Project
Requirements
DEFINE
Problem
Goals
BUILD
Reasearch
Wireframes
TEST
Usability Testing
A/B Testing
Split Testing
ITERATE
Final Designs
DEVELOP
Handoff to dev/engineers
THE PROBLEM - *COVID*
How might we improve the checkout experience by adding a discount field for first responders?
In this feature, I explored the process of enhancing the checkout experience for an e-commerce brand called “Nixon”. The goal of the project was to reduce cart abandonment rates and improve overall user satisfaction during the checkout process.
-------------
Problems observed from user behaviors
Several issues contributed to high cart abandonment rates, such as complicated checkout forms with discount options and no discount codes, unclear shipping and payment options, Lack of truck signals, and security assurances. The promo code is more visible to the user. Currently, it’s located at the very bottom making it difficult for users to find.
Business requirement
After the interface was evaluated from the users’ perspective, I dove into the business details through an interview with the client. Questions about business limitations and current obstacles are raised. The added feature of ID.me discounts for first responders was also requested to be added to the current experience.
Requirement vs observation
The checkout logic was too complicated due to the business's previous decisions to hide the discount code — users struggled to understand where and when to add the discount code and quit in the face of excessive effort required on their part.
The most difficult part of the checkout was how to allow first responders to add their discount while verifying their identity. The users have to be verified first responders to be able to get the 10% discount given for COVID-19. Almost every brand was taking on this big feature and Nixon surely did not want to be left behind. For an e-commerce, it’s important to keep up with consumer trends and behavior shifts. This could not be left as is.
THE GOALS
Setting up to solve the problem
1. Optimize the checkout experience specifically for mobile devices.
2. Make it discreet but visible so the user doesn’t have to think and can locate the discount field as expected by an everyday online consumer.
3. Consider brand guidelines of the third party ID.me when implementing the discount code for first responders & teachers.
RESEARCH & ANALYSIS
Preparing to checkout?
Competitive Auditing:
Competitive Analysis is crucial in the e-commerce industry to see how the other brands are solving this problem. Any e-commerce website must stay up-to-date with the ever-changing behaviors of users and how other businesses are enabling new trends and altering the behaviors and habits of consumers in general.
Research
I conducted quick user research to understand the pain points and challenges users faced during the checkout process. I used a combination of third-party surveys, user interviews, and analytics data to gain valuable insights. Aiming to construct a wider picture, adding qualitative data to the quantitative, I reviewed the site’s interface and compared it against accepted usability principles. Evaluations, Industry Research, Baymard, and NNG Analytics
I gathered other luxury brand competitors to see how they were using ID.me discount feature on their site. Here are some screenshots of how our competitors are solving this problem.
USER RESEARCH
Understanding the current UX
27% of complaints at the checkout stage are caused by difficulties applying a promo code (Source: Customer Care Associate team). That’s almost 3 of 10 orders that frustrate users at the checkout page leading to more customer care calls and fewer conversions. One of the biggest challenges at Nixon was around promo codes. The current process of redeeming a promo code is too complicated and confusing.
Customer Insights & Ideation
I partnered with lead technicians, product owners, and technical managers to uncover insights and translate concepts into features that address customer behaviors and motivations.
End Users
Consumers, Promo hunters, First Responders
User Needs
User needs to be able to view the discount code applied at checkout and know when and where to put the code in before checking out to the payment portal. First Responders, Nurses, and Teachers need to verify they are who they are to proceed.
Core Target Market
Users that aspire for luxury accessories as a lifestyle.
Pain Points
The Promo code was not applied when the user placed an order, now the user wants the agent to apply that coupon to that order.
Users don’t know what happens after they redeemed the promo code.
Users are unable to discover the redeem promo code touchpoint.
USER TESTING
Heat Maps
I partnered with user testing and Hotjar to investigate how users interacted with the page. With heatmaps, I could visualize the areas with the most clicks and see spots website visitors ignored. The promo code was way below the fold, it was difficult to navigate to.
With this data, Nixon could hypothesize how to improve the experience and then create an alternate design, or variant, to test side-by-side with the original.
I completed multiple rounds of testing, checking heatmaps each time and getting incrementally closer to their desired results. Ultimately, the result was that they needed a larger section for discount codes above the checkout CTA button.
SOLUTION
Discount Applied
Our mission to comprehensively enhance the home delivery experience was a huge success. By immersing myself in every feature and workflow of the customer journey, the product team and I improved all the identified bottlenecks and areas of improvement.
Ideation & Final Designs
Several iterations were created to discuss with product owners and developers to understand any technical constraints during sprint development. Then we decided which designs to test out before presenting them to stakeholders.
USABILITY TESTING
What design works best?
A/B Testing
The next step was to develop hypotheses and A/B test them. I tested changes like reordering the discount code section and creating variations in design. Giving it features like collapsed/uncollapsed version.
Split Testing
I also tested out different versions including layout. I created out-of-the-box designs to give it a more refreshing look. This was not asked for, I wanted to go above and beyond when it came time to present to stakeholders. I could use the results to show them a little about the future and potential for this feature.
STYLE GUIDE
Existing Brand Guidelines
Style Guide
Primary Colors were black and white for the brand and the typography was Avenir Next. So I used the same font and color as it was being used on the consumer site.
VISUAL DESIGN
Final Designs
High Fidelity Designs
I created the first set of fully fleshed-out screens. The testing continued: I tested different versions of the high-fidelity with users to test our hypotheses. When all the goals were met. With the blessing of the stakeholders, I wrapped up the project with a handoff to the developers.
TEST
Did it solve the problem
After the implementation of the new checkout process, the results were promising.
The cart abandonment rate was reduced by 77%, and customer satisfaction scores increased significantly.
The enhanced mobile experience also led to higher conversion rates for mobile users. www.nixon.com
THE CHALLENGE
Designer's Obstacles
Managing expectations is not an exact science, but by keeping communication open, clearly defining expectations from the start, and being willing to adapt and adjust as necessary, I successfully navigated through the challenges that came my way during my time at Nixon.
Stakeholder Alignment:
Ensuring alignment among various high-level stakeholders with differing priorities, such as marketing, development, and business teams, was challenging but was vital for project success.
Overemphasis on Aesthetics:
Clients seemed to prioritize visual appeal over usability or functionality, which posed a challenge for me in the beginning, leading me to create a balanced and effective user interface.
KEY TAKEAWAYS
Conclusion
While understanding the current workflows, a lot of avenues were opened up that led to exploring the best of how a promo code could be used.
Out-of-the-box designs will not have the best heuristics and do not have the best user experience. Consumers expect a consistent experience when visiting any e-commerce site. They all have the same behaviors and expectations for all retail websites.
At every design stage, I focused on understanding constraints and altering my approach accordingly. I demonstrated how user research, prototyping, and iterative design can lead to a successful improvement in the checkout experience.
By focusing on user needs and pain points, I was able to create a more user-friendly and efficient checkout process for "Nixon," resulting in improved business outcomes.
Other Feature Iterations
Below are images of a few of the other iterations that were presented to stakeholders before the designs were finalized.
bottom of page