Company
Becker Professional Education. A global professional education company which has been the market leader in accounting exam preparation for the past 60 years.
Product
CPA Exam Review - An online eLearning tool to prepare accounting professionals for the CPA exam to gain their certification.
Deliverable
New homepage service

Timeline
4 months
Role
UX generalist who covers the entire design process

Main Tasks
User Research, Data Analysis, User Experience &
User Interface

Becker CPA Homepage Redesign

Summary
Since its foundation, Becker's CPA exam review application had received very few homepage alterations. Accordingly, it became very outdated and not user-focused.

Time was pressing for a radical new homepage redesign that enhanced user engagement and tailoring the learning experience to the individual students needs.

Becker Professional Education
Becker Professional Education is a subsidiary of Adtalem Global Education (formerly DeVry Inc.) that offers educational resources for professionals in the areas of accounting, finance and project management. Becker is best known as the largest provider of training for candidates who are preparing to sit for the United States CPA Exam in order to become Certified Public Accountants.
Problem
The homepage was not reflecting the Becker's CPA course content quality. The homepage was lacking context, pertinence and usefulness. Had no add value to the student learning experience.

  • How can we create a homepage that keeps students engaged long term?
  • How can we guide students throughout faster and efficient learning periods in a friendly, personalized, informative, and engaging experience?
  • Can we reward and show progress without making the homepage to heavy or complex?
GOAL
Enhance the functionalities and provide a more efficient and useful homepage to guide the student learning experience.
Solution
We rethinking from scratch the homepage. Having in focus the student's learning needs, to optimize their studying process. We came up with a new, fresh and forefront homepage that enhances each individual student learning necessities.
Project Scope
In almost 30 years of digital existence, Becker have no more than 3 major homepage changes (images below).

The goals:
  • Identifying current constraints
  • Discover the most relevant problems
  • Redesign the homepage according to users and industry needs.
TEAM: Me and an Agile team comprised by 3 Developers, 2 Products Managers, 1 Software Developer Manager, and 4 Quality Assurance Engineers.
I played three roles
Management: I was responsible for determining the overall design direction; I define the design sprint; I wrote and managed Jira design stories and tasks. I was part of the design review sessions.

User Research: With a homepage so outdated, user research had to be conducted to gain insights on what would be users' on-demand needs.

Product Designer: I collaborate with the rest of the team on the ideation process. I analysed users insights either qualitative and quantitative and made design decision base on collected data and insights.

Key Problem

How can we guide students throughout faster and efficient learning periods in a friendly, personalized, informative, and engaging experience?

Constraints

  • A outdate homepage - Aesthetically, was a visual dumping ground which didn't do justice to the brand purpose
  • There was no structure to the content
  • It amplified confusion rather than coherence
  • A design team of one
  • Only remote access to users and stakeholders

Results

  • 74% increase in homepage engagement
  • 50% increase in users Novelty and Stimulation perception

My Approach

Design process
When you have a myriad of business requirements and constraints, a systematic approach is paramount. Design thinking with a proper kick-off allowed me to define the proper business vision. This was followed by discovery and delivery phases. This case study highlights key learnings.
Discovery phase
Aimed to understand and frame the homepage problem, collect requirements and analyzing the context of use. Deliverables: stakeholders interviews, user interview, affinity diagram, diagnostic mapping.
Delivery phase
Was the solution stage that made ideas tangible, usable and, hopefully, beautiful. Deliverables: wireframes & hi-fi prototype, design system deliverables.
Revamped Double Diamond, Revamped Double Diamond, a design process framework based on the Design Council's Double Diamond.
I like to base my design process on Revamped Double Diamond.

Design Process

