Introduction
As we already identified what our main goals were, we took a goal-directed design approach. This was beneficial as it made the entire process less time-consuming. On top of this, the then Black Card MVP was tested and assessed to identify pain points and opportunities for improvement.
During the discovery phase, I had to learn about people’s behaviour to create a user experience that would convert casual users into loyal members as they use our websites or receive our emails. At this stage, I utilised a range of qualitative & quantitative research methods. Stakeholder interviews and focus groups were held, and the current customer journeys were assessed. I collected behaviour data using the email marketing tool, Klaviyo and the web analytics tool, Hotjar. I engaged in analysing user behaviours with traffic data, heat mapping, recordings and surveys.
Qualitative Research
Stakeholder Interviews:
Interviews & meetings were held with internal stakeholders. This included the CEO, department heads, and members of the content, partnerships, marketing and sales team. Black Card impacts 70%+ of BOXRAW departments, so it’s imperative that departments were questioned to understand business goals and potential restrictions, i.e., things that can/cannot be included on the website. Interviews were semi-structured & consisted of mostly open-end questions.
Questions consisted of:
- What did stakeholders need to fulfil their Black Card related targets?
- What does success look like to us?
- Are there any examples of what you’ve seen that we can utilise?
- What are your department’s 1, 2 and 5 year goals?
- What currently works with our current product and what doesn’t?
The interviews confirmed assumptions & opened our eyes to new ones. It also highlighted what work that has already been done, for instance aside from the Black Card portal MVP, we already had a Shopify rewards bot called Smile. Because of this, time and technical limitations, the new design would need to keep this integration.
Focus Groups:
Participants were selected to reflect our target audience & current demographics, being 60% male, 40% female and between the ages of 18 to 35. Selected volunteers specifically had interests in boxing or other sports, as well as in engagement with other membership programs, i.e., the Nike Membership.
Open-ended questions were asked to several groups of 5 to 10 participants with a moderator and a script for guidance. We discussed their boxing (or adjacent) experiences, how they shop online and what makes them come back to a website. We also asked them to describe their current experiences with BOXRAW if they had any, and also showed them the Black Card portal MVP.
Data Analytics & Observations
Quantitative data & metrics provide real-world values for understanding the current performance of Black Card within its portal and other integrations across the website. Data from Hotjar and Google Analytics were examined to understand visitor behaviour.
Data Analytics:
85% of usage is on mobile and compared to the other pages on the website, the majority of Black Card traffic came from email and was not organic.
Also, our Smile.io widget provides analytics & performance data. We discovered that majority of existing Black Card owners were Bronze members (our lowest tier, a lifetime spend of £0 - £99). Less than 40% were Silver members, less than 10% were Gold members and only 2 users were Platinum members. This implies we had barely any active/loyal Black Card members, implying people weren't engaging in the membership as much as desired.
Heat Maps:
2+ months’ worth of heat mapping data was examined from over 1,000 visitors to provide a trustworthy verdict. Most clicks & drop-off points were when users went to the homepage, the Men’s collection page, the Basket or their user Profile. Also, when examining Scroll View heatmaps, 90% of users dropped off even before scrolling.
Buttons within the portal were only selected 12% to 25% of the time, and users had unusual behaviours like clicking random places on the header at a similar rate. This opened many questions like:
- Why do people click on unusual parts of the screen?
- Is the design confusing and/or suggests interactions that don't exist?
- Is the copy unclear/confusing?
- Why aren’t users scrolling?
Session Recordings & Observation:
I observed hundreds of real-world user interactions on the Black Card portal using Hotjar. Clicks, taps and scrolling behaviour on mobile & desktop were examined through session recordings. I examined what the user focuses on, and where they got confused or frustrated. The main pain point was that I needed to understand why the majority of people do not stay on the Black Card portal.
Results showed that a staggering majority of visitors landed on the Black Card portal and lasted less than 3 seconds, did not scroll and either went to the homepage, the Men’s collection or dropped off completely.
Links we deemed as important weren’t selected, visitors rarely interacted with the Smile.io widget and there was a lot of unusual mouse activity. In some recordings, users searched for product queries in the search bar, implying they couldn't find the information they wanted on the portal.
Insights & Next Steps
User research revealed areas for improvement and new ideas. As the MVP only kept the minimum business goals, this redesign now has to consider that and the user’s experience and research insights.
Data insights such as 85% of traffic coming from mobile set a new focus to primarily cater designs towards mobile. Many weaknesses had been identified, e.g., users not knowing areas weren't clickable. Also, verbal and physical responses from focus groups & interviews were assessed, and feedback assisted with confirming assumptions and providing potential ideas.
Discovering barriers and interpreting behaviours led to new design ideas to consider. More questions and conclusions were posed, for example:
- It seems like there's no real introduction to Black Card, do users leave because of the copy?
- The majority of traffic comes from email, does it suggest most visitors are already signed up to BOXRAW, even if they're just email sign-ups?
- Are we not getting enough organic traffic, and why is that?
Introduction
Analysing current user behaviours on the current Black Card MVP allowed us to better understand the limitations and opportunities for new ideas & improvements. From research like heat mapping & session recordings, a common pattern was that Black Card visitors barely interacted with the current Black Card portal MVP & frequently left to visit their profile. Observations like this allowed for more specific ideas to be explored in this next phase.
Personas
Personas were split into three tiers, Tier 1, Tier 2 & Tier 3. Each persona consists of the types of behavior, demographic, motivations and purchases they’d exhibit. These personas and their scenarios informed the design process and business processes. One from each tier is listed below, but the rest of the personas can be found here.
Tier 1: The smallest group but have the strongest loyalty to BOXRAW. Tend to be amaetuer boxers.
Tier 2: These individuals have a big interest in boxing, and may participate casually for fitness or entertainment.
Tier 3: A broad group consisting of people interesting in the boxing lifestyle, and may watch the sport but do not necessarily participate.
User Journey Maps
I created a journey map to illustrate the experience of someone interacting with Black Card and becoming a member. From the research gathered, it's evident that the majority of users aren't aware of the Black Card membership. Because of this, the chart depicts any frustrations or questions the user/customer may have on discovery and then with interaction.
As the chart was informed by user research, it helped us move forward with evaluating the information in front of us to discover more pain points and actions that must be taken to answer any questions and solve problems.
.jpg)
Idea Selection
After further research, ideas were narrowed down to 3 core concepts being:
- A Black Card landing page for visitors that doesn't change when the user is signed in (to avoid confusion
- A profile page redesign (doubles as the Black Card portal)
- Black Card promotions are needed across the whole website, especially the collection pages, product pages, cart and checkout.
Online Research
During this time, I read multiple articles & blogs about how to build a sense of community with customers and develop strong loyalty programs. There is a lot of research online on this topic, so I brainstormed & sketched out any relevant design concepts. I also fed back ideas gathered from research to my product manager and CEO for their thoughts.
Competitors & Comparative Analysis
Now that the core ideas were selected, I researched dozens of competitors and landed on 4 with the most in common with our business goals, being the Nike Membership, Adidas Creator’s Club, Beauty Bay’s Tribe and the H&M Membership. This was done to examine their solutions for creating loyalty with their customers.
Their loyalty program promotion within landing pages, integration within product pages, user profiles/portals and baskets was also thoroughly tested and analysed. I made design notes and comparisons and also investigated how they use their copy & infographics to keep customers informed and engaged.
.png)
Summary
Observing real users’ journeys has allowed me to come up with ideas for better user flows, wireframes, email templates and more. Ideas & insights were shared with the CEO and decisions next steps were set with bi-weekly meetings to track progress and to ensure new milestones were met.
Sketchstorming
Brainstorming, or in this case, “sketchstorming” allows me to visualise ideas curated along the way during the design process to determine feasibility before making any digital wireframes or prototypes. It saved time & money as it allows for loads of ideas to be explored all at once, and can be shared with my co-workers in real-time.
Sketching out ideas helped with deciding how components could work together. As shown below:
- A banner to promote Black Card on the homepage
- A badge for logged in users, showing their tier by the colour of the logo.
- Landing page break down
- Collection page items having a Black Card icon for exclusive items.
User Flow
After assessing the pain points with the Black Card MVP, as drop-off rates were so high and interaction was so low, I deduced that users didn’t feel like they could interact with the page and if they did, the scroll was incredibly long, especially on mobile (see here) - on this view, the page was too long and had to be cut down.
Original User Flow:
Scroll Length
One big issue is that on the portal, four actions were provided at once, meaning that a lot of content was on the page all at once, making the scroll very long. Also, the previous designer put too many elements at once on the page, also increasing the scroll length.
Complicated & Unclear Journey
Another issue is that it was assumed users would select the Smile.io widget to engage with Black Card actions like getting a discount or redeeming points. If the user wasn't signed in, they’d need to log in, get directed to their user profile and then return to the Black Card portal.
The chances of losing a customer are very high with a journey requiring that many steps, it also assumes that a user would know to do this too despite there being no clear CTA or instructions to do so.
At this stage, the goal was to reduce how long the webpage is and shorten the user’s journey. With the original Black Card MVP, there were two variations of the website when a user was logged in (see here) and when they weren't (see here).
Updated User Flow:
I wanted to drive the value quickly and frequently, with the design update, I added multiple CTA buttons at relevant sections, information was displayed in more efficient ways, the scroll was reduced by over 65% and the journey was changed completely.
Instead of the user needing to be on the Black Card landing page to redeem rewards and get discounts, all actions would be clearly presented on their profile, with info buttons provided to reduce confusion. The portal page would only serve as a means to explain what Black Card is & how it works to visitors.
As shown below, the overall user flow is now shorter. The next section will cover the prototyping of this design, but you can see the live landing page here.
High Fidelity Prototypes
I used Figma to develop dozens of design iterations of these pages and the final prototypes tackle the issue of visual clutter, long scrolls and design inconsistency. The previous user profiles, which when logged in, only provided black & white “see my orders” and “log out” buttons. These designs provide the basic user profile requirements and also integrate Black Card features.
The high-fidelity prototypes for the Black Card user profiles are provided below and are also featured in the BOXRAW Rebrand case study, so only the features relevant to Black Card have been presented, but the rest can be viewed in a separate case study.
Final (Live) Designs
The design stays true to BOXRAW’s core style, simple, dark and monochromatic. I pushed for more white to be introduced despite our internal stakeholders wanting the entirety of the website to remain black (see my previous iteration as dark mode here), just to improve readability. Even with introducing more white space and lighter shades of grey, the designs are still reflective of the brand.
To develop the final designs, files from Figma were shared with two engineers who were able to reference sizing from the shared prototype. Due to business restrictions, the Figma prototype cannot be provided, but mockups are provided below.
These designs have gone through several user tests and therefore with the final designs, the features that were kept in the final design matched the capabilities of the company at the time. They match the resources and time constraints available when the project needed to go live. Usability testing and observations will be discussed shortly.
Usability Testing
Before commencing usability testing with internal & external stakeholders, the first round of usability testing was conducted with our Product Manager, to ensure he was content with the UI, the interactive elements and the overall flow.
Immediately after, a preview of the landing page was shared with department heads across the Ads, Content and Partnership teams for feedback from a perspective different from my department, Digital. Feedback about the text copy and placement of buttons were debated, and changes were signed off from that. An example of the header style and copy change is shown below:
Changes were based on copy that we wanted to remain consistent across all departments, especially within advertising. Changes were also made to match the current BOXRAW design styles, for example, the “Sign In” button text is always underlined and doesn't exist with an outlined bordered button.
As this was an agile project, conducted during times of COVID restrictions, remote testing happened quite frequently, and the designs underwent constant feedback loops.
Although vanity metrics such as viewer retention and sign-ups could measure progress or success, to test that the design was user-friendly, we needed to see if users were actually interacting with the design in the way intended. Heatmaps and user session recordings were looked at to determine if our hypothesis had been fulfilled. The objective was that the customers were completing tasks like reading FAQs, signing up for Black Card, engaging with new interactive elements and ultimately making purchases as a Black Card member.