Introduction: Virani Jeweler’s was established in 1987 and grew its business over 3 decades to 4 brick and mortar stores, catering largely to the South Asian population in New Jersey. Serving as family jewelers, they provided jewelry needed for traditional events and cultural sensibilities.
Iterations 1.0 - 2.0 in 2017
Situation
Introduction: In January 2017 the ecommerce store launched and categorized jewelry same as it did in brick and mortar stores: “gold jewelry” or, “diamond jewelry”. Customers connoted the value of these jewelry types differently:
• Gold jewelry - referred mostly to 22 karat gold, as well as 18K & 14K.
• Diamond jewelry referred only to 18K/14K as pure gold is not hard enough to hold stones. Over time, the value of this type of jewelry decreases.
Challenge: Translating the brick and mortar experience on to an online experience without the physical presence of jewelers to interact with customers required information architecture with more universal taxonomy, and product categories that reflect market segments (such as bridal, engagement, men’s etc).
1. Refinement options were replicated in each product category and there was no page flow.
2. Shoppers could not find products easily and had difficulty learning how to navigate the site
Task
This release addressed the following issues:
Information Architecture: Navigation bifurcated jewelry types in “Gold” & “Diamond” which did not allow seamless user flows.
Nomenclature: Jewelry type sub-categorizations were not intuitive.
Usability: No backlinks in filteration, reliance on clear button.
Cluttered Hierarchy: placement of options limited user’s discovery of product in terms of relevant searchers.
Browsing Retention: Indistinct classifications with repeat results and no inventory counts.
Action
Team: When I joined the team consisted of two other UX designers, a developer and three database managers, with the youngest member of the Virani family, Aqib Virani representing the founders
My role within the UX team was to bring in research and set up analytics. To immerse myself into the world where Virani Jewelers existed, I did contextual inquiry and also took part in the shopping experience at the Virani stores and their competitors’ stores. My research indicated that filteration redesign was first priority.
User testing validated the site was not intuitive.
Using Survey to broadly concept user behavior
At this stage, the survey was based on a large pool of people who bought jewelry online. The goal was to understand attitudes, motivations and obstacles.
At this stage the site was 4 months old and Google Analytics would not be able to provide enough insight on who the site’s personas are; additionally, who “we” were was also in flux. There would have to be an interplay between finding our main persona, and defining our target person. So, I facilitated a workshop with Hassan, the other UX designer in our team and our intern, Josh to create proto-personas.
Concept Behind the Proto-Personas
Synthesized research to affinity map upon the habit loop flow.
Empathizing with the user to label them
PROTO PERSONAS
• Secondary & Tertiary Proto - Personas: The millennial woman, millennial male and marriage-related shoppers were the other personas we began to gather data on in 2017.
While the jewelry products were largely South Asian in aesthetics, many were non-distinctive in ethnic style. So the curation of collection & content development with effective filtration would lead all users to the product right for them.
Context: Persona & Problem Definition
• Primary persona (South Asian) & Investment habit:
The primary persona was based around the business’ loyal customers who habitually bought gold, and gold jewelry which provides adornment signified value as investment. Historically, newly married women carried financial security in the form of their wedding jewelry, and South Asians people counted on their gold assets in times of extreme duress.
• Difference between 22K, 18K and 14K Gold:
‘Gold Jewelry’: 22k solid gold jewelry
‘Diamond jewelry’: 18k and 14K gold embedded with stones.
• User’s behavior while shopping: The jewelry has a distinct relationship between Karatage & Value. The primary persona placed emphasis on value, and secondarily on aesthetic tastes.
• Karat purity is measured as 24 times the pure mass divided by the total mass; therefore 24 Karat gold is fine (24 karat gold is actually 99.9% pure and fine gold).
Value:
18 and 14 Karat Gold Jewelry with Stones: is the only form of gold that can hold stones because 22K gold is too soft.
Gold loses value once it is attached with stones as wear and tear cause tarnish and stones loosen or damage.
• Business Risk: When purchasing diamond and gemstone jewelry one bought lesser gold Karatage which in South Asia is either 18 or 14 karats. With the new filtration system, we wanted to ensure that the primary persona was not going to be isolated, or bounce because they did not feel Virani Jeweler’s understood their basis of shopping gold.
• Market Research | Competitive and Comparative analysis: provided insight that all jewelry of the same type were combined while allowing users to control their material type search. This would optimize results fulfilling the Primary persona’s investment needs, while increasing usability for secondary personas.
Brand Story
As I provided the initial research to Hassan who was doing technical research for the filteration, I also used that research to write the brand story - and worked with the Marketing director, Triveni Arora to distill brand pillars; an official consensus from founders on how to position who “we” are in relation to “our customers” and the history of the business and the founding members.
Interviews of founders, customer representatives and deep dive of collaterals were used to write the Brand Story and Brand Tone & Voice.
design kit based upon the Brand guide
While the design kit was was being prepared by Peter Lew (UX designer), I worked with Hector and Josh (intern) to design low and medium fidelity wireframes.
The design kit was used to create high fidelity wireframes that were tested and template-ized.
Medium fidelity User Testing
Users were not able to understand the “sort bar” in the early prototypes: sorting by price, collection and sale were removed only after release however. The new sort bar only allowed sorting by price (high - low) and new.
High Fidelity User Testing
Solution enabled by implementing Algolia’s Technology:
To make the filtration robust for hundreds of products it was decided Algolia’s technology would be implemented and UI functional with Javascript. The Algolia model provides ‘search as a service’, offering web search across a client's website using an externally hosted search engine. This technology only indexes their clients' sites and so the search task is far simpler. Data for the client site is pushed from the client to Algolia via a RESTful JSON API, [Wikipedia] then the search box is added simply to the client's web pages.
Technical Specifications & Design Requirements
To integrate Algolia with Shopify platform, User Interface components in filtration were implemented using Javascript.
QA Testing
Conclusion:
This project had 2 iterations later because the sort menu was confusing for the user, as found in testing prior to implementation. But after the site’s redesign launch algolia implementation and developer’s inconsistent CSS & Javascript codes caused the site to break horribly. Algolia and Shopify integration also required tagging which is manual. A tedious process for database managers upfront required that Shopify be configured correctly for this change in regards to new relationships between metafields and tags. This was problematic further when including long SEO titling (a marketing necessity) and description copy.
• Most crucially for the user: the Product Sub-types were more important to shop by than technical nomenclature like ‘long’, ‘short’ for say, necklaces and earrings.