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
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
Videos in the course: They were still Flash files! I recommended to reformat them to HTML5.
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.
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.
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