top of page
International shopping in native language
Nixon has been the premium lifestyle accessory brand of choice for independents, creatives, and free-thinkers the world over. Sold in over 90 countries, they've built a global following of people living unbound lives and This is a story of how I made a positive difference to the use of this platform by enhancing the country 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
Country Selector
The country selector allows users to switch to their native language/currency, improving customer experience with a 75% reduction in clicks, and improving the customer experience.
ROLE/TEAM
UX/UI Designer
VP of E-commerce
Director of E-commerce
Marketing Team
Dev/Engineers
TOOLS
CLIENT/DATE/DURATION
Figma
User Testing
Zoom
Nixon, Inc.
04/06/2020 - 04/27/2020
1 Month
DESIGN THINKING
Design Roadmap
Design roadmaps outline important phases such as research, creative approach, delivery, and implementation.
1
2
3
4
5
6
UNDERSRTAND
What is the problem? What are business requirements?
DEFINE
Who & What are we building for? What is the user pain points and user needs?
BUILD
How are we going to build it?
TEST
How do the users feel?
ITERATE
How can we improve from user and business feedback?
DEVELOP
Handoff to dev/engineers
THE PROBLEM
How might we improve the country selection process?
When conducting user testing on the homepage usability, I found usability issues with the massive country selector feature for international customers. It would take a user 3 clicks to switch to the country language and currency.
These usability issues were all minor interruptions that didn’t occur every time someone interacted with a country selector. But they were degrading the overall user experience — ultimately leading to abandonments for international customers.
With this in mind, I re-designed the 3-click country selector. Below are the design iterations we went through to reduce the number of clicks to switch the country selector and improve the overall customer experience.
THE GOALS
What does success look like
1. Reduce the number of clicks to improve the overall customer experience
2. Make it visually appealing so that the user doesn’t have to think and can locate the country with a quick scan of the eye
3. The solution should be a responsive and consistent UI that can be used for both desktop and mobile experiences.
RESEARCH & ANALYSIS
What is our competition doing?
Competitive Auditing:
This is where I dived in and out of what's in our market and what is working and not working. I discovered that people are used to having images and country names in the language of the country.
Research
To understand the country selection process and consumer behavior, I looked at research conducted by Nielsen Norman Group and Baymard Institute.
Here are some screenshots of how our competitors are solving for this problem.
SKETCHING
Possibilities are endless
Crazy 8 Sketching
Through sketching, I dumped all ideas gained from research, previous experiences, and business/user needs. I was able to test them out in a short amount of time and validated if they would be mobile responsive.
WIREFRAMES
Low-fidelity concepts
Sliders
Through quick testing, it was clear the sliders would not work with mobile. Back to the design board for multiple iterations. Iterations included all countries to be displayed on the same page. With just one click the country would be selected by user.
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
I spoke to a few of Nixon's influencers/ambassadors and tested the prototype with local customers over Zoom.
Covid had reached its peak so it was difficult to do in-person testing. This solution is still live and in full use on Nixon's website www.nixon.com
KEY TAKEAWAYS
Challenges & Conclusion
Completing this project helped me understand that e-commerce for retail is another world on its own. 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.
Throughout this project, I wanted to keep our users in mind based on the Baymard Institute. Working with the development team made me appreciate my love for project management and how important communication is.
Other Feature Designs
A case study of all the iterations was not possible. So below are images of other iterations during my time with Nixon. To decide what solution works best it's important to understand why some design solutions will not solve the problem.
bottom of page