PyAccountant: Redesigning Programming Education for Accountants
A Python coding tutorial specialized for accountants.
Accounting is about the results, not the process, yet too often tedious tasks like data entry can hinder the speed and accuracy of accountants. The need for programming is there. Yet when programming knowledge is actively pursued, the delight of exploring is often overwhelmed by a sea of arcane prose written by the pros, leaving accountants and people without prior programming knowledge a high barrier to start coding.
PyAccountant provides an opportunity for accountants to try coding for the first time, and it lowers the barrier to exploration in the world of code. PyAccountant rekindles playfulness, inspires curiosity, and engages with users through vivid stories and analogies, to invite users to try coding and automating tedious tasks like data entry.
Project Background
Our project, named PyAccountant, is a specialized coding tutorial project created by Ken Chiu, Ty Feng, Jingxian Wu, Albert Tung, and Chi Zhang. This website was our final project for CS160. Our aim was to build a website and help users learn coding in Python by using a novel storytelling method to facilitate learning.
Motivation
Computer science is becoming more and more important as computers become more commonplace, and automation becomes the norm for previously time-intensive tasks. Due to the popularity programming, online programming platforms have been created. However, People from different fields may have different experience in coding,and have different expectations for code. For example, among our target users, accountants, there is not a particular need for understanding programming ideas outside of procedural programming. Most accountants have minimal coding experience, despite its possibilities for automating data entry tasks. Due to the lack of programming experience among accountants, and the clear importance of programming in the future for accounting, we decided to tackle this particular market.
Brainstorming
Our group initially started by creating a list of fifty ideas. Following this, we discussed which idea had the strongest user need and fulfilled project requirements. We narrowed our options down to seven ideas and continued questioning need until we decided on a coding interview app. In order to narrow focus, we decided to cater to accountants who needed to learn how to code. Initially, our idea was only to create a story about an accountant, believing that using him to relate programming concepts to the real world would draw accountants to using our website.
Persona
Tax accountant
A middle-aged tax accountant who lives in the Bay Area. He currently spends most of his day inputting data for customers into TurboTax (especially during tax season). He does not see many opportunities for advancement, but thinks that, with proper programming skills (to automate tasks), he could spend much less time on simply inputting data and spend that time on personal and professional development (networking, conferences, meeting with friends). He doesn’t know where to start. The last time that he looked at programming, he just saw something about… “Foobars?” It seemed pretty impractical.
Peer critique
In order to gauge the effectiveness of our website design, we performed three cognitive walkthroughs in order to determine how well-made our user interface was. Common complaints were that “Steve” did not seem particularly useful or well-made. In fact, one user even wanted to remove Steve entirely. Our group continued to brainstorm for ways to make Steve more relevant, as having him was necessary to fulfill project requirements.
Refined Wireframe
The wireframe that we initially used for our cognitive walkthroughs with users. Ultimately decided to merge the first and third columns for a cleaner interface, and to blend feedback and story into a single element.
Project Logo
Implemented using Adobe Illustrator. The logo is in monospace to emphasize the coding aspect, while the horns indicate the demonic theme.
Medium Fidelity Mockup
Try interacting with our Adobe XD mockup:
Implementation
The technologies that our group used, aside from basic web technologies, were JavaScript and BootStrap. Our server was hosted on Cloud9 and was run with Django. JavaScript was used in order to check the user’s answers and to provide hints when necessary. The choice of JavaScript was informed by the need to keep a consistent page and to provide the maximum amount of interaction. Bootstrap provided the necessary technology to smoothly and seamlessly separate the columns, while providing built-in styling in order to maximize productivity and style. In order to find our color palette, we resorted to using “colors.io” in order to discover one. For our index page, in order for users to select a chapter, they would click on the corresponding element in a large image, where each of those regions was mapped to a link using “map” in HTML.
Only the implementation remained. While our group was on track to complete the project, there were several issues with CodeAnywhere. Based on instructor feedback, our group ultimately decided to use the Cloud 9 interface for coding our project.
Try our high-fidelity, fully-functional prototype here:
Description of application
Our final implementation begins with a chapter outline and six chapters of coding material. Each chapter consistent of a single web page, with columns and buttons provided by Bootstrap.
Our chapter outline was intended to be similar to a journey that took “Steve,” our accountant character, from a junior accountant position to a senior accountant position.
Each of our chapters consisted of an introduction paragraph, pictures for the story on the left-hand column. The right-hand column was reserved for instructions for input, hints, and buttons to “run” code (via string matching), toggling hints on and off, and going back to the previous chapter.
The top bar (also implemented through Bootstrap) allows users to either go back to the outline page or to go to the next chapter.
To learn more, go to project website: pyaccountant.tyfeng.com
