Design Documentation - SIMPLE Reconstruction
At the beginning of Fall semester, two biology professors at Stony Brook University came to the SBU Teaching Learning Lab asked for help. They found that SIMPLE, a SBU internal web app, was hard to navigate and use.
SIMPLE stands for Simple Image Mapping Program for Learning Everything. It is a web-based interactive app developed by Stony Brook University Teaching Learning Lab for internal academic use. Users can upload customized PSD files to generate customized content. This app was originally created for a Stony Brook University biology class.
We had a meeting with these two professors to hear about their "pain points" of SIMPLE. After the meeting, the Lab decided to reconstruct on this app.
My Role: I was responsible for visual design and front-end development. I was helped by Paul St. Denis, my supervisor and mentor, along the reconstruction process.
SIMPLE Upload Interface
The Problem
During the meeting, we identified three problems with the then-existing version of SIMPLE.
Interface was not responsive
1. The app was not web-responsive. Once windows size change, the interface would become distorted.
2. The selector game was not cursor-accurate. Sometimes the cursor did not highlighting the hovered part.
3. The typing game was completely broken and not funtional.
After we identified these mentioned problems, we realized that the last update for this app was back in 2010. The original developer was a SBU student and he already graduated. There was no way to get him back to work on this piece, so we decided to rework this app on our own.
The Challenge
This web app was developed with HTML, CSS, and Javascript. As we were examining the code, we found out the code structure was a mess. A real mess. A lot of redundant code. A lot of Javascript functions were poorly implemented. Multiple .css and .js files that were not effectively applied. After we identified the code files, we have concluded that to fix problems based on existing code was not a applicable and pleasure way, so we decided to completely rewrite the code, which means set up new code files and start from the ground.
The Process
To start off, we had to cope with three parts:
1. HTML structure
2. CSS decoration/style
3. Javascript funtions
Since this app is an one-page app (one HTML file), luckily, we were able to adopt the majority of original HTML code, and we improved them. HTML structure was redesigned for responsive layout.
For CSS files, we first cleaned up the code and created a unified single .css file.
Cleaning .css files
Then we adopted the main color tone (background-color) from the original file and rewrote the rest of it. We used responsive-standard syntax. We redesigned button style, integrated Google fronts, and rearranged component positions for a better visual design.
Redesign Button Style
As for Javascript, there were too many broken functions in multiple .js files. They were a mess. We realized this was the reason why selector game and typing game were not working well, so we replaced all .js files with one single .js file and rewrote all functions within this file.
Cleaning .js files
It was a quite challenging part, because we had to basically reconstruct all functions, but we did it. Hahah. That was the part I learned the most out of this app. I encountered Javascript libraries, and I realized how powerful Javascript was. For this app, we used jQuery frequently.
Go for an Extra Mile
After we finished reworking the app, we started to test its function. We iterated many times to fix visual and function problems. After we confirmed all original functions were working normal, the original goal was achieved.
Then, we thought about what could be added to the app. Since this was an app for academic use, users would be professors and students. This was a critical part that inspired us to add some academic-related features. After meetings and discussions with my supervisor, Paul, we came up 3 new insights:
1. Add a Win/Lost interaface at end of each game.
2. Embed a score system in the app.
3. Enable professors to access the score result.
To add the Win/Lost interface, we went back to the CSS file and made the interface. The challenging part was the score system. We created a score system function in Javascript, but how to let professors have access to the scores? My supervisor showed me how to use PHP and AJAX to generate the score as a .xlsx file and upload to server. That was the first time I had a hand practice on back-end.
AJAX and PHP Snippets
After we done adding new features, we iterated several times to fix some minor problems. Then, we did a full test on responsive layout, index game, selector game, typing game, and the score system. We confirmed everything worked well.
The Result
New interface with responsive layout
Video Demonstration
Mobile Compatible (iPhone 6, iOS 10.2.1, Chrome)
We sent an email out to announce that SIMPLE app was reconstructed.
After several days, we heard back from professors about visuals, so according to the feedback, we made some minor visual design improvements (font size, font positions, sizes of buttons/menus).
After we received approvals from professors, we delivered SIMPLE to the university's app server. Since then, SIMPLE has been widely used among Stony Brook University natural science curriculums (biology, physics, chemistry, etc).
SEE IT ALIVE
Learning Outcome
There is no doubt that I learned a ton out of this web app. For design aspect, I gained a better sense about visual layout. For front-end, I learned about responsive layout and reinforced my HTML/CSS skills. I encountered Javascript library, which I realized how powerful it was. It has so many choices to implement various functions. And for the first time, I had a hand practice on back-end. My supervisor, Paul, taught me how front-end and back-end work together. I had access to the university's web app server and gained insights about how to manage contents in a large scale environment. Paul also taught me a lot about shell scripting. I was able to access the app server via command line. Special thanks to Paul, Thank you. :)
Prev Next