2020-2023
DIGITAL MARKETPLACE FOR AN ENERGY AND INFRASTRUCTURE SERVICE PROVIDER
INITIAL SITUATION
As a full-service provider of electricity, light, water, heat, internet, television and telephone, our client is known for their excellent service and competitive prices. With up to 500 enquiries per day, our client sells products exclusively through customer service by phone and email. All availability checks are done manually, which takes many days and delays the purchasing process.
PROJECT PROCESS
To identify customer needs, existing materials such as personas, user journeys and the current user guidance of the website were reviewed by means of a UX analysis. The identified pain points were mapped into a customer journey and a service blueprint, which combines customer needs and basic technical requirements, with all services involved (frontend, backend, back offices). Key features for all services were defined in epics in an MVP and initially considered in concept and design in addition to being prioritised in a roadmap.
Already in the first conception phases, wireframes were validated in an iterative process using interactive prototypes in Figma, by means of qualitative interviews with real customers, and new requirements were defined. In addition, a design sprint for the requirements definition of new topics was developed together with stakeholders.
Based on the developed MVPs, the first design elements were drafted, which flowed iteratively into a design library through a project extension.
Research
Qualitative interviews were conducted early in the design phase as an opportunity to define requirements from the user's perspective. The interviews were conducted remotely via teams on interactive prototypes in Figma (wireframes) with real customers. In later project phases, high-fidelity prototypes (final design) were also included in user tests to check look and feel and final flows. Quantitative survey on desired payment methods in the check out process. A quantitative survey on user satisfaction is planned and is currently being developed. In addition, we use detailed web tracking to analyse user behaviour on the website.
Key learnings from the interviews were that a regular exchange with customers on early concepts and approaches provides a groundbreaking basis that can support stakeholder decision-making in the project.
Delivery
User-centric processes, product presentation and interactions were defined by conducting qualitative interviews.
Reduced product availability feedback from days to seconds through real-time availability checking.
Reduce operational overhead and increase compliance through automated setup and configuration of the cloud environment.
Ensuring flexibility, scalability by developing an accessible design system.
On the basis of commercetools, a user-centred online sales portal for various products is being created, which is accessible to all customers at all times under aspects such as the mobile-first approach and barrier-free development according to WCAG guidelines. The platform enables (new) customers to purchase contracts online from the different lines of business.
Via the availability check, the user can immediately check whether telecommunication products such as internet or TV are available at his desired address and order them directly online. The online verification of the customer's identity makes the contract and payment legally valid. In addition, a usage-centred product presentation was created to help customers choose the right tariff for their life situation.
Via the availability check, the user can immediately check whether telecommunication products such as internet or TV are available at his desired address and order them directly online. The online verification of the customer's identity makes the contract and payment legally valid. In addition, a usage-centred product presentation was created to help customers choose the right tariff for their life situation.
The consistent MVP approach, Kanban and a cross-functional team of UX/UI designers, architects, developers and testers create fast results and offer flexibility in dealing with requirements.
Product presentation with a focus on the use of a product
Accessibility
Products and services from private and public providers that are publicly accessible on the European market must comply with Level AA of the WCAG according to the EAA - European Accessibility Act. For this reason, all elements were designed to fit the guidelines of these levels.
We followed the four principles (perceptibility, usability, comprehensibility, robustness) and integrated them along each building block (content, UX, UI, development). In particular, all design components that were adopted into the library were checked for accessibility. By making basic adjustments, such as adapting the brand colour to the corresponding contrast requirements, defining different states of the input fields, providing all information for all user groups and corresponding technical requirements for e.g. screen readers or tab navigation, a barrier-free implementation and quality assurance in the design can be guaranteed in the long term. To ensure that the requirements according to the WCAG are also implemented in the development, accessibility criteria were integrated at story level in the acceptance criteria and each feature was tested for accessibility before release (sometimes on users with corresponding impairments). In addition, an external audit of the entire ordering process for accessibility at level AA was successfully carried out.
Tools
ON BEHALF OF
