B2B Customer Self Service Portal

Dimitar Ivanovski
3 min readApr 4, 2021
Final Mockups

Telemach Customer Self Service portal is a B2B and B2C portal solution. The main goal of the project was to provide an overview and control over all business-client subscriptions for mobile or landline telephony. With the solution, we wanted to reduce the pressure off of the support departments, like for example the needs of changing SIMs, changes of shipping addresses, and other administrative after-sales activities that take a lot of time for sales employees.

The challenge for the project was the lack of real data from Telemach web services. More exactly, I didn’t have content (real text and labels) in order to plan and design the Information architecture for the project. In order to overcome this challenge, with my team we decided to complete this project in increments (Agile development), thus allowing design and software development to respond to changes to real data as part of the whole process.

When doing the user analysis the primary objective was to find out users' needs, goals, values, and limitations. A secondary objective was to find out what devices and browsers are users using, what is their main goal when using the solution (as user stories), and what roles and permissions they have at the company they work for. We gather all the information from the shareholder's database, business requirements, and interviews, and workshops.

Role:
UX designer
UX engineer

Personas

User segmentation

Telemach Admin can:

  • Login to system
  • Add company
  • Edit, manage, delete company

Wireframes and responsive design

The preparation of the use case scenarios and user experience design was in collaboration with the customer. Wireframes were prepared and review by Telemach team and approved after one round of feedback. High fidelity (graphical) designs were prepared with alignment to Telemach corporate design and also approved by Telemach team.

Wireframes B2B Portal

Implementation

For the portal development only proven enterprise-level and tested technologies were used. First, was used Liferay 6.2 — a portlet-based CMS system that is highly customizable and provides a lot of functionalities for building professional portals. Spring/Java Framework along with JSP was used for building the different set of applications. Figma, Bootstrap, JavaScript, and JQuery were used for the style guide and the HTML prototype pages.

Originally published at https://dimitari.com.

--

--

Dimitar Ivanovski

UX/UI designer. Diversified expertise in HCI, product design, end-customer, client & stakeholders relations, interaction design, prototyping, and testing.