Project Overview
Enhance user experience and operational efficiency by introducing an error notification system and upgrading the user interface (UI) of the software.
Role: UX Research, UX Design, UI Design
Duration: 1 Month
Company: EFraud Services
Approach
I tackled this project in 4 stages.
Discovery: Analysis of Past User Interviews, Strategy Development
Ideation: User Flows, Design Trend Evaluation, Sketching
Design: Medium Fidelity, High Fidelity Screens, Stakeholder Feedback
Testing & Iteration: User Testing, Collaborative Iteration, Testing Analysis
Research & Discovery
Entering this contract position, I observed that the company was facing challenges in attracting and maintaining users, primarily because their software did not align well with the actual needs of its users. My initial focus was to develop a comprehensive understanding of what users truly desired in the platform to enhance and support their workflows effectively.
Goals:
Identify the points where users experience frustration.
Determine the factors that dissuade users from engaging with the software after downloading it.
Explore ways in which the software can streamline and facilitate user workflows.
Analysis of Past User Interviews
I’m joining this project with access to user interviews previously conducted by past designers. This allows me to delve into these interviews and uncover what aspects users find most important. In reviewing the past research, I’ve identified three significant themes:
Theme 1: Users want us to save them time.
Theme 2: The software needs to be 100% accurate or catch it’s mistakes.
Theme 3: The software needs to keep the records organized.
User Flows
I progressed to brainstorming user flows to empathize with the user and comprehend the path they would navigate during the error notification process.
Design Trend Evaluation
After mapping out the user's journey through the software, we focused on conducting a design trend evaluation for error notification systems. Our goal was to gather inspiration on various design elements and functionalities. This process involved analyzing current design trends in error notification systems to inform our own design strategy.
Ideation
After gaining a clear understanding of the issues, I was prepared to enter the ideation stage to discover the most effective solution for these users.
Key Activities:
Creating user flows to ensure we understand the full capacity of how users will work with the error notification system.
Evaluating current design trends to see how the design world was implementing error notification systems.
Sketching out rough ideas of how our notification system may function.
Ideation
After looking into the main themes uncovered I was able to identify that the software currently addressed one of the three themes: Keeping records organized. This meant I needed to come up with a solution for the two remaining problems.
Sketching
Once we had a better idea of how we wanted to pop-up notification system to look like we began sketching different ways it would look to curate many different ideas.
Design
Once I had a strong idea of the direction we were headed in I moved forward into bringing my idea to life .
Key Activities:
Bring sketches to high fidelity.
Fine tune to ensure designs align with current platform UI.
Gather feedback from the stakeholders to ensure alignment before user testing.
High Fidelity V1
Since this company already has their design systems figured out we were able to move right into hifi and pull components as building blocks. We have two different ideas (icon and pop-up methods).
Wait, actually we want this...
(Stakeholder Feedback)
Before investing time and resources into user testing we wanted to ensure what we had created aligned with the stakeholder's ideas. Moving forward they had 5 recommendations:
Want the users to be able to save the worksheet before checking for errors.
Make sure the PDF and excel both scroll
Remove highlights from the PDF page
The mismatched calculation highlight should be on the "difference" column
The user should be able to edit the error directly in Excel
The first four errors were pretty easy to adjust before user testing. The last error was rather tricky. Given that the stakeholders now want the user to edit errors directly in excel (as opposed to in the pop-up) we needed to find a different way to communicate the error to the user, as a pop-up typically indicates that they cannot interact with anything aside from the pop-up.
High Fidelity V2
After uncovering the changes the stakeholders wanted we were able to tackle our V2. Here we changed the entire error notification system to a banner system, this way the user will be able to make the corrections within excel with minimal confusion.
Testing & Iteration
Now that our mocks are looking clean and we have addressed feedback from the stakeholders I am ready to move into testing!
Key Activities:
Conducting user testing and usability testing to ensure new features are aligned with users pain points.
Analyzing testing results to make the most informed design decisions.
Iterating on mocks based on results from testing.
What did our users think…
Throughout user testing, I take notes to better understand what the user needs and to refer back to later. All four of our participants were supplied to us by EFraud Services.
Analysis
We created a test report so the results are easily digestible by our stakeholders. This is also helpful for us to identify what we need to iterate on. For each task, a participant performed they were ranked on a scale of 1-3, as seen in the guide. At the end of testing, we calculated the sum for each task to understand the overall usability.
Test Findings:
Users struggled to identify which document they had just edited.
Users struggled to locate the PDF page the error was located on.
Recommendations After Testing
Create a light highlight on the document just edited, maintaining a balanced visual hierarchy.
Create an additional location for the pdf page number that stands out to the user but doesn’t conflict with the visual hierarchy.
Iteration 1
For this iteration we wanted users to be able to more easily identify which document they just edited. Creating a highlight over that document will fix this usability issue.
Before
After
Iteration 2
This iteration was done to make the page number more noticeable. We made the text slightly larger and changed the background to a circle.
Before
After
Insights
What I Learned
User Testing: Since the stakeholders wanted this project completed faster than we originally thought we had to learn how to get the most out of user testing, as we only had time to do one round.
Understand Your Company: Working with EFraud was a very unique experience because I knew nothing about their software or user base. That being said, I had to emerge myself in outside resources to truly understand who I was trying to help.
User Testing Participants: Our users were provided by EFruad services. One of the participants informed us that he had been a part of the conversion so it was hard for him to understand a lot of the questions and tasks we were asking him. Having users that are in your user base is really important.
Next Steps
These designs will now be passed through to the development team. We will remain in contact with the EFraud Services team in case they need any assistance or clarification before, after, or during the development process.
Updated UI
I have recently updated the visual design of this platform. This video displays the new visual designs I have created. The rest of the case study shows the old UI, to help demonstrate the design decisions I made.