THE PROJECT
UPC is the leading Pay-TV and Broadband provider in the Czech Republic. Their products are sold via several channels – including independent retail partners all over the country who offer the services as well as different products. That possesses a major challenge - to make sure the customer experience is superior, it is crucial that the resellers are up-to date with the latest news and promotions from the management.
The previous way of ensuring this has been long obsolete, so I came up with an idea of creating a specific platform accessible exclusively to the resellers where they would be able to find all the important information.
THE UX CHALLENGE
As the network of the sellers is wide and their technical skills differ, it was important to make sure the platform is accessible to everyone on any device. Right from the beginning, two major functions have been identified – to update the sellers, but also to offer them a quick overview of all the current campaigns and access to all the documents they might need to use. Aside of that, we wanted the platform to save some work for the managers – keep the administration part as uncluttered as possible.
THE PRoCESS
Once the key requirements have been settled, the process of the creation has started. The first phase was the discovery phase. We wanted to make sure the project will be useful to the users – so we asked them what they would prefer.
1. The Interviews
The first step was to conduct interviews with the potential users. We wanted to know how they felt about the current level of information, what they were missing, how they thought should that potential lack be addressed and on how often would they use the new resource.
2. Card Sorting
Following the feedback, I have been going through the potential ideas, trying to settle on a simple and elegant solution. Based on the requirements to have an instant access on any device (including some running outdated software), on the interviews and on the feedback from the managers, we have settled on creating a web portal. After some adjustments, I was able to divide all the content for the end-users to just two parts – keeping the navigation as simple as possible. One of the parts consisted of a blog-like overview of the newest information, the other part consisted of a structured “archive” of important documents.
3. Wireframes
While the user-facing part consisted of only two parts, the administration was more complicated. However, after a few hours, patterns emerged, making it easy to break the sections down to sensible parts. At first, I was prototyping on a whiteboard – to make changes as easy as possible. Later, I have been using Sketch and InVision to create higher-fidelity prototypes.
UI DESIGN
UPC has recently undergone a big rebranding, introducing refreshed typography, bold colors and new icons. The UI of the portal has taken advantage of this – making sure the user experience is consistent through all the channels. In this project, the UI has been derived from other projects I have been designing for UPC (some of which are being used by these sellers as well), utilising the new branding, taking advantage of the bold colors, and of my custom-made icons. Even this case study website utilises the new design.
PICKING UP
THE ATOMS
Seeing how complicated the rebranding of many internal applications was, I have taken a simple approach in creating a design library for this project – being based on some of my earlies projects. The design is based on the Atomic Design philosophy, being broken into atoms that are sharing the same approach. These create the molecules to ensure that all components are similar. So even though they might seem different, they still share the same basics, being modified just by the code. For example, when coding a button, a smart class system makes it easy to change the icon and the color of both the button and the label. And also, the final organisms are scalable, making sure that any rebranding in the future will be easy to execute.
RESPoNSIVE DESIGN
In order to make the project futureproof, and to allow the sellers to check new information on the go, responsiveness has been a big factor while designing the whole interface. The project is based on three viewports – one for big screens, one for tablets and one for mobiles, to make the user experience consistent on all screens.
CoDING
The biggest challenge for me was to code the whole platform. I have been using HTML and CSS for some while, meaning that creating prototypes was easy. But as I have decided to try to code the backend as well, I have spent a lot of time not only learning some intermediate PHP (creating even the CMS from scratch – using a tutorial from a book), but also several days trying to make sure the platform is secure. As the project was about to be used on many different systems, I had to omit some techniques I have been planning to use (such as leaving out CSS Grid and replacing it with Flexbox). After a few weeks (and endless help from Stack Overflow), I have managed to code the whole platform myself.
THE LAUNCH!
Once the coding was done, it was testing time. Within a few days, several users tried using the platform on their devices, uncovering several minor bugs that have been relatively easy to fix. So, after roughly three months from the original thought, the portal has finally been ready to launch. And it has turned out to be successful – talking to some of the users, most have confirmed that it fulfils most of their needs in terms of being informed about what is happening around the company. In fact, it has turned out to be so successful that a new modification has been created for the Direct Sales department shortly afterwards.
THE TAKEAWAYS
While it has taken quite a long time to launch the product, it has been a great experience. These are the key learnings for me:
- At first, the idea was to create something way more sophisticated than the final product, but an easy test showed us that was not necessary at all – this solution has been able to fulfil most of the requirements, cost a lot less and was done way quicker.
- Sometimes it is fun to take on a huge challenge – if someone told me a year ago I would be able to code a CMS on my own, I would not believe them at all. But I’ve managed.
- Despite of that, I don’t think I will ever be a developer – I am sure if I would outsource the coding, the project would have been done way faster.
