A strategic and passionate UX/UI designer with extensive experience in Web Development and Project Management. I’m Rebecca – nice to meet you!

I create creative and feasible solutions, keeping both team, business, and user goals in focus. I love a good fantasy novel, interior design, and eggs on toast.

UX

The problem

Users often don’t initiate ordering process via primary CTA

Conversion rates are always a key focus for improvement. During a user flow analysis of 2.7k desktop users and 3.6k mobile users, I observed that users predominantly initiated the ordering process via our secondary CTA buttons. In contrast, our primary CTA, positioned above the fold, experienced significantly less interaction. Specifically, the click rate for our primary CTA was 27% on mobile and 39% on desktop, while the secondary CTA achieved 34% on mobile and 46% on desktop.

A scroll depth analysis on the same user set revealed that we lose about 50% of our users below the fold, meaning half of our audience never even see the secondary CTA buttons. This finding was supported by Google Analytics, which showed a drop-off rate of 48.6% on desktop and 43% on mobile.

Research

Insight: “The primary call to action doesn’t look like a CTA”

While the drop-off rate wasn't excessively high for a landing page, the fact that the secondary CTAs received more interaction than the primary CTA, despite being placed much further down the page, was intriguing. This discrepancy became more understandable upon closer inspection of the CTAs: the primary CTA wasn't really a CTA at all.

Buttons have been around the internet for a very long time. Users are used to interact with them. Our secondary CTA buttons, labeled "Order" and placed near the Broadband Speeds section, were both attention-grabbing and had a clear information scent. On the other hand, the primary CTA was designed as a search field without a submit button, lacking a clear label and being relatively discreet, which led to it being overlooked.

Primary CTA overlooked

Users tend to interact with secondary CTA rather than primary.

Too many users lost below the fold
50% of users are lost below fold, never seeing secondary CTA.

Secondary CTA better optimized

The secondary CTAs, with buttons and clear labeling, have a lot more interaction despite being below the fold.

Solution

Draw attention to the primary CTA with a submit button.

To address this, I proposed adding a "submit" button to the search field. The primary goal was not to encourage users to click the button, but rather to draw more attention to the search field itself, making it look more like a traditional search field that users are accustomed to.

Results

7% more orders placed, lower drop-offs and increased interaction with the primary CTA.

Just a month after implementing this change, orders increased by an impressive 7%, with no concurrent campaigns or offers. Interaction with the primary CTA rose by 24%, and the drop-off rate decreased by 3%. Year-over-year comparison showed a 24% increase in click rate on desktop and a remarkable 51% increase on mobile.

Note that we see little interaction with the button itself. Rather, its existence seems to enhance the information scent of the input field, which was desired.

Further Development

Utilize Expected Button Behavior

To ensure cost and time efficiency, the button added to the primary CTA is a copy of the secondary CTA buttons, visually grouped with the search field. If the search field is empty, clicking the button triggers a modal with the same search field, which isn't ideal. This setup should be refined, as the need for a submit button has been validated. However, click rate analysis indicate that most users don't use the button; instead, it serves effectively as a visual cue for the primary CTA.

The Problem

Only 3.9% of logged-in users visit the "Erbjudanden" (Offers) page.

During a customer portal audit, it was discovered that only 3.9% of logged-in users visit the "Erbjudanden" (Offers) page. Given that rewarding loyal customers is a core value of our company, this low engagement with the Offers page was a significant concern.

Understanding the User

Insight: “Users don’t see their personalized offers.”

In a brainstorming session, several potential issues were identified:

Misleading menu label
Unclear that offers are available or who they are for.

Too many menu options
The Offers item gets overlooked.

Link placement
The link to Offers is below the fold on small screens.

Insufficient marketing
Not all users are reached via marketing emails.

Research

Misleading Menu Label

To assess the menu label's effectiveness, I analyzed Google Trends and found "Erbjudanden" (Offers) is the most commonly searched term compared to its synonyms. Thus, the term itself isn't the issue.

Reviewing competitor portals, I noticed a trend of using "Mina erbjudanden" (My offers). Using a possessive pronoun could reduce cognitive load and make it clear that the content is user-specific.

Too Many Menu Options

