

Overview
Saudi Telecom Company is the Saudi digital enabler of telecommunications services in the Kingdom of Saudi Arabia, and among the operators in the Middle East. They are serving business and private customers with apps to track manage and oversee usage and bills. I was hired to work with the Fjord team of 3 visual designers, 4 service designers, and 3 other UX designers. I took ownership of UX design for the web app and the mobile responsive. We redesigned the whole business portal but for this case study, I will only be presenting the Accounts and Services section.


About the Account page of the Business Portal

Design process

Gather requirements
In this phase my goal is to understand first the requirements of business, and their vision about the redesign. After those are gathered, I reach out to dev team and other stakeholders to understand the limitations and the logic involved in the product.



Research and findings



User flow and feature list
After the research and the requirements gathering, we started drafting out the features in each of the product in the business portal.


Wireframe


Visual Design
As I design the wireframe, I'm coordinating with the visual designers to slowly work on the approved screens. I presented some screens in the side-by-side comparison section.

Side-by-Side Comparison
This side-by-side comparison aims to present the improvements made from the previous version. I added explanation at the bottom to articulate the intention behind the change.







Key takeaways
Constant Collaboration
Working with 3 other UX designers, 3 Visual designers from Accenture side, and designers from stc side requires constant alignment and collaboration which was new to me. I used to work as a sole UX designer in a product team so this project forces me to rethink how to approach work because the experience should be holistic across different channels in web, mobile app, and mobile responsive.
Documentation helps
Being in an agile environment means that the process should be calculated to have optimal results, it is prudent to do documentation on the side to help with decision-making the future.
Communication skills pay the bills
Being able to present clearly the designs and ideas to the stakeholders and other designers in the teams is a huge edge because one of the important job of a UX designer is navigating through arguments, and turning that into productive results. Articulating thoughts and showing data will make it more easy to get buy-in.
Keep on learning
When I was deployed to the project, service designers from Fjord already started on the user interviews, benchmarking and about mid-way on drafting the presentation for the vision of the project. I have to quickly learn what the service designers are working on and how to work with them since it was my first time having service designers in the team.
What went well
Shape the process according to the project need
It is imperative to adapt the design process according to the needs of the project and the time required to finish. I was able to adjust the design process according to what is required in each phase.
What would you do differently
Collaborate early and collaborate often
When we started designing the wireframe on the first feature, I focused on designing the web-app which led to misalignment and confusion because I worked in silo even if web and mobile should have a holistic experience. Collaborate early and collaborate often with fellow UX designers and client-side designers would have made the first few sprints smoother.