about

Our client is one of the oldest jewelry enterprises in Russian. They started their jewelry business from 1923 and had over 300 stores in 90 cities across Russia now.

With the booming trend of the e-commerce industry, online shopping has become the main shopping method for modern consumers. Our client is eager to follow and keep up with the trend of online shopping and maintain the top level in the industry. In the meanwhile, they are also hoping to bring up the consumption of physical stores.

The Client asked us to build a responsive website and a iOS native mobile application.

My Role: Solely responsive for iOS native mobile APP, helped with responsive website user flows and UI design.

Challenges

Before starting, I did a heuristic evaluation for the current website to explore the UX, UI, and content that I need to focus on when designing the mobile application.

User experience

1. Navigation Bar

Different from a website, a mobile application requires a navigation bar to help customers to navigate through the app. Up to 5 buttons, the nav-bar needs to be simple, direct, and able to cover the most frequently visited pages.

At first, I used home, category, collections, wishlist, and profile as main navigations, but then our client expressed their desire that they want to emphasize their flagship stores. So we generated a heatmap on the current website to see the focus point of our customers; the heatmap shows red on the button "find a store" on the homepage and product page, which means that a lot of people try to find a store either before or after they have found the product they want.

According to the insights above, I designed the mobile navbar 2.0.

2. Filter

On the current website, each jewelry category has its own filter set; and for each filter, they have different options based on brand marketing needs. Sometimes the filter contains too many options that could affect the user experience when trying to find the right product.

Thus, users need a practical, simple, and well-designed filter to help them choose products fast and precisely.

3. Product Detail

The product page has been redesigned based on client needs, the redesigned page still has too many information hidden behind interactions, which are widely spread everywhere on the page.

Limited to the small screen size, the mobile application needs a higher organized product detail page, from where a user could see the most important information directly and interact accordingly.

4. Choose Store

When searching for products, the company allows customers to choose a store and see the product in the store. If the specific product is not available in that store, the customer needs to fill a form and make a request.

The redesigned flow starts from a map, with floating buttons to switch between the store list and the MTA map. For a mobile application user, the user flow needs to match user preferences. Besides, the way of displaying information on the website also needs to fit with the mobile interaction.