01 Learn. Gain knowledge of users, context and business KPIs. Gather user data, surveys, research competitive products, conduct stakeholders interviews. 02 Explore. Build user profiles on gathered data, produce materials that will aid the outlining of the project, site maps, content inventories, screen flows, navigation models, task flows, user journeys, scenarios. 03 Select. Evaluate, test, and select wireframe concepts for prototype development. 04 Develop. Create design specifications and evolve concept/wireframes into full design solution. 05 Refine. Evaluate design with stakeholders to obtain feedback, conduct usability testing and surveys. 06 Deliver. Complete design and produce deliverables.

01 Learn

Gain knowledge of users, context and business KPIs. Gather user data, surveys, research competitive products, conduct stakeholders interviews.
PART I
Kick off to refine business requirements
"Requirements cannot be "gathered" from your stakeholders like Easter eggs — they must be defined, through research and scenarios." — Alan Cooper.
Contextual Inquiry / Data Gathering
1. Stakeholders Interviews

I started the process by conducting stakeholders interviews to collect insights and qualitative data about homepage business orientation. This was a simple way to understand stakeholder's wishes, knowledge, and expectations.

The interviews were based on Kim Goodwin list of role-based questions.
Interviwees: 2 Product Owners, 2 Mkt. Managers, and 1 Software Dev. Manager.
I used the talebook.io tool to remotely conduct the Stakeholder's Interview.
Next, we built some affinity diagramming and diagnostic mapping to help the team identify the root problems and pain points for the user.

The purpose was to help to evaluate how the lack of communication between the system and our users were harming the business KPIs.
Note: These tools are low-cost and effective ways of making sense of the current situation and generating design ideas and establishing business goals.
Contextual Analysis / Data Interpretation & Consolidation
1.1 Affinity Diagramming

Since we are a remote team, I always use Miro platform to build remote workshops.

It took us a few workshops with key stakeholders (the business) to understand brand vision, overall goals and challenges.

The exercise helped us group data into categories based on natural relationships. We grouped all the insights into two main categories:

  • internal: business needs, requirements, goals;
  • external: context, competitors, best practices;
Important Note: For privacy and competitor reasons, I am not allowed to share this dashboard real content.
1.2 Diagnostic Mapping

From the affinity diagram, we identified several problems.
We were able to group them into four categories:

  • Poor onboarding;
  • Lack of useful feedback;
  • Difficulty of assignments;
  • Lack of utility;
  • Lack of engagement;
  • Lack of social/support interaction;
  • Did not focus on one exam at a time;
  • Lack of AICPA guidance orientation.

We used diagnostic mapping to analyze these problems. This was an abductive process of suggesting explanations for those problems, as well as, fetching possible solutions to them.
Important Note: Diagnostic map was developed on Miro, taking the issues bubbled up from the affinity diagram. In the diagnostic map, we try to explain the causes, consequences, and ideas for solutions.
Insights

From these diagnostic maps, we have found that many of these problems were interrelated.

For example, poor onboarding will lead to difficulties in understanding assignments and thus lead to a lack of features utility and insightful system feedback. This diagnostic mapping process helped us to find the point of intervention.

We also explore ideas from other applications that exist in the market. Specially applications with great user retention with great user engagement. This was a good exploitation exercise to gather ideas that we could further investigate, and remix or tweak, to make them work with our current assumptions.
PART II
Quantifying Experience
Contextual Inquiry / Data Gathering
1. User Experience Questionnaire (UEQ)

To evaluate the current user experience, I decided to use UEQ as a method of measurement. This was a fast and reliable tool to measure the UX of the Becker's CPA exam review homepage.

This strategy had two purposes:
1. Collected meaningful data to look for new insights
2. Have data to measure the design success of the new homepage in the future.

Method
The scales of the questionnaire cover a comprehensive impression of user experience. Both classical usability aspects (efficiency, perspicuity, dependability) and user experience aspects (originality, stimulation) are measured.

Sample
The questionnaire was run on a sample of 150 students.

2. User Interviews

To understand the students studying habits we have conducted interviews with 5 Becker CPA students to gain insights into their goals/motivations, organizational strategies, study flow, and challenges in their studying habits within the application.

