At the beginning of Fall 2016 semester (August 2016), 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.
During the meeting, we identified three problems with the then-existing version of SIMPLE.
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.
To start off, we had to cope with three parts:
1. HTML structure
2. CSS decoration/style
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.
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.
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.
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.
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).