MOBILE WEB DESIGN

 
 

Checkpoint Learning is an online Continued Professional Education (CPE) platform for accountants. To remain competitive, the desktop-only solution needed to be optimized for iPad.

I was tasked to design a responsive web training solution optimized for the iPad, which would integrate onto the existing Checkpoint Learning platform. The solution would provide customers with the convenience of learning anywhere, at a desktop and on the go. For TR and the CPE industry, a mobile-friendly CPE solution was ground breaking. No competitor offered a mobile solution at the time. 

 

Design Highlights

  • User Empathy

  • A rebranded app with new UI and UX

  • Mobile optimization

  • Delivered 40 screen designs for iPad

 

TEAM

Lead | 1 VD | 2 UX | 1 Accessibility

MY ROLE

Project Lead, Planning, User Research, Personas, Stories, Journey Map

 
 

Before and After

 

BEFORE

AFTER

 
 

Planning the Project

An initial discovery of the project gave me and the team an understanding of the requirements, business goals, product roadmap, identify the stakeholders. We worked together to integrate the design process into the roadmap.

While the business goal was to optimize the platform for iPad, the team seized the opportunity to provide a fresh new UI and experience, and re-develop the course media into a light format for playback speed.

Technical Requirements

  1. Videos in the course: They were still Flash files! I recommended to reformat them to HTML5.

  2. iOS or mobile web? With iOS apps limited to 50Mb (back then), a full native app was out of the question due to the high video content of courses. The team turned to mobile web as a quick solution towards a responsive platform, planning a full native app the following year.

  3. Target device and browsers: iPad 3rd & 4th generation.  IE 8, 9, 10, Firefox, Chrome, Safari 5.1.7 and iPad Safari

Success Metrics: customer retention and user task success

  • Customer retention rate > 95%. From a Product standpoint, the overhaul of the design and development of the mobile solution would provide a competitive advantage, ensuring a customer retention above 95% at the end of a 6-month period following launch.

  • Task Completion Rate > 85%. From a Design standpoint, I anticipated the new product to delight customers from a UX point of view and chose to test the effectiveness, ease of use and level of delight of the new UX and UI with a task success rate above 85%, along with standard usability measures.

 

Research

Research was my task. Pre-design, I used existing extensive research to identify our target audience, and to test our designs through qualitative interviews with customers.

Understanding our User, the Certified Professional Accountant

We reviewed the CPA market and existing insights on customers who consume CPE on Checkpoint Learning. We learned that Continued Professional Education (CPE) is required for Certified Public Accountants (CPAs) to maintain their professional status, corresponding to at least 40 hours of CPE per year and a total of 80 hours every 2 years.

Demand for mobility and improved learning time management

Research showed high demand for mobile, especially iPad for its device size allowing for long form reading. As such, customers expected to find and take courses on desktop and mobile, with the same familiar experience across platforms and synchronized content.

These insights helped us define our persona, Melinda, and her journey through continued education with Checkpoint Learning. 

 
 
 

Creating User Stories

Based on the research, we identified 5 key goals for our persona, from which we derived user stories.

Key persona goals:

  • Make intelligent decisions about the right courses to take

  • Prioritize courses based on credit (time)

  • Have the convenience of learning on the go to accumulate hours faster

  • Manage time efficiently throughout a course

  • Fail smart, and learn from test errors

 
 
 

Design

We sketched out the user flows based on our stories, created wireframes which we tested internally with the project team, leading to some iterations. With a signed off version, we built our visual designs using familiar iPad design standards and interaction behaviors, along with the company’s guidelines for responsive web design, web accessibility, and Branding.

Deliverables for development

  • Wireframes

  • 40 iPad unique screens

  • Visual design

  • PSD files

Final Responsive Web Designs, in iPad Browser

 
 
 

Sprint Development & Testing

The project design team sat with the engineering team to walk through each visual design screen, and review the intended experience. The designs were developed in sprints over the course of 2 months, during which designers — myself included, reviewed and QA’d each completed sprint to ensure the solution worked as intended from a user standpoint. Small iterations were made during this stage.

 
 
 
I can’t wait to start a course on my iPad while I’m on the train to work!
— Jaimie, CPA in Denver
 
This is amazing! I can see my whole staff being more efficient with their CPE.
— Kevin, Accounting Manager
 
 
 

We tested the full solution upon final implementation with 7 CPA customers based throughout the US, with 3 on a desktop and 4 on an iPad. Overall the feedback was positive and the task completion rate was 87%, demonstrating an elegant interface with ease of use, convenience of the mobile format, and uninterrupted playback of the videos which had historically been a customer complaint.

From a usability standpoint, all aspects of the experience tested positive, with the exception of italic format of video captions, found to be difficult to read on iPad. We fixed it.

Would you recommend Checkpoint Learning to friends and colleagues in your network?

7 out of 7 responded Yes!

 
 

 

My Role in the Project

Leadership:

  • Project planning

  • Relationship with stakeholders throughout project

  • Oversaw design execution and production resources

  • Updates on project progression with stakeholder team and engineering team

  • Ensure deliverables are produced on time and to a high standard

  • Coordinated app auditing with a multi-functional audit team to ensure compliance of design and development guidelines, as well as any legal implications.

Design participation:

  • Research, inc. product team interviews, persona, journey map, user goals and stories

  • Ideation, brainstorming facilitation

  • Paper sketching of user flows

  • Review of wireframes, high-fi visual designs, QA of implementation

  • Testing / 1:1 interviews with customers