Savicki is a distinguished luxury jewelry brand renowned for its exquisite selection of engagement rings, wedding bands, and high-end jewelry. Their online platform offering an array of carefully crafted jewelry pieces, each designed to reflect sophistication and timeless beauty.
MY ROLE
UX/UI Designer – responsible for designing the country code selection feature when entering a phone number in various forms.
PROBLEM
The lack of a consistent and intuitive way to select a country code in forms caused errors during order placement and marketing sign-ups. This issue was particularly noticeable on mobile devices, where the country dropdown often failed to open properly. Additionally, the tappable area for the flag and country name was too narrow, making it difficult for users to select it accurately with their finger – leading to frustration and accidental taps. It led to confusion for customers and mistakes made by in-store staff manually entering customer data into the system.
DISCOVERY PHASE
I gathered feedback from sales teams and analyzed incorrectly submitted phone numbers. Key issues included:
– Improper display on both mobile and desktop views.
– No visible country code next to the flag in the phone input field, leading to user confusion and additional questions.
– No quick way to search for a country by name or code in the country list.
DESIGN PROCESS
The solution was optimized for both online customers and in-store staff – ensuring the interface is simple and guarantees correct country selection: I designed an off-canvas panel that opens upon clicking the flag icon in the main form. Key features included:
– A search bar allowing users to type either the country name or the dialing code.
– A list of countries displaying the flag, country name, and bolded country code, as it is the most important element.
– The ability to select and confirm a country, which automatically updates the phone number input field.
– The panel’s language automatically adjusts to the user’s device language, improving clarity and accessibility across regions.
SOLUTION
The feature is being rolled out across 10 European markets, supporting a wide range of languages and user expectations. After implementing the new feature:
– We reduced the number of errors in phone number entries.
– We improved the process of contacting customers.
– We made it easier for in-store employees to select the correct country code without manual lookup.
– We increased the quality of phone data in our CRM system.
BEFORE REDESIGN
AFTER REDESIGN
