This a story 📖 about improving a product by asking good questions 🔍 and driving a process to get there.
Project Background.
MC3 is a company that specializes in training and compliance solutions for major pharmaceutical companies. They offer customized portals that are designed for each individual client. These SaaS products provide tailored corporate training and educational exercises such as virtual conferences, leadership presentations, training curricula, on-demand modules, live workshops, and digital games.
The Challenge.
I was assigned the responsibility of auditing their portals, offering design guidance, identifying user pain points, and assisting in creating a more engaging user experience. Moreover, I was accountable for designing and developing fully interactive prototypes, along with the final visual design mockups.
The Result.
By conducting a series of product evaluations which informed my design recommendations, I was able to enhance the user’s productivity. This was confirmed by quantitative metrics. Certain functions that I had a hand in redesigning were noted as successful updates. For instance, during a Single Ease Question (SEQ) task, a score of 6.6 out 7 was recorded.
Part One: Defining the mission ahead.
The calendar invites are sent out to the decision-makers!
I needed to meet with the stakeholders and ask them a series of questions that I had prepared. This was critical in understanding their goals so that I could take the next step of conducting user interviews for the end-users who are top healthcare company employees.
Setting up user interviews. Connecting cross-functionally with departments.
Using Typeform I set up a series of questions that sought to gain critical insights to a selected group of users of the current platform.
After gathering fresh information from stakeholder and user interviews, I moved on to the next step. I created a new Slack thread to inform the key client representatives and project managers about the upcoming phases in the UX process, which would include the following steps:
Empathy +
User Interviews +
User Flow Diagramming +
Information Architecture +
Competitive Research +
Design Ideation +
But sometimes during the unfolding of a project and attempting to collaborate with others doesn’t always proceed on a “happy path”! And that brings me to one of the first challenges I faced.
My first obstacle! 🚷
Advocating for the UX process.
Onboarding them to Agile.
From radixweb.com. “Waterfall vs Agile: What to Know Before Choosing Your Development Method”
During my project, I encountered a significant challenge that had nothing to do with research, UI development, or prototyping. It was related to persuading some of the decision-makers to grant me the freedom to apply my expertise in the design process and then implement it. As UX was still a relatively new concept to them, they were skeptical about its benefits. However, I knew that I had to demonstrate my proficiency in this area and convince them that an agile process of feedback, iteration, research, analysis and deployment, though complex, was the most effective strategy going forward. I had to present the argument that this work would ultimately lead to a better product, and we would be able to measure that result in the long run.
Skepticism from the top.
At the highest level of the product chain, there was the creative director. This was an unusual setup compared to the standard agile team hierarchy. The management structure relied on a legacy method of controlling and directing projects using a traditional waterfall design process, where the design ideation was restricted. Coming from a more agile environment, I knew that this would be a challenging task. My goal was to convince the decision-makers to allow me to adopt a more collaborative approach. They were accustomed to using a top-down design methodology that did not involve much input from the end-user. I knew that my intended course of action would not be easy, but I was up for the challenge!
The team that hired me for this contract was aware of the challenges I was up against. However, they were supportive of my mission to introduce disruptive but beneficial changes to their existing norms. My aim was to challenge their conventions and make them realize that it’s not only about “aesthetics“; rather, it’s about enhancing the product’s usability and making it better for the user. I also wanted them to embrace the iterative process, which is crucial for driving positive changes based on user-driven results. Ultimately, my goal was to acquire new clients by creating a successful case study that showcases the value of UX.
Part Two: Design Thinking. Delving into the UX.
Analysis and charting the course of UX/UI work into the following steps.
1A) Analyze the current user flow.
The next thing on my agenda was to start thinking about the user flow and the information architecture to get a good read on the user’s perspective navigating the portal and any pain points along the way.
In Miro, I drew out a high overview of the user flow from the initial login to the “portal home” which is where the user is presented with a screen of tiles. This version of the portal has multiple links to video pages which would force the user to navigate away from the portal to view them.
Login user flow.
Within the “portal home” 18 possible action points.
In the previous version of the portal, users were presented with multiple rows of tiles that only served a limited visual purpose. For instance, the tile labeled “Dermatology” had a generic image of a doctor and a patient next to the title, providing only a superficial description of what lies behind it. To gather more information, users had to click on a series of quick descriptors and tiles.
One important aspect to consider in this design is that when more tiles are added to the screen, the user needs to scroll to reveal them. This raises the question of what determines the importance of a tile above the fold. Each user must make that decision for themselves. Is this the most efficient UX layout possible? Could we find a better way to present more information upfront and reduce unnecessary decision-making that adds to cognitive load? These were important considerations for me to keep in mind.
If we strip away the visual design it’s easier to see what the user is getting at the UX level.
After examining the skeleton of the interface, it is apparent that it belongs to the Web 1.0 era, which only allows users to “fetch and read” content. This user experience is outdated, as confirmed by feedback from user surveys. Keeping this in mind, I began the next phase of this iterative process and would build a case for an overhaul to bring it up to date.
1B) Diagramming the current “video experience” user journey.
The dreaded “Back 👈🏼” link.
Miro diagram of initial portal screen (after successful login).
I noticed that there are many video viewing links. This made me wonder if having eight links that all have the same function is necessary, especially since they take up so much web port space. I thought this was an interesting question to explore further. As a result, I started thinking about wireframes and came up with some initial ideas.
Having multiple video links confronted the user with too many choices for where to go next if they wanted to experience rich media. Each video tile on the main page is a link to a new window to view the chosen video. This forces the user to contend with the back-tracking of a “Go Back” link to continue their journey.
2) Design Thinking stage. POV+HMW=Solution.
Too many clicks/taps. Web 1.0 experience. (POV).
+
Can we get more up front? Can streamline the UX? (HMW)
=
Design Sprints & Ideation.
Upon creating the user path, it became apparent that the portal was not providing a rich user experience beyond a basic Web 1.0 result. The current version displayed 18 tiles, half of which were dedicated to “Video.” The presence of multiple links or tiles forced users to navigate away from an area that could have provided more information upfront.
If we want to enhance the users experience and keep things like “Time on Task” down, is there a better way to present what the user needs/wants up front? What are the areas in this portal experience that can be slimmed down? Are there UI components that can be created to accomplish these things versus adding more clicks/taps/screens to navigate to?
I identified several key areas to focus my work on, which are all derived from the Point of View (POV) and How Might We statements:
“Video” (video experience)
“Shout Outs” (colleague mentions for their social feed)
“Profile Builder” (user-generated details)
“Photo Uploader” (part of the main portal)
“Social Feed” (the client’s social media space)
“Messaging” (rewriting key portal language)
“Speed Round” (digital game)
3) Competitive Research.
We conducted research to establish a set of successful examples that demonstrate good UX/UI design principles. During our search, we looked for apps and SaaS products that combined UI elements in a way that made sense and had an appealing visual layout, particularly when it came to using cards, dialogues, and modals. Our aim was to find examples that engaged users quickly and made it easy to navigate the interface, without being overwhelmed by too many options at once. One standout example that we all loved was the way Apple uses scale to create a beautiful mosaic-like screen with entry points. We used this inspiration to bring those same attributes to our final mockup.
Competitive analysis breakdown.
4) Dashboard experience wireframing.
Heading over to Uizard I prompted their AI engine to show me a quick series of wireframes to support the teams vision for an improved portal landing page.
Part Three.
A series of user experience problems are solved for.
Video platform.
The client primarily uses videos as a part of their training curriculum. However, I discovered that the user was limited to choosing whatever was available on the portal at the time. This provided a limited set of choices for the user. The user was also only able to view a curated set of videos that would open in a new window forcing them to then contend with multiple open tabs, limiting the experience. To address this issue, I suggested expanding this sub-product into a more comprehensive experience. I created a series of wireframes that would showcase a more robust video experience.
Below is the new pathway from the portal to a new platform for videos. The new tile on the portal is a fully interactive slider that engages with the user right up front.
Main dashboard wireframe with “video experience” slider link.
UI component build in Figma.
Click to view functionality.
Video experience wireframing.
Mockups. Rapid prototype.
“Shout Outs” revealable UI component feature.
The client utilizes a feature called “Shout Outs” to encourage a sense of camaraderie among colleagues and to announce social events and corporate gatherings. This feature is a fixed row of horizontal “cards”, each of which includes an image and a brief description of the item.
For the redesign, it was decided that we could save space in the interface by hiding the “Shout Outs” feature and replacing it with a draggable component. This would allow us to prioritize more essential parts of the interface.
Contribute to “Shout Outs”.
In the “Shout Outs” feature, I noticed a UX problem where the process for users to contribute was not user-friendly and lacked logical heuristics. To address this, I proposed updating the UI to a more modern standard and simplifying the steps for the submission process. Instead of redirecting the user to a new page, my proposed solution uses the “modal” method, which allows the user to stay on the same page while submitting their contribution.
I had the new user journey evaluated in an unmoderated study at a later stage in the process, and it was confirmed that the changes made were sound. This was proven by the metric gathered from the Single Ease Question (SEQ), which received an average score of 6.6 out of 7, a great for SEQ evaluations.
User Profile.
One of my initial tasks was to evaluate the “user profile” creation space. I found that the old UI was quite clunky. After analyzing the “identify interests” area, I concluded that using a semantic approach to add interests would be more effective than using dated icons. This approach speeds up the recognition process. The two screens below depict the “Current UX” and the updated design prototype “1st screen (New)”.
Below is the before and after for the “Identify Interests” part of the profile building tool.
Previous UX with icon row.
New solution using a semantic approach.
Working interactive prototype.
The push for a native social media app.
I identified some issues that were negatively impacting the user experience on the social media hub. The main problem was that it lacked the fundamental feel of a social media user experience. The UX/UI for “Contribute” seemed like using the wrong semantics and heuristical approach to a simple objective of “Posting”. To solve this, I created a few mockups to demonstrate to the team how we could improve the UX and make the experience more user-friendly and intuitive, similar to other social media platforms. I was able to achieve a successful outcome by demonstrating a new interpretation of the social platform as a native app with live working examples.
Current experience. Arguing for the next iteration.
The current experience was only accessible through a clunky html based interface. While this was a inexpensive way to manage this space the downsides were more pronounced when compared to using other social media apps as it lacked the fundamental feel of a social media user experience. The way the user would “Post” forces users to use the html based uploader and “Contribute” modal. This had a significant impact on user participation.
The Next Solution: Move to a native app experience.
The previous version was a UX problem begging to be solved!
Current iteration of the social media “Post”.
New native app.
The push to a native experience, although quite challenging to get approval for would in my view be a better solution in the long run. It would go a long way in encouraging more people to share, comment or post. The experience being native would access the users device controls, i.e. the camera and be an easier way to participate with their colleagues. Although this was the only part of the SaaS product that is using user generated native based content it would still be connected to the overall experience when the user logs in to the html based portal.
UX Messaging.
Good user experience (UX) can sometimes depend on providing clear and concise language to help users understand what they can expect and how to proceed. For instance, in the case of “Endo Shop” on the left, there is room for improvement. The mockup on the right uses a similar graphic but enhances the user’s understanding by adding a headline and description. This can help reduce the amount of time users need to spend on the task by making the information presented clearer and more organized.
Digital Games.
Speed Round.
Another part of the system that was quite fun to work on was game design. “Speed Round” tests the users knowledge of healthcare concepts against a clock with a multiple choice scenario.
Interactive prototype.
SVG animated graphic.
I wanted to add an element that would really elevate the experience graphically. With the use of an vector based .svg animation I was able to bring more visual action into the background. Before I propose anything like this I make sure that its reproducible when we get to the development side. With SVG its possible to code this up with very minimal increase in the html package size. Using a plugin called “SVG Motion” I experimented with various line art to achieve the effect I wanted.
Lines and curve sketching.
Components.
Scoreboard and Q&A update.
The previous experience in my view had a score board that could be improved upon. I created a new score board UI and leaderboard asset that makes this part of the game more interactive and interesting.
Previous game score and question and answer UI.
Visual design refresh for Q&A.
New refreshed UI for leader and scoreboard.
Adding sound experience.
I added a sound component to the game. With the user clicking/tapping on the possible answers it occurred to me that adding a sound to the getting either a correct or incorrect answer would be a great value add to complete the interaction. The way I had to prototype this was a bit unconventional. Figma currently does not support .mp3 files. However, I achieved this by recording a short .mp4 video with sound and a blank screen. The result is when the user clicks on the answer it triggers the blank video that holds the sound. Voila!
Part Four:
High-fidelity. Gathering intel from user studies.
High fidelity prototype.
Fully interactive high-fidelity prototype created after design sprint. This was the mockup that I created and presented to a 5 person panel for review on an unmoderated “Userlytics” study.
User research/study and metrics.
I conducted an unmoderated study to gather both qualitative and quantitative metrics from users. These measurements were crucial in the prototyping phase as they provided valuable insights and feedback. This information will help us identify successes and pain points that were revealed, allowing us to make improvements in the next iteration.
Final takeaways.
From the user studies that I had directed, I was able to gather several insightful metrics. Both quantitative and qualitative data was a critical measure that was taken to both confirm right track/wrong track as well as getting great feedback for plugging into the iterative phase of the products development.
Next steps.
Building a Design System to support the product update.
The next phase was to take all the learnings and insights from delivering a successful product update and build a design system that can scale to deliver the new vision. Check out the next step in this process here:
