Overview
Saudi Telecommunications Company (STC) is a pioneer provider of integrated telecommunication services in the Middle East, North Africa, and the European region. When I was brought into the project they already had an existing portal to manage and track service usage, bills, and accounts as seen in the OLD STC PORTAL below. There have been a lot of user complaints that the site is not very useful to them. I was assigned to do the UX design of the web app version and was one of the four UX designers and two visual designers for the project.
Problems to solve
- Users are not able to effectively use the portal due to bad information architecture and lack of user guidance through different flow
- The customer service reps from STC are getting a lot of user complaints due to bad experience in the website.
Goals
- Improve the usability of the portal so business and personal users can make requests online.
- Reduce customer service calls through full utilization of the portal
Discovery
When I worked on this project, I was part of the agency Accenture and was pulled to work as part of Fjord, a sub-company of Accenture. I collaborated heavily with the STC team and Fjord team on gathering the requirements, conducting user research, and collating user feedback from the customer service team. We have done a couple of stakeholder interviews to get the lay of the land and see the full view of both the web and the mobile apps.
The Old STC portal
Stakeholder Interviews
User Research
We conducted an extensive user interviews and focus group discussions across different users and business size to fully assess the needs and concerns with the portal.
User Interview Synthesis
User insights Synthesis
User Persona
With the insights gathered, we drafted the different user persona types with the business level to anchor our sample to the realities of STC customers and clients.
Identifying Trends from Findings
We identify trends from the user interviews to set the north star of the whole redesign project. This will be our principles and focus points as we design the screens of the portal.
Translating findings to product features
Information architecture
A card sorting and tree testing workshop was done to set the information architecture of the app. This also maps back to the old portal and the insights gathered during the user interviews.
Design
Once the site map and information architecture were finalized we started building up the wireframes with the web app and the mobile app in tandem. I started designing the wireframes and user flows in tandem with the mobile app version from the other UX designer. We need to be in lockstep on the user flows and information architecture as the users will likely be using their smartphones and desktop computers.
Other Wireframes
Visual Design
Once the wireframes are done and reviewed, the visual designers starts working their magic to add aesthetic appeal to the screens while carefully adhering to the components and flows of the wireframes.
Comparing old with the new
I placed the old and new to compare the updates we did on redesigning the new version
Billing Accounts
1. Filters: We gathered all possible filtering and placed the functions in one area on top of the list so that the user can have all the freedom and flexibility to be able to narrow down the list.
2. Accounts List: Instead of showing a lot of information, I narrowed the details to what the user needs which is the account number, label and the amount due.
3. Unpaid Bills: Instead of calling it unsettled accounts,I renamed it unpaid bills because unsettled can mean a lot of things to different people. And, I showed the total due with the readily accessible pay button.
4. Master Payment: I show the amount of the master payment so that the user can immediately see and act on as needed.
5. Actions: Instead of showing the actions on top competing with the rest of the interactions, I placed it at the bottom as sticky footer so that the user can have one area for actions which is really helpful for scrolling down a long list and making bulk actions for multiple selection.
Account Details
1. Account Number: As what we found out that a billing account will always have services assigned to it, we rethink how to better convey that to the user. So we dedicate a whole block on the header to show all information pertaining to the account. And clearly separate that from services below
2. Amount Due: On the previous version, they have a lot of number which makes it hard for the user to know how much they really have to pay for this account. I took note on that and show only one number. The rest of the breakdown can be viewed on bill details page.
3. Bills: Since every month a bill is sent, I created a tab to gather all bills in one place so users can access and download bills in the past instead of just the current bill.
4. Payment History: The previous version only lists the payment history in a small area, I gave it the same level of importance as bills since payments or invoices is important on tracking down evidence for disputes.
Service Details
1. Service name: When we had the requirements gathering, it was cleared out that all services belongs to a accounts. With that in mind, it will be confusing to separate services from accounts. So, we convinced the stakeholders to have services under account details.
2. Actions: I found out that there are more actions the user can perform for a service. With that in mind, I made use of a manage button which brings out a dropdown list showing all available actions.
3. Add-ons: I utilize a list on the side to show all add-ons with a dedicated dropdown to show more details.
4. Usage: I showed the usage as a list with clear numbers and bars so that users can quickly scan and get the idea what requires their attention.
5. Offers: Before, all offers are hidden in a pop-up. As an improvement, I showed it directly with clear offer details which the user can easily read and buy the offers.
Other Screens
Lessons Learned
This project was one of the biggest and depth because we did the full redesign on one go. It took about 11 months even with the large team of 9 people.
Lessons learned
1. Leave reservations especially when designing an ambitious project.
2. Learn to work as a team especially when co-designing with other parallels.
3. Stay curious and be open to new ideas.
