Vodafone Ukraine: customers certification
- Year: 2018
- Country: Ukraine
- Type: phone number certification service
- Market: telecommunications
- Developed elements: UML diagrams, user journey scenarios, UX prototypes, UI design
Ukrainian parliament made a new law that require all mobile phone users to be officially registered. Customers of all mobile operators have to add personal information to their accounts. Information must be proved by personal ID or digital signature.
Vodafone Ukraine company decided to implement this law. It outsourced software development to Ukrainian IT company Document.online. This company has big experience in introducing of electronic document interchange to Ukrainian market. UX/UI development was outsourced to our design studio Yellowarrow.design.
Preparation
We decided to start from UML diagram of user journeys. It was a visualisation of all actions with interface user could do.
Style Guide
This new feature should be similar to other Vodafone websites. We had the task to follow UI kit and concepts of their design system strictly. We had got an incredible style guide with 376 (!) pages.
UX development
Prototype
Our UX designers researched the style guide and started UX prototype development in Axure. The prototype was created with all steps, validations and animations. It was so realistic that client mistook it for final version of UI design. We wrote different scenario for user journeys to check all features. This document spare a lot of time for programmers and QA.
Cases
We implemented feature that allowed users to add unlimited quantity of phone numbers.
Some users of Vodafone have keywords in their accounts. We should make several ways of validation with SMS and with this keywords.
We developed different interfaces for two personas: individuals and companies.
We added three ways to prove users personal information with BankID, with digital signature and MobileID.
The interface was made as wizard in vertical accordion style. When user finished one step the step should collapse and open next one. This got his attention precisely into the step he was working with.
All data we could grab from digital signature was prefilled in the form.
We used existing dictionary for addresses with smart search suggestions.
User had a possibility to check everything and edit mistakes before he sent it to the service.
UI development
We chose Figma app for UI, that gave advantage to programmers because they could require some new element and got it in real time.
Style Guide was not a perfect one. It had 376 pages but only 22 pages with UI kit. It had lack of some sizes, paddings and problems with small fonts. But we made it perfectly fit to Vodafone style and the client was amazed.
Adaptive
It is very important to mobile phone website to be mobile friendly. We had got all breakpoints from the style guide. So we created all elements from the beginning with understanding of their appearance on all required display resolutions: desktop, tablet and mobile.
Summary
Successful project should have good cooperation between designers, programmers and QA. We created many useful documents (UML diagrams, user journey scenarios etc) to make it easy. Also modern technologies as Axure and Figma made the implementation process fast and clear. We had live chat between all participants to solve problems immediately they appeared.
We are happy to work with such a big company as Vodafone that has their own identity written in the style guide. Also we are very glad to cooperate with Document.online that is brilliant example of software development company with high technical level and smart IT team. And we are happy for our country that created so strange law that gives our designers this job.
