Boutique Finder

Swarovski Crystal is part of the Swarovski Group, a premier and worldwide operating brand famous for its jewelry and high-quality crystal, genuine gemstones, created stones and finished products such as accessories and lighting solutions.

We were tasked with developing a store locator for desktop devices providing location dependent information regarding store details, optional filtering and route planning using an online map service.

Type
Interactive

Client
Swarovski

For
d-SIRE

Role
Conception
UX/UI

Tools
Omnigraffle

[unex_ce_button id="content_411kar9ed,column_content_sv71ari7i" button_text_color="#141618" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="#fede88" button_padding="10px 17px 10px 17px" button_border_width="1px" button_border_color="#fede88" button_border_radius="4px" button_text_hover_color="#7c7a7a" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="#7c7a7a" button_link="http://www.swarovski.com/Web_US/en/boutiquefinder" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]USE BOUTIQUE FINDER[/ce_button]

With an exclusively available store finder solution for mobile devices, the desktop experience by then comparatively lacked key functionalities regarding omnichannel retailing. On a meta level this required to think about how to further improve customer experience by integrating features that facilitate seamless transitions from online to in-store sales. The assignment also involved a revision of the store detail pages and integration of the so called "Virtual Visit" section featuring flagship stores.

Given the large number of retail stores, we likewise had to take result handling into account by developing a clustering mechanism that took care of that issue, hence optimizing the overall store locator usability and user experience. Througout the project I was responsible for further elaborating conceptional data provided by the client, creating the respective wireframes while being in a close dialogue with in-house developers, project managers as well as stakeholders.

By implementing mechanisms that significantly enhance the customer's shopping experience, we fostered seamless transitions from online to in-store sales.

01 FLOW DIAGRAM

Illustrating the process by a diagram helped to understand respectively analyze potential difficulties when users try to complete the task and moreover, I could validate the efficiency of our approach before defining feature sets of the UI.

Furthermore, this was useful when discussing with developers: determining the API integration as well as logic that handles requests and renders results on the map together with adaptions in JS/CSS, paved the way for the next steps in the design process.

Starting with flows when planning digital experiences always helps to tackle and minimize problems.

I like to go broad in the beginning and fill pages with various approaches to a problem just by using pen an paper. For me, at this stage it is rather about avoiding self restriction than coming up with great solutions for every aspect.

In this particular case I focused on how to implement the required functionalities while keeping an eye on the arrangement of UI elements in order to maintain consistency with regard to the store locator for mobile devices.

An initially open approach permits to go past the limit when it is the proper time to do so.

Having the technical parameters determined and the store locator structure sketched out, I continued with creating a set of wireframes. With desktop devices lacking GPS, we decided to integrate an IP-based location algorithm using CountryHawk, triggering a location dependent view upon being clicked. In addition, implementing the maps API ensured directions to desired stores. As mentioned previously, handling search results in a preferably elegant way was crucial for a convenient UX.

Thus our solution included a mechanism that avoids clutter by clustering single stores dependent on the used zoom level. On results pages itself, we ensured clarity through structuring content and by implementing an expandable product category-based filter. Same goes for the revised "Virtual Visit" section and (flagship) detail pages: we focused on improving legibility through structuring content by relevance, consequently creating a satisfiable usability and navigation experience while minimizing generic data.

Expanded layer with product categories, elements below are being pushed down. Choosing one or more categories affects the number of results displayed on the map.

As you might notice the pages are partially cropped in order to blend in nicely with the mockups. Full pages comprising commentary can be viewed in the document below.

Besides variants of the store detail page, the document includes explanatory notes on optimized result handling compared to the initial situation as well as user interaction specifics.

If you want to check out the final wireframe specification, you can view it here.

[unex_ce_button id="content_tj9tb0kli,column_content_brppknvtk" button_text_color="#141618" button_font="regular" button_font_size="14px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="#fede88" button_padding="10px 35px 10px 35px" button_border_width="1px" button_border_color="#fede88" button_border_radius="4px" button_text_hover_color="#7c7a7a" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="#7c7a7a" button_link="http://www.borisslogar.com/wp-content/uploads/2016/09/Swarovski-Boutique-Finder.pdf" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]VIEW WIREFRAMES[/ce_button]

The final design reflects the elaborated approach and additionally showcases the revised detail pages for flagship stores with formerly generic content replaced by strip-like picture sections to convey an impression of the store interior.

Search results while zoom level is minimized. Clustering single stores in the desired area avoids clutter while enhancing clarity.

Revised store detail page with content restructured. In addition, content is being displayed dynamically depending on whether the viewed store is flagship or not.

"Smooth" is what comes into my mind when I think about realizing this solution. Overall, we managed to get everything - from concept to implementation - up in less than two weeks. Due to an effective decision-making process we maximized our ability to deliver quickly and to respond to emerging (change) requests.

Again, getting ideas out of the head rapidly and onto paper while constantly involving the whole team and ecouraging them to come up with own solutions just proved to be the proper approach. Covering the requirements like this ended up with adequate deliverables for both the client as well as end users.

Interdisciplinary collaboration is an effective way for speedy result creation.

[unex_ce_button id="content_5vd9pm4f9,column_content_ej3xqosjt" button_text_color="#ffffff" button_font="regular" button_font_size="12px" button_width="auto" button_alignment="center" button_text_spacing="3px" button_bg_color="transparent" button_padding="5px 15px 5px 15px" button_border_width="1px" button_border_color="transparent" button_border_radius="4px" button_text_hover_color="#fede88" button_text_spacing_hover="3px" button_bg_hover_color="transparent" button_border_hover_color="transparent" button_link="http://www.borisslogar.com/imprint/" button_link_type="url" button_link_target="_blank" has_container="" in_column="1"]IMPRINT[/ce_button]