Self-Service Portal usability improvement and UI facelift (READ MORE HERE)
Role: Main UI Designer, UX Designer
I’ve had the privilege to design a self-service portal all the way from beginning. My role in the team was to be UI/UX Designer, and I worked closely with Front-End Coders, Service Designer, Software Tester and the Product Owner, as well as other stakeholders.
The solution was web based application, that needed to be usable in smaller screens, so I designed a UI that would scale in different screen sizes easily, to increase the portal’s usability also while on-the-go.
Self-service portal had been in use for years, but it had several serious usability challenges, out-of-date looks and feel and major issues with outdated data and other instructions.
So we needed to design the whole thing all the way from the beginning to improve our users’ daily work dealing with service tickets, important news and updates, different kinds of forms and instructions etc.
Since we started from the very beginning, I conducted user research with the Service designer by interviewing end-users and gathering their feedback. We created user personas and user stories to understand the pain points and needs using Miro as the main tool.
At first I implemented some preliminary wireframes and Lo-fi prototypes in Figma to understand the workflows and the scope of the project, to help identify the components and elements the product would need.
After wireframing we had gained knowledge of our product enough for me to implement interactive prototypes to visualize more detailed prototype how the flows would work and how the user could navigate through the product.
We didn’t have any brand guidelines to follow, as we had free hands to design the product and its visual appearance according to our best vision. This was one of the things I found most fascinating, as I knew my expertise is on visual matters. So I designed the product’s text styles and color palettes etc. from the beginning and started to develop a Design system. Because of my background in visual design, I have strong understanding of color psychology, typefaces and aesthetical appeal.
Without going too detailed in the looks and feel (as I could talk these for pages and pages), I want to say that I wanted to use colors that the user would find pleasing to watch, and avoid using pure black/pure white combination. I also wanted to use calming colors, as I had noticed that people using the product might feel not-so-good at times when finding information or
reporting issues, so the colour needed to be pleasing. Bright yellow color was picked along to bring joy and highlight some parts of the UI. The main typeface I chose was a sans-serif typeface, because we were designing for both desktop and mobile, I wanted to make sure the typeface would be accessible and easy to read in small screens too.
Because of my illustration background I also had the opportunity to illustrate our chat bot character. I wanted it to be genderless non-human character so that it inadvertently wouldn't reinforce any harmful stereotypes.
UI has been designed to be as intuitive as possible, keeping in mind, that all the information on the screen (fillable forms etc) should not be visible all the time, but more content is revealed as the user makes choices in the UI, to avoid distracting the user.
Please note, that some of the texts etc. in the picture have been changed for the portfolio