A mouse tracking study of 760 users showed minimal interaction with the Offers menu item, confirming the low page visit numbers. Enhancing the menu label's visibility by adding some kind of indicator could address this and also inform users if new offers are available at a glance.

Link Placement on Small Screens

A screen size analysis of approximately 5,000 users showed an average mobile screen fold at around 550px. With 86% of our users accessing the portal via mobile, placing important information above this fold is crucial.

Insufficient Marketing

Only 48% of visitors to the Offers page were referred by marketing emails, and with an email open rate of just 4.9%, many users never see these offers. This underscores the need to highlight offers more prominently within the customer portal.

Solution

Revised Menu Label, a Text Indicator, and a Dashboard Widget.

To address these issues, I implemented the following changes:

  1. Revised Menu Label: Added a possessive pronoun to the label ("Mina erbjudanden") to clarify that the content is personalized.
  2. Text Indicator: Included a text indicator with the menu label to show the number of available offers and highlight new additions.
  3. Dashboard Widget: Added a widget on the customer dashboard, visible above the 550px fold on mobile screens, directing users to the Offers page.

Results

A 21% increase in page traffic and an engagement boost.

A month after these changes, organic traffic to the Offers page increased from 3.9% to 33% of total logged-in users. Year-over-year comparison showed a 21% increase in traffic.

Interaction analysis with 3.8k desktop users and 5.3k mobile users showed increased engagement with both the navigation item and the dashboard widget.

Further Development

Badge notification

We considered using a badge notification to signal new offers but decided against it due to technical limitations and potential user stress from persistent notifications. This feature could be revisited in the future to further boost traffic to the Offers page.

Widgetized view

While it might be beneficial to display the offers directly or in a truncated form on the dashboard, it's essential to consider user priorities. Most users primarily visit the customer portal for invoices and services. Adding offers alone to the dashboard could distract them from their main tasks.

A potential solution is to redesign the dashboard into a more widgetized format, where invoices, services, and offers are presented side-by-side. This approach could enhance scannability and better highlight the offers without compromising the user's primary goals.

UI + Dev

The Problem

Wine Apps are kind of boring and pushy.

As somewhat of a wine enthusiast, I've spent recent years exploring various wine discovery and collection apps. However, I found many of these apps to be visually unappealing and overly focused on pushing sales. To address this, and improve my React skills, I decided to create and develop my own wine discovery application. Just for fun!

Understanding the User

What do wine lovers really need?

I conducted six user interviews with friends and family, including both wine novices and long time enthusiasts, leading to the creation of two user personas. The key pain points and needs identified from these interviews were:

The need to remember which wines you've tried before

Both novices and enthusiasts mentioned the desire to save tried wines.

Finding wines that appeal to both you and your friends

Wine enthusiasts especially mentioned friends wine tastes when asked about what wines they usually looked for.

Seeking inspiration from others

Both novices and enthusiasts expressed the wish to be inspired.

Difficulty in discovering new wines

Especially in small cities where options are limited (in Sweden, online alcohol sales are very regulated).

These insights closely aligned with the issues I had personally encountered. Additionally, the challenge of exploring new wines in smaller cities, where the selection is often limited, was an interesting additional insight.

User Flow

An otherworldly onboarding experience.

With these insights, I began designing the core features of the application. My goal was to create an onboarding experience that was engaging and immediately populated the user’s feed with inspiring wines. This led to the concept of a zodiac-themed quiz as the onboarding process, which became the foundation for what I’m calling “Winespace.”

Solution

A fresh look inspired by the cosmos.

I then developed a visual identity that emphasizes a modern, trendy aesthetic, distinguishing Winespace from existing competitors. The color palette features soft pastels in blue and pink, paired with vibrant violet and yellow, inspired by colorized images from the Hubble telescope. For typography, I chose a primary font with retro vibes that contrasts nicely with the color scheme, reinforcing the app's uniqueness.

Results

Here’s the final product!

Experience + Achievements

Senior UX Designer

Bredband2 2022 - current

UX Designer, Web Developer, Manager

Hamrén Webbyrå 2015 - 2022

Publishing Prize, Second Place

For Samhall AB 2023

Interaction Design

Berghs School of Communication 2018

Bachelor’s Degree in Graphic Design & Communication

Linköpings University 2012-2015

Get in touch!

hej@rebeccalofgren.se