Method

We have adopted the contextual inquiry as our data collection method. In these contextual inquiries, we uses a series of semi-structured interviews and think-aloud tasks to collect information about the context of their usage with the application homepage.

In these interviews, we have covered questions and asked the interviewees about their study habits, how they organize their study process, how they keep track of their progress, and how do you optimize their study time.

We also took the opportunity to built an Identity Model for our students. Our model was built on the Identity Model provided by Holtzblatt & Beyer (2017, p.32), which showed the three main sections "I am", "I plan", and "I like".

Based on that, we also added an "I struggle" section, because we want to understand the pain points of the current homepage, and changed "I plan" to "I do" in order to better understand how they interact with the current homepage.

02 Explore | Discovery

Build user profiles based on the Identity Model data. Define the user flow for the new homepage, as well as navigation models, screen flows, task flows, user journeys, and scenarios.
To provide users with an enjoyable experience on the homepage it's important to anticipate their needs to provide relevant information to their learning process.

Therefore, different user types and their journeys informed the homepage structure. Thus, it was possible to simplify user's work-flows between the homepage and the rest of the application by removing unnecessary content and/or features, merging existing and adding new when needed.

Becker's OLD Homepage user journey
User Flow built in FlowMap
Becker's NEW Homepage user journey
User Flow built in FlowMap
Key takeaways

  • New Select Section page that allows you to choose the section of the exam you want to study for first.
  • Enhanced navigation to the Units and Simulated Exams
  • Inclusion of Proficiency Badges that show your overall section proficiency and your proficiency for each unit o Study Path information
  • Additional Resources section that includes CPA Exam Tracker, a Getting Started Video, a link to the section SkillMaster Video Library, and links to the most current versions of the AICPA Newly Released Questions and Course Updates
  • A footer with links to download Accounting for Empires, the CPA mobile app, and Final Review and links to Becker's Facebook Study Group

03 Select | Define

Evaluate, Test, and select wireframe concepts for prototype development.
PART III
Homepage Content Audit
Needs & Requirements / Extration
Once all of the planning and foundations were established, I was in the position of moving forward to start sketching our own ideas and concepts sketches for the new homepage experience.

One of our main problems and challenge was that the homepage lacked AICPA exam guidance. To solve this particular problem, I had to work closely with the product owner since the key to solve this problem was on her business expertise. The successful team-up was crucial to over trough this problem.
Design / Wireframes & Prototyping
1st Mockups

The main point: the homepage needs to convey to the student current course in focus and present to the user the guidance on what one should be focusing on their study. This information needs to be structured logically to allow users to scan their studying progress and proficiency quickly.
Content always comes first, once we know what the homepage needs to achieve we could then focus on elements and graphical composition.

04 Develop


I created the design specifications and evolve concept/mockups into a full design solution to forward be tested with a sample of students.
Once logic and functionality were defined, the visual design process followed the brand's visual guidelines and tone of voice. The brand has an enjoyable meditation on aesthetic and design quality, embodying a pleasant balance between the graphic user interface and the overall user experience.

05 Refine

I evaluate the design with stakeholders to obtain the final feedback. Them, we conduct an usability tests and A/B Test, complemented with a surveys.

I have built an interactive Invision prototype to test the concepts with the students.

The feedback we gather was valuable to move from the 1st concept (on the left) to the refine concept (to the right).

06 Deliver | Develop

Complete design and produce deliverables.
PART IV
The Delivery phase
During this stage, I took care to structured design guidelines to support the what and why of my design decisions. This procedure helps to justify design decisions to the team and deal with alternative opinions within them.

I also organized and provided all the necessary materials, guidelines, and recommendations for developers. In Becker, we were all a team. The culture was not ground in just hand over the designs and leave lots of decisions to the development team. On the contrary!

Made on
Tilda