Mobi Click. A german B2B manufacturer of emergency signal technology.
Emergency devices focusing on the protection of so called lone workers, an employee who performs an activity that is carried out in isolation from other workers without close or direct supervision.
New website
1 month
UX generalist who covers the entire process
User Research, Data Analysis, User Experience &
User Interface
Since its foundation, Mobi Click had received very few homepage alterations. Accordingly, it became very outdated and not user-focused.
Time was pressing for a radical new homepage redesign that enhanced user engagement and tailoring the content to the individual safety officer needs.
Mobi Click is a manufacturer for mobile safety and monitoring technologies. The company offers solutions for various application areas. From the most advanced mobile emergency devices for lone worker, through mobile alarm systems, to car alarm systems, Mobi Click defines new safety standards.
Mobi Click is best known as one of the largest provider of lone worker solutions offering the broadest range of discreet, wearable, satellite, intrinsically safe and rugged devices in Germany.
The homepage was not reflecting Mobi-Click's expertise. The homepage was lacking context, pertinence, and usefulness. It had no added value to address the target group's pain and needs. It amplified confusion rather than coherency.
GOAL
Enhance the functionalities and provide a more efficient and useful homepage to guide the student learning experience.
Rethinking from scratch the homepage. Having in focus the customer's needs, to optimize their user journey. I came up with a new, fresh, and forefront homepage that enhances understanding the requirements to equip lone workers with emergency devices.
In almost 20 years of digital existence, Mobi-Click has no more than 2 major homepage changes (images below).
The goals:
Management / UX Writer: I was responsible for determining the overall design direction including copywriting.
User Research: With a homepage so outdated, user research had to be conducted to gain insights on what would be users' on-demand needs.
UX Designer: I analyzed user's insights either qualitative and quantitative and made design decisions base on collected data and insights.
How can we guide the user throughout a better and more efficient user journey in an informative, persistent and engaging experience?
Design process
When you have a myriad of business requirements and constraints, a systematic approach is paramount. Design thinking with a proper kick-off allowed me to define the proper business vision. This was followed by the discovery and delivery phases. This case study highlights key learnings.
Discovery phase
Aimed to understand and frame the homepage problem, collect requirements, and analyzing the context of use.
Deliverables: stakeholders interviews, user interviews, affinity diagrams, diagnostic mapping.
Delivery phase
Was the solution stage that made ideas tangible, usable, and hopefully, beautiful.
Deliverables: wireframes & hi-fi prototype, design system deliverables.
I like to base my design process on Revamped Double Diamond.
01 Discover. Gain knowledge of users, context, and business KPIs. Gather user data, surveys, research competitive products, conduct stakeholder interviews.
02 Define. Build user profiles on gathered data, produce materials that will aid the outlining of the project, site maps, content inventories, screen flows, navigation models, task flows, user journeys, scenarios.
03 Design. Evaluate, test, and select wireframe concepts for prototype development.
04 Develop. Create design specifications and evolve concept/wireframes into a full design solution.
05 Deliver. Evaluate design with stakeholders to obtain feedback, conduct usability testing, and surveys. Complete design and produce deliverables.
01 Discover
Gain knowledge of users, context, and business KPIs. Gather user data, surveys, research competitive products, conduct stakeholder interviews.
1. Stakeholders Interviews
I started the process by conducting stakeholder interviews to collect insights and qualitative data about homepage business orientation. This was a simple way to understand stakeholder's wishes, knowledge, and expectations.
The interviews were based on Kim Goodwin's list of role-based questions.
Next, I built some affinity diagramming and diagnostic mapping to help the team identify the root problems and pain points for the user.
The purpose was to help to evaluate how the lack of communication between the system and the users were harming the business KPIs.
Note: These tools are low-cost and effective ways of making sense of the current situation and generating design ideas and establishing business goals.
1.1 Affinity Diagramming
The exercise helped us group data into categories based on natural relationships. We grouped all the insights into two main categories:
internal: business needs, requirements, goals
external: context, competitors, best practices;
Important Note: For privacy and competitor reasons (NDA), I am not allowed to share this dashboard real content.
1.2 Diagnostic Mapping
From the affinity diagram, we identified several problems.
We were able to group them into four categories:
Poor navigation
Lack of useful information
Mobile unfriendly
Lack of utility
I used diagnostic mapping to analyse these problems. This was an abductive process of suggesting explanations for those problems, as well as, fetching possible solutions to them.
Important Note: Diagnostic map was developed on Miro, taking the issues bubbled up from the affinity diagram. In the diagnostic map, we try to explain the causes, consequences, and ideas for solutions.
From these diagnostic maps, we have found that many of these problems were interrelated.
For example, poor onboarding will lead to difficulties in understanding the content and thus lead to a lack of features utility and insightful system feedback. This diagnostic mapping process helped me to find the point of intervention.
I have also explored ideas from other applications that exist in the market. Especially applications with great user retention with great user engagement. This was a good exploitation exercise to gather ideas that we could further investigate, and remix or tweak, to make them work with our current assumptions.
1. User Experience Questionnaire (UEQ)
To evaluate the current user experience, I decided to use UEQ as a method of measurement. This was a fast and reliable tool to measure the UX of the Mobi-Click website.
This strategy had two purposes:
1. Collected meaningful data to look for new insights
2. Have data to measure the design success of the new homepage in the future.
Method
The scales of the questionnaire cover a comprehensive impression of user experience. Both classical usability aspects (efficiency, perspicuity, dependability) and user experience aspects (originality, stimulation) are measured.
Sample
The questionnaire was run on a sample of 8 user.
2. User Interviews
To understand the customers' habits I have conducted interviews with HSE managers to gain insights into their goals/motivations and challenges in finding the right solution for their company.
Method
I have adopted the contextual inquiry as to our data collection method. In these contextual inquiries, I used a series of semi-structured interviews and think-aloud tasks to collect information about the context of their usage with the website.
In these interviews, I have covered questions and asked the interviewees about their purchasing habits, how their decision making process look like, what is important for them etc.
I also took the opportunity to build an Identity Model for the participants. My model was built on the Identity Model provided by Holtzblatt & Beyer (2017, p.32), which showed the three main sections "I am", "I plan", and "I like".
Based on that, I have also added an "I struggle" section because I want to understand the pain points of the current homepage, and changed "I plan" to "I do" in order to better understand how they interact with the current homepage.
02 Define
Build user personas based on the Identity Model data. Define the user flow for the new homepage, as well as navigation models, screen flows, task flows, user journeys, and scenarios.
To provide users with an enjoyable experience on the homepage it's important to anticipate their needs to provide relevant information to their learning process.
I developed potential features using a ‘Mental Model’ technique and mapped out their possible value using a Feature Prioritisation, including:
1. High vs Low impact
2. Expected vs Unexpected
Important Note: For privacy and competitor reasons (NDA), I am not allowed to share this content.
03 Design
Evaluate, Test, and select wireframe concepts for prototype development
Once all of the planning and foundations were established, I was in the position of moving forward to start sketching my own ideas and concept sketches for the new homepage experience.
To understand the old site and its content, I ran a content audit listing all available information and features. Based on this, we collectively decided what to keep, what to kick and how content can be integrated into a more intuitive information architecture. Different user types and their journeys informed the homepage structure.
The main point: the homepage needs to convey to the customers. Information needs to be structured logically to allow users to scan the solution space and its proficiency quickly.
Content always comes first, once we know what the homepage needs to achieve we could then focus on elements and graphical composition.
04 Develop
I created the design specifications and evolve concept/mockups into a full design solution to forward be tested with a sample of users.
Once logic and functionality were defined, the visual design process followed the brand's visual guidelines and tone of voice.
Refine
I evaluate the design with stakeholders to obtain the final feedback. Then, we conducted a usability test and A/B Test, complemented with a survey.
05 Deliver / Monitoring
Complete design and produce deliverables. Monitor Web/UX metrics.
During this stage, I took care of structured design guidelines to support the what and why of my design decisions. This procedure helps to justify design decisions to the team and deal with alternative opinions within them.
Retention rate / Time on page
As the name suggests, this Google Analytics tool tells us how long people stay on our website and its individual pages. You can gain great insights from this, such as how much time visitors take to act. It’s an insightful tool for informational websites in particular. But, it’s also good data to track against funnels in behavior flows. This way, you can literally see how long your visitors take on each step of your funnel.
On sites with a lot of long-form content or large forms like surveys, visitors staying for a long time is a good thing. It implies that people are engaging with what’s on the page. Contrast time-on-page against bounce rates to see how quickly people realize that the site is not for them or how immediately they are enticed to explore more of the site.
The new design increased the retention by 40%.
Bounce Rates
Bounce rates specifically refer to the percentage of people who entered your site and left without clicking through somewhere else. High and low bounce rates can mean many different things. For example, a high bounce rate on a landing page could indicate a broken opt-in or a poorly targeted offer. If your opt-in form isn’t working, no wonder the bounce rate is high, and that’s an easier fix than redoing your whole landing page. Overall, bounce rates are a great indicator of a landing page’s performance, especially for PPC campaigns.
Many things can impact bounce rates, which is why it’s so important to investigate any data you find from Google Analytics. For example, it could indicate that your CTAs aren’t clear, or maybe the information is insufficient to convince the visitor to convert. Perhaps you’re offering them something that they don’t want or need as your email opt-in. When you notice these issues, it’s a sign of an excellent opportunity for you to AB test the page’s design or content.
The new design reduced bounce rates by 30%.
