Introducing the Client
MVintage was founded by a Maltese woman and is now quite know locally for its custom jewellery, most of which represent elements of Maltese heritage and folklore. Their main aim is to promote womanhood and create original pieces of jewellery which enhance a woman’s features while embracing Maltese culture.
They sell various unique collections such as birthstones and zodiac stones and also offer certain levels of personalisation and jewellery layering. A seasonal, trend-based product, MVintage has a very minimalist style, alongside lifestyle imagery. Their product offering is very much similar to their online competitors Monica Vinader and Pandora, which we also studied closely throughout this project’s research phase.
Previous Website Experience & Responsiveness
When the client approached the agency for a website redesign, our first action was looking at their then-current website and analyse and extracting data from Google Analytics, see what functions were available, map out the current user flow, test the responsiveness to different device sizes and interactions and a carry out a design analysis.
Data Analysis – Google Analytics
Devices used:
- Android: 46%, CR 4%, BR 0.7%
- iOS: 36%, CR 4.3%, BR 0.5%
- Windows: 14%, CR 14%, BR 0.4%
- Devices:
- Mobile: 80% of users, BR 0.6%, CR 3.8%, Avg. spend €58
- Desktop: 18% of users, BR 0.5%, CR 13%, Avg. spend €59
- Tablet: 2% of users, BR 0.9%, CR 17%, Avg. spend €52
Conclusions
- Android has highest number of users, at lowest CR.
- Windows has 3rd highest no. of users, highest CR.
- Overarching majority use mobile, and their budget is no different than desktop users.
- CR is lowest on mobile & highest on tablet, with desktop at a close second.
Homepage
Quick Statistics:
- Page Views: 50,143 (8% of total page views)
- Of which unique: 17,495 (8% of total unique page views)
- Avg. time: 23s
- Entry: 32% of total entries
- Exit: 9% of total exits
- BR: 0.4%
Checkout/Cart
Checkout/Cart Page Exits:
- Total: 3694 (7.36% of total exits)
- Mobile: 3244 (87%)
- Desktop: 709
The reports I issued through Google showed a very low bounce rate of less than 1%, meaning that the adverts were targeting the right audience and that even new website visitors were interested in what MVintage had to offer, with over 30% of the leads generated organically through good SEO practices. On the other hand, the Cart abandonment rate showed at 70%, and from the remaining sessions over 40%left at Checkout stage, resulting in just over 5% conversion rate (CR) throughout. The average spend was between 50 and 60 eur.
The Homepage, Flow and Design in General
The design of the homepage looked quite outdated, and the main problem that we were identifying was the lack of a starting point, or a visible journey, and also hierarchy. When landing on the page, the user had no idea where to look, what to do or where to go. In fact, after looking at Google Analytics data, I noticed the consequent high bounce rate of the homepage most probably due to these issues.
The main menu at the top was also very crowded and quite small, and with not enough space between the different options, the gestalt grouping rule starts working against the user here. The dropdown per menu option had this big, eye-catching clickable image on the right which was also deterring the user from the much more useful submenu links on the left of the dropdown container, resulting in added invaluable clicks.
Overall, as per the video below, once the user decided on a product the path got simpler, and there was also the great idea of increasing sales by showing a Complete the Look notification box, and the option to add customised gift cards. The only issue was that there was not always a clearly defined relationship between relevant SKUs, therefore the suggested items at times had nothing to do with what the customer was adding to the bag.
Checkout Experience – Mobile devices
The below video shows the checkout experience on mobile. The client’s checkout page had one of the highest bounce rates of all the pages: the checkout process was way too long – 5 steps – which was annoying users, resulting in a high checkout abandonment rate of over 40%. One can see that there were also issues due to a confusing layout, fragmented design and long load times (no one likes waiting to pay 😀 ), amongst other factors.
Their website was not optimised for mobile, which was the device used by 90% of their visitors yet offering only a 5% conversion rate.
The Engraver
Below you can see the Engraver, which was one of their best ideas, however poorly executed. The video here is showing the desktop version, which was already not the simplest way to work with, however when it came to using the engraver tool on mobile, it was simply impossible. When tested on an Android phone, we could not edit the text, or move and resize any added icons, not to mention that it would crash and lose all progress. Given that the majority of their audience used mobile phones (as per Google Analytics data analysis), this was one of the major pain points that needed to be addressed.
Last but not least, their current online framework could not support the addition of extra features that they wanted to integrate, such as the option to build your jewellery (such as necklaces, etc.), and the final extracted engraving file was not compatible with their engraving machine. Furthermore, the users were placing either designs which were too small or placing designs outside the print safe area parameter without being notified by the system.
Project Objectives & Workflow
Targets & KPIs
The client’s aims were to optimise the website experience in order to achieve a frictionless transition between in-store CX and website UX, leading with a mobile-first approach to directly influence positively the experience of 90% of their users. Their targets were as follows:
- Reduce the Cart abandonment rate to less than 20%;
- Reduce the Checkout abandonment rate down to less than 5% and;
- Increase CR two-fold (10%) within 3 months after the release of the new website.
Who I worked with
As a Senior UX/UI designer, I worked remotely with in-house designers and third party developers. Communication with the client was carried out directly during presentations and progress meetings and through the Project Lead. We setup daily meetings to define our schedule for the day and the priorities for the week, and closed each week with clear plans for the following week.
Tools Used
I used Google Analytics to analyse the website’s situation and issue reports, which providedvaluable insights and data. Miro boards were the ideal tool to map out User Stories, website architecture and user flows, while Figma was used to create the basic wireframes and the high-fidelity prototypes. I also animated certain prototypes using Figma, which made presentations much easier for the client to follow. We found Teams especially useful to keep all the files and messages in one place and for clear, uninterrupted video conferencing as well.
Competitor Research
Pandora and Accessorise are only two of the competitors we analysed. We also looked at Monica Vinader and other popular e-commerce websites which sold more than jewellery, such as ASOS. Competitive Analysis provided a lot of insight of what others where offering, how they were offering it and how our client can differentiate from them, or adopt something and make it even better. When designing certain user flows such as the checkout flow – where the user’s mental model should definitely not be challenged – it is better practice to emulate the most used websites, than trying to re-invent the wheel. This of course does not mean copying the whole design; it is adhering to a flow that the user is accustomed to in order to be in line with the familiarity bias principle.
User Research & Testing
The website architecture was mapped out to identify all the different sections and pages within the website and this also uncovered any gaps in the overall possible user flows and missing accessibility to different pages.We also traced the whole user process of the current client website from homepage to checkout on a glass board, and attached sticky notes with comments and important observations. This gave us a clear idea of the challenge that we were facing and highlighted the pain points of the consumer journey on the website.
We conducted competitor research referring to both direct and indirect competitors. Based on the client’s and the competitors’ target audience, we extracted 3 different personas:
The Clueless one
- Male, 30-40 years
- Buys for his partner-Familiar with MVintage because his partner has already purchased products and follows the brand. She would also have hinted for an MVintage gift.
- He knows his partner likes MVintage but has no idea what products she likes.
- He is anxious about choosing a product she might not like.
- He may do some research on the brand online, visit the website or ask female colleagues.
- He visits the shop and would need assistance on what to buy his partner.
The Returning Customer
- Female, 30-40 year old
- Buys for herself but also for others. Not very price sensitive
- Familiar with the brand and knows the products well; she buys regularly and therefore sees herself as a loyal customer and needs to be regarded as so.
- Would like to have a product from the latest collection, wants information about it and ideally be one of the first to buy it
- She follows fashion blogs and loves styling with the Mvintage jewellery
- She follows the Mvintage Facebook and Instagram page and is most likely to contact Customer support if she has queries/issues.
The First-Time Buyer
- Female, 20-40 year old
- She might have heard about MVintage from some colleagues, or has seen someone wearing it but has not been following the brand
- She asks about price because she has no idea of how much the jewellery costs
- She might have been following the MVintage Facebook and Instagram page
- She won’t buy immediately, takes time to check things out and would need assistance to become familiar with the whole product range
Overall Website Testing
Following the above we carried out user testing on the then-current website with a sample of users that corresponded to our personas. The users were given an hypothetical budget and were asked to buy something from the website. The following interesting insights were extracted:
A. Inspiration is a big deal
There are two points in the customer journey where users look for inspiration.Once during the awareness stage seeking models, imagery, even one user moved onto Instagram to see the look.-The other stage is during the action phase when deciding what the user is looking for; which necklaces are best to “upgrade” and “complete the look” was still keen to decision making even at the end of the user’s shopping journey.
B. The paradox of choice and notion of upsell vs layering
When choosing something to buy in this case, less is certainly more. There were observations made which shows scrolling was laborious and filtering was complex.-We observed the paradox of choice, if there was no inspiration and no online help and if users hadn’t landed on the website from marketing campaigns of the collection, they weren’t sure where to start; a necklace? Earrings? Then what… In this case, less choice but specific filtering, is more.
C. Searching got stressful
Time to search is key here. Users expected standard sorting; typically by price, popularity and product type were commonly enjoyed. Gradually automated filters when starting to enter a search mode were expected, and not found. The items were also not categorised correctly: follow-up/complementary product suggestions to had nothing to do with the product being viewed by the user, and when entering search queries the results did not correspond to the keywords.
D. Gifting can be even more stressful
Gifting seems to show more pressure of finding the “perfect” gift. Without inspiration of knowing the brand unlike the return customer, most look for guidance from the very beginning. With the gift guide and blogs, personalised content was expected. Again price filtering here was important, but missing.-Upon deeper investigation Gifts ‘for mum’ ‘for your love’ ‘for a friend’ etc resulted into the same items being suggested, losing the authenticity of gift advice.
E. Compare, contrast and share to help me decide
Opening desktop tabs, bookmarking and saving to bag to compare look/s was a massive behavioural insight seen across most users. During this action phase even screenshots of the item were taken all to send onto friends and family to help with their decision making. Users were looking for sharing buttons and options to share with their loved ones
F. The sales funnel bounce during conversion
Along the online shopping journey, each user left the website at some point; for inspiration go onto the Instagram account or to browse the open tabs on the desktop to help compare and contrast the looks they want to purchase. Users also commented that it would be great to view the chosen items as a whole look, further strengthening the layering selling concept. Customers are creating multiple purchase journeys and don’t follow a predetermined route because most aren’t ready to buy yet. How we support them to go and come back is key across the experience, through filtering products, and being able to add and take away when comparing in a saved for later feature and following up with personalised, automated email marketing referring to their abandoned cart, saved items or a product they might like based on their search history on the website.
G. Assumptions are made based on what they experience elsewhere
Cognitive biases around the experience have taken place before the user starts searching for any products. Experiences using other websites such as ASOS have created mental models of how an e-commerce website should work: users were looking for “complete the look” filter, online chat support and saved favourites. The messaging on certain parts of the website did not deliver on the promise of great experience: ex. complete the look option after adding a product to bag was a point of no return action leading the user to the item she clicked on, instead of all the items that would complete the look.
Homepage: Research and User Testing
According to the Google Analytics report, the homepage was not providing much value to the website: users were spending an average of 6 seconds and most of the clicks were happening on the main menu. First we started off by gathering screenshots of the homepages of many direct and indirect competitors to identify a pattern of mostly adopted practices and consulted influential websites such as NNG to compare and contrast with researched, best practices and based the wireframe of the new homepage on the data gathered from these sources. Then the different scenarios that were extracted from the in-store CX were mapped to the different sections within the new homepage wireframe to show how it was catering to the different types of potential customers. Some scenario examples:
- I am new. I am looking for a gift.
Scenario: Salesperson shows how it works, asks for occasion/person/ budget. Shows relevant items. Client might ask info about product. - I’m new. I want something for me.
Scenario: Salesperson shows how it works, new collection/bestselling, then rest of items. Client might ask info about product. - I know MVintage. I’m just looking around.
Scenario: Client asks for/ goes to check out new collection / current bestsellers / instagram looks /suggested sets / offers. Might not buy anything.
The next step we took was testing the top 2 competitors’ and MVintage’s homepage: I gathered a sample of 5 users aged between 25-45 and moderated the test; the questions regarded the features available, product offers, messaging and brand aesthetic Some of the results were quite interesting and clashed with both the mostly adopted practices by many websites and the ‘tried and tested’ best practices stated by thought leaders in the field, while others confirmed our research findings. Furthermore, as you will see from the below observations, many users displayed the psychological principles that us UX designers have read a lot about:
- Users clicked on the closest CTA
- Second CTA was driven by the appearance of a sale or a discount
- The hero banner drove the first impression of the users about the brand (USP) and also was the item they remembered most.
- Sections without CTAs were overlooked
- Users related a lot with the models on the page–the images defined the targeted age group and also gave an idea of how the item would look when worn.
- When presented with an item connected to something they are familiar with (like theDisney items of Pandora), the users remembered it with ease.
- The design approach taken by Monica Vinader, including the style of the photos and the colour scheme, made it look more expensive and of higher quality.
- The majority of the users related colour to an age group.
- The users forgot the majority of the range of items in all three cases.
- Most clicks took place on sections which benefited the client
- Discount banners and discount offers/items on main menu were highly remembered and liked.
- Majority of users remembered the Instagram section
Proposed Website User Flow
The section screenshot of the user flow below solved all of the issues that the client was facing with the current website. The overall user flow did not vary greatly, however the there was a great need for information architecture to make the content more accessible and intuitive, and simplification of the journey.
Proposed Homepage Wireframe and Experience
Hero Banner should be used to push USP according to occasion, or what isbest perceived to benefit the user, without it being dynamic
More breathing space required between elements on the homepage; more whitespace, clearer wording if on imagery
They had no idea what kind of message MVintage wants to get through to the user – we need to push this message forward and make it more visible.
Visual representation of the items on the menu needs to be kept there as it was noticed and utilized, but not overtaking the whole page.
Overall users liked the layout and length of the MVintage page, however missed viewing certain details that were apparent on the other homepages.
The below pictures show one of the workshops while working on the structure of the homepage and making certain design decisions such as font pairing.
Final UI – Website Design
The main pain points the users were facing were due to a disorganised layout, and a complicated flow. The final UI is modern, streamlined, and most of all intuitive. The screenshots of the website below of desktop and mobile
Homepage
Main Menu
The main menu was taken apart and re-structured so that the categories made more sense to the user. For example, previously the Sale option was separate, however now it was embedded per item.
Gift Helper
The idea for the Gift Helper was inspired by Pandora website, and it is based on the questions that the salesperson asks the customer when they are looking for a gift in-store.
User Account
The Account pages were completely reinvented and revamped, with the very useful and interesting function to add Significant Dates – such as the a mother’s birthday – and the user would get reminders via email that that person’s birthday is coming up, and upsell a gift.
Wishlist
The below images show the Wishlist page, including some of the notifications and the option to Share, which the customers used a lot on the old website.
Product List Page and Product Detail Page
Two of the main issues with the old website were the lack of sorting and filtering. The new design changed all that, as we can see in the slideshow below.
Collections page and Stone page
The client wanted to create a separate page for specific collections – the new design, with the full screen hero banner and the flexible, fluid layout provided the ideal design option for such pages.
Shopping Bag and Checkout
Due to the serious issues with the inventory, the client decided to sign up with Shopify and adopt their Shopping Cart and Checkout user flow, which has been tried and tested by multiple merchants worldwide. Hence, the design was stopped there as the editing options available were fonts and colour.
Join Our Team page and Vacancy page
FAQ page and Support tool
Contact Us page
Blog page
Jewellery Builder
The Jewellery builder was something that the client had been looking at for quite a while, since one of the main selling points of MVintage was layering and bringing pieces of jewellery together.
The below prototypes are showing the main layering product: twist pendants. Those pendants were built by taking a base and adding a pendant element, with the option to add a back and also engrave it. It was the most flexible product on offer, therefore the biggest challenge to integrate in a jewellery builder. The below show the designed solution me and my team came up with.
Engraving Tool
The redesigned Engraver tool addressed all the issues that the previous tool was presenting: the user experience was rethought and designed with a mobile-first approach. The interaction patterns were based on mobile-based applications like Facebook (Stories function) and Instagram. Creating interfaces and flow based on these mental models made sure that the users would encounter the lowest learning curve when getting used to the tool.
Results and Future Work
As mentioned in the Targets and KPIs section, the client’s aims were to optimise the website experience in order to achieve a frictionless transition between in-store CX and website UX, leading with a mobile-first approach to directly influence positively the experience of 90% of their users. The results of the above work were as follows:
- Cart Abandonment rate was reduced down to less than 8%;
- Checkout Abandonment rate was reduced to less than 3%;
- Customer retention was increased three-fold on the new website
Extra points:
- Engraver was much easier to use, and outputs now matched client’s machine
- The solid, tried and tested Shopify e-commerce framework organised their inventory and gifts/add-on suggestions were now relevant to the customer’s choices
- We designed new email marketing as per below which was in line with the tone of the brand
Roberta Scerri 