Mockup boldr website for portfolio

Boldr Supply Co | Webshop

UI/UX enhancements and IA optimizations of the current webshop

What is it about?

Webshop Enhancements

Boldr is a micro brand of watches born and based in Singapore. Their business and sales are mostly based online which means that their webshop is pivotal to the growth of the company. Although the current webshop www.boldrsupply.co looks professional and neat, there are issues that can and should be determined and analyzed. Despite the solidity of the webshop, it still presents some User Interface and User Experience (UI/UX) issues.

What is the goal?

UI/UX Improvements and IA optimizations

The goal is to solve the current issues and implement new optimizations that will bolster the experience on the webshop. The enhancements are related to the User Interface, User Experience and Information Architecture.
Therefore, the main goal of the project is to improve the UX/UI of Bolder’s webshop by achieving consistency through the website, enhancing its architecture, and conducting research that can be converted into results.

What about the process?

simple breakdown

User Persona Boldr-min

Analysis

The first phase of the project was based on the analysis of the watch industry and walking in the user’s shoes. This was accomplished by:

  • Desk Research: analysis of the watch industry.
  • User Research: identification and segmentation of the current Boldr’s users.
  • User Persona: creation of a user persona whose goals and characteristics represent the needs of Boldr’s audience.
  • Benchmarking: evaluation of Boldr’s competitor’s websites.
  • Hybrid testing: it provides the point of view of watch enthusiasts and online shoppers on the current website
  • Empathy mapping: it shows the feelings, thoughts, and actions of the users from the hybrid tests but also from fictional buyers.
  • Swot analysis: Used as a UI/UX tool to understand what users would like to see on Boldr’s website.
Affinity Diagram Boldr after

Affinity Diagrams

During this stage, over 100 answers from last year’s survey are analyzed.
Some of the affirmations, buzzwords, and keywords are then shifted onto
the virtual sticky notes.
The sticky notes are randomly placed on the table and gradually split into clusters. These clusters facilitate the grouping of the information on the
website and are all written using the point of view of the customer.
This method, together with the previous stage, will ease and smoothen
the Information Architecture.

Prototyping homepage boldr grid

Prototyping

The prototyping stage goes through three iterations, starting from simple and rough sketches up to high-fidelity and interactive prototypes.
It follows the inputs gathered from the users and from the solid amount of research conducted so far.
The prototypes are designed in InVision.

Visual Presentation Boldr report

Visual Presentation

This stage covers the following aspects:

  • Color Palette: composition of the color palette and psychology of colors
  • Call-to-actions: styling of the primary and secondary CTAs
  • Baseline Grid: 8pt baseline grid to maintain proportions and hierarchy all over the website.
Buy function screenshot

Coding

The website is coded using the following languages and libraries: HTML, CSS, JavaScript, and jQuery. The CSS has three breakpoints set with the following “media queries”: 768px, 1024px, over 1024px. Through the usage of the CSS “grid layout” combined with responsive properties and values, the responsive procedure is more agile and fluid. It is crucial to keep in mind that the product is not and was not supposed to be connected with a backend.

Google optimize screenshot

A/B Testing

Keeping in mind that the goal of A/B testing needs to be something that
can be measured, the test focuses on the conversions generated by the
two design versions: the current webshop and the newly designed one.
In the end, the new version of the Boldr website is the one that has
generated more conversions and more interactions with the system.

Who participated in this project?

The project is part of the work I have done during my internship at Voilaah, a digital agency based in Singapore.