One Platform
Before we start, to comply with my non-disclosure agreement, I have omitted confidential information in this case study. All information is my own and does not necessarily reflect the views of i3D.
—
The One Platform is a digital platform, in the form of a responsive web application, purposely built for i3D customers and their employees. It allows corporate enterprises to run their infrastructure on a fully redundant network, and publishers to host their AAA video games on a global scale. Direct and indirectly the platform is serving 250 million players of the world’s biggest games on a daily basis.
Project Overview
Challenge
- Completely rebuild and redesign the existing customer panel, in an effort to increase scalability so it can accommodate new features and products, and act as a tool to upsell and cross-sell services.
- Create a solid and coherent user experience and customer journey, with the goal to increase the level of touchpoints we have with customers and increase brand loyalty.
Background
One of the requirements we had for the replacement panel, was that we would offer a responsive layout, although that turned out to be a huge task. With offering highly technical services, with a steep learning curve and admin-like configurations, we decided to support mobile devices, but up to a certain level of functionality. Our user personas are very desktop minded, so we did not make a responsive layout or primary objective.
To make sure our new installment could match what our competitors were offering, we decided to create accounts with them and similar companies, all with the goal to experience their customer experience firsthand. i3D serves two target audiences; the gaming industry and corporate enterprises, which did not make this task easy. So we decided to mainly focus on the enterprise experience, which also acts as a backbone for the services we offer to game publishers.
We learned a lot, and gathered ideas and inspiration from our competitors; for example, how to keep a big range of products manageable, and how to keep navigation easy. Some competitors have huge teams that purely focus on product development, so why not learn from them?
You are required to sign up, in order to view the platform.
Role
Product Designer (UX/UI)
Time
3+ years, ongoing
Tools
Paper and pencil, iPad and pencil, GoodNotes, Adobe XD, Axure RP, Miro, Google Forms, Excel, Teams, Jira, Confluence.
More Details
The previous customer panel, also built in-house, wasn’t optimally performing and therefore it was decided to replace it with a new platform, which was capable of housing future-build products and features. It had outdated branding, it was difficult to edit, and it did not support the use of mobile devices.
The platform prior to the redesign:
Login
Signup
Account details
Server overview
Server details
Colocation overview
Colocation details
Usage data
Dashboard
Invoice details
Research
Competitive Analysis
We took 6 competitors and companies that offer similar services and created accounts to experience their onboarding and order process of services. What we learned is that some of these competitors have quite a long sequence, guiding the user through each step, and letting them fill in the required fields step by step. Others had a much shorter process, focussing only on the minimum required info, and requesting them at a later stage when the user tries to order a service.
We documented each step meticulously and documented them in Miro. After going through the complete signup process, we revisited the screen dumps we added to the Miro board and added sticky notes, with small remarks, recollecting our thoughts. To this day, we often go back to this board to get inspiration and learn further. We also often check out our accounts with the competitors, to see what has changed in their portals. Signing up for newsletters also helps a great deal in this.
Through the research, we aimed to:
- Evaluate the strengths and weaknesses of our competitors.
- Gather inspiration on how to improve our platform.
- Acknowledge on what fronts we would need to improve to match the experience of our competitors.
We documented each step meticulously and documented them in Miro.
A complete overview of the competitive research:
A closer look at one the competitor’s onboarding process, DigitalOcean:
Equinix
Equinix is an American multinational that specializes in Internet connection and data centers. The company is a leader in global colocation data center market share, with 240 data centers in 27 countries on five continents.
Strengths
- Very clear CTAs with a direct focus on onboarding.
- Minimal but effective styling, and usage of imagery with a personality.
- Has a friendly tone of voice, and consistent use of ‘we’, suggesting a partnership with the user.
- Use of progressive disclosure, and full transparency of what is required from the user.
Weaknesses
- The signup modal contains logos and quotes for social proof, but could also be a distraction from the goal of the page.
- Creating an SSH key is a mandatory step, but it did not offer much documentation on how to create one. I guess they assume all users already have an SSH key, or know how to create it.
- Support emails were weirdly formatted, which made them hard to read.
Vultr
Vultr is an ultra-reliable cloud platform that is within close proximity to the world’s developers. We’ve perfected the art and science of cloud infrastructure with our wide array of cloud, bare metal, and storage products.
Strengths
- Clear display of their products and pricing.
- Only email and password are required to create an account.
Weaknesses
- In some cases the copy felt a bit confusing, resulting in the user being unclear about what to do next.
- Some elements have confusing names.
- The message to verify the email address contained multiple CTAs without a clear hierarchy of importance.
- The UI looks good, but it is very minimal. You would expect to have more options.
IBM Cloud
IBM Cloud cloud computing is a set of cloud computing services for business offered by the information technology company IBM. IBM Cloud includes infrastructure as a service (IaaS), software as a service (SaaS) and platform as a service (PaaS) offered through public, private and hybrid cloud delivery models.
Strengths
- Consistent styling across all pages and messaging.
- They provide tools and links to documentation pages in an effort to guide the user.
Weaknesses
- A very sales-looking chatbot is displayed on many pages.
- It appears many products are free with a premium tier, but that in most cases is not the case. All products are premium.
- Has a very bland tone of voice, it lacks some personality.
- Overall a bad UX, setting up an account takes quite some time and consists of many steps.
- IBM sends quite some emails after creating an account, it feels pushy.
Linode
Linode is an American privately-owned cloud hosting company that provides virtual private servers. They focus mainly on developers, with products that consist of cloud-hosting services with multiple packages at different price points.
Strengths
- Offering an incentive with credit, right from the start.
- Apparent styling choices were made to cater to their target audience of developers; very minimal and simplistic styling.
- Very clear communication and tone of voice.
- Mention links to guides and tutorials, offering help with setting up services.
Weaknesses
- The signup modal contains logos and quotes for social proof, but could also be a distraction from the goal of the page.
- We came across some styling errors and inconsistencies.
- The initial signup seems very short, but after logging in for the first time, the user is confronted with additional steps.
- Email messages contain technical info which might be clear for their main target audience, but not for everybody.
Zenlayer
Zenlayer offers on-demand edge cloud services in over 250 PoPs around the world, with expertise in fast-growing emerging markets like India, China and South America. Businesses utilize Zenlayer’s global edge cloud platform to instantly improve digital experiences for their users with ultra-low latency and worldwide connectivity on demand.
Strengths
- Colorful design and imagery, with a friendly personality, although it looks a bit like DigitalOcean.
Weaknesses
- During signup, they ask the user about their interests, without explaining why they ask this question.
- Somehow the message for email verification ended up in my spam box.
- When not receiving the email in my inbox, I tried pushing resend, but it was disabled.
- Their website and portal look very vibrant, but their emails lack this personality. Some of the emails contained, what is to be assumed, Chinese content.
- Some steps in the signup process were confusing and gave little explanation. There was no option to skip them either.
- Many persistent follow-ups from the sales department.
DigitalOcean
DigitalOcean simplifies cloud computing so developers and businesses can spend more time building software that changes the world. With its mission-critical infrastructure and fully managed offerings, DigitalOcean helps developers, startups and small and medium-sized businesses (SMBs) rapidly build, deploy and scale applications.
Strengths
- Nice graphics and good branding. Very clean layout, simple, with no clutter and feels comforting.
- Their email messaging is spot on too, very clear and friendly tone of voice, and it looks the part too.
- Being offered a credit after signup creates an incentive to sign up. Referrals are offered a credit too.
- Possibility to log in with a Google or GitHub account.
- They offer guidance through documentation, tooltips, and quick links.
Weaknesses
- Vetting is part of the signup process, no option to first looks around before providing payment details.
- Two-Factor Authentication is mandatory., which is a good thing. However, the received 6-digit code was not properly highlighted in the message.
- Quite heavy on the messaging, at some point we received one message per day.
Key Insights
- We realized that a lot of competitors offer clear documentation and guidance through tooltips. And if not, it often resulted in confusion. Guiding our users through all the necessary steps to reach their goal would be key, especially with such a technical product.
- Although having such a technical product, it is still feasible to make it look pretty and offer a complete experience to the user. In time we feel we need to strengthen our brand and give it more personality.
- Our tone of voice and messaging was very corporate. Using a friendly and informal tone of voice, with a focus on clear and informative messaging, would improve the brand and user experience.
- We need to do a better job at adjusting the content to our audience, that being from a billing representative to a tech-savvy developer.
- It’s good practice to keep the signup process as short and transparent as possible and only ask for the necessary info when required. Additional info can be requested once the user converts to ordering a service, or performing a specific task.
- Avoid being too pushy with marketing speak and sales call-to-actions, especially with follow-up messaging after creating an account.
Understanding the User
User Flows
Using the insights from our research, we listed down all the functionalities that already were implemented in our existing platform, or were required to be put in the new platform. We reviewed all the required steps and created detailed user flows for each of those actions, making sure we covered all the possible flows and scenarios.
Below I displayed a small selection of the flows that were created.
The onboarding process:
Change email address:
Order bare metal servers:
Wireframing
Low-Fidelity Wireframes
Most of the low-fidelity wireframes we made in recently, have been made in GoodNotes on an iPad with pencil. Setting the thickness of the pencil, still forces you to sketch with little detail, but the digital advancedness of the iPad helps you easily correct things when you need to adjust them.
Set up Two-Factor Authentication:
Create Profile:
Set up compute layers within a Profile:
Order bare metal servers:
Mid-Fidelity Wireframes
For some features, products or pages we created mid-fidelity wireframes, which were mostly created in Axure RP and Adobe XD. Mid-fidelity screens often give colleagues or stakeholders a better feeling how the end-result will look.
The onboarding process:
Change email address:
Creating the Design
The original idea was to buy a template and adjust the theme so it matches the i3D branding. Both myself and the front-end developers tied to the project felt that we could do better than using a template. A template would be easier to get up and running, but in the end, it would limit us when we needed additional UI elements, which were not included in the theme. We managed to convince stakeholders to start from scratch; design the complete UI in-house, and develop it using React.
The design language, the grid, all UI elements, components, etc have been built from scratch. This was my first big project in Adobe XD, and we kind of stretched the limits of its capabilities. Adobe XD does not have an infinite artboard, so when the number of pages, wizards, and modals increased rapidly, we were nearing the limits. Also, loading times were getting longer and longer.
An artboard with a selection of the UI components we built. Which, to be honest, needs cleaning up and organizing.
High-Fidelity Designs
As mentioned above, we had created a huge file with artboards, so I will share just a small selection of various screens to give an idea of the platform we have been building.
Set up Two-Factor Authentication:
Create Profile:
Create Patch Job:
Server details pages:
Usability Testing
Internal Unmoderated Usability Test
With a deadline coming up, we had insufficient time and resources to perform a test with actual users. But with such high stakes on the table, we decided to perform an internal unmoderated usability test with a number of colleagues from different disciplines and departments.
The goal was to gather their feedback on the usability and catch any obvious bugs or issues, such as browser incompatibilities, before deploying to production. Additionally, we were hoping to gather ideas on how to improve the platform.
The Details
- We recruited 9 participants and divided them into 3 groups. Originally there were more participants, but some had other priorities and could not partake.
- We spread 23 tasks with detailed scenarios over those groups. Unintentionally we ended up with an uneven split of 2, 3, and 4 participants per group.
- Each participant was assigned a specific browser to test with.
- We asked the participants to document their findings in a form and record their screens during the test.
- That resulted in 3.5 hours of recorded video we needed to analyze.
The Results
Results Group A:
Results Group B:
Results Group C:
Results General Tasks:
What did we discover?
The test helped us validate a lot of pages and functions worked as intended. In total, we listed 35 issues ranging from usability issues, design improvements, broken links, bugs, and cross-browser issues to feature suggestions. The issues were rated on their severity using Jakob Nielsen’s four-step rating scale. We included a suggested change for improvement with an estimated effort score. Yes, more work to do, but an awesome result for an internal test.
ISSUE 1
Rating:
The onboarding process, especially the email messaging, felt confusing.
Evidence
The onboarding process was found to be confusing. 50% of the participants who performed this task, reported this. We had set up a specific flow to create an account, but apparently, it was not implemented as intended.
Solution
It seemed that two user-facing emails, that we send during the onboarding process, were swapped. We changed the contents of the emails and fixed the order of sending the emails.
ISSUE 2
Rating:
When changing the account email address, users were unsure if the change was successful.
Evidence
We asked the participants to change the email address of their account, and 75% of the participants who performed this task reported an issue. After changing the email address, the user was supposed to be logged out, but in some cases, they weren’t. That resulted in confusion if the email change was successful or not.
Solution
We fixed this issue by automatically logging the user out, after an email address change has been performed. Additionally, we prompted the user to verify their email address, and after verification, they could successfully log in again.
ISSUE 3
Rating:
Users could not find the Billing section, where invoices are located.
Evidence
33% of the participants were having trouble locating the billing section. In one case it took a user 50 seconds to locate their invoice. We clearly did something wrong there.
Solution
We fixed this issue by displaying the latest invoices and a link to the billing section in the main dashboard. Relocating the menu item, and renaming the billing page to “Invoices” took away any remaining confusion.
ISSUE 4
Rating:
Reply to a ticket not possible due to an error in the front-end.
Evidence
It turned out that 8 out of 9 participants ran into a bug when replying to a ticket, resulting in a 500 server error.
Solution
Luckily this turned out to be a small front-end error, which could easily be fixed by adjusting the link to the API endpoint.
ISSUE 5
Rating:
The payment page lacked company branding, and was not properly secured.
Evidence
The page where users can pay invoices, did not contain any company branding. This could result in confusion with our users, because if you make a payment, you want to be sure you’re paying tot he right person. Additionally, the SSL certificate was not correctly implemented.
Solution
We added a header, footer and company branding to each step of the payment process, to make sure the payment pages reflect the company’s visual signature. The SSL certificate was implemented in the correct way, to make the payment pages secure.
ISSUE 6
Rating:
Users could not navigate between the steps in onboarding process. Optional steps not clearly optional.
Evidence
When testing the onboarding process, two users tried to view the follow-up steps, and were not able to navigate back. They were not aware that step 3 and step 4 were actually optional steps.
Solution
We added navigation steps to the onboarding sequence, so users could go back and forward a step, unless some validation prevents them from doing so. We clarified that the optional steps were skippable.
The full list of issues that were reported:
What did we learn from doing the test itself?
- We have to make better preparations;
For some tasks we needed a certain element with specific characteristics to be present, but in some cases we forgot to create it. - We have to be more clear when communicating the tasks and scenarios, or the state of the platform;
Some elements were still in development and therefore missing, we failed to clearly communicate that. Due to reasons we did not disclose to the participants, one of the task could not be fully performed.
Final Result
This was the first project that I ever built and designed of this magnitude, and in some moments it felt overwhelming. There were just simply too much screens, wizards, modals, and UI states. When I first joined the project in 2018, Adobe XD was still relatively new, and were playing catchup with Sketch. The reason I used XD, is that we already had the Adobe CC package, and I had to run it on a Windows computer.
The design file grew out of proportions, requires more and more maintenance, and it’s not optimally utilized. Being the sole designer on this project has taken its toll. There is so much to do, that the maintenance tasks have little priority.
I learned a lot, and I still am learning a lot, from this project. It brought me into the development and product spectrum, which I am really grateful for. Working with developers on a daily basis (back-end and front-end), and with product managers and product owners, is truly rewarding. Although I must say, working in an agile and Scrum environment, still requires adjustment.
This section says “Final Result”, but in true product development fashion, it will never be truly finished.
You are required to sign up, in order to view the platform.
