Citizen Science: Final Design
Introduction
Initially we began through our normal planning phase, mapping our the process, tossing ideas onto the board and criticizing them until one stood left. That idea was this, .dirtyCode, a website which is directed at people who are interested in working on their coding skill or who are simply eager to help others out by cleaning and fixing their code.
Once the idea was finished we began the initially stage of designing it, the flowchat. Through this process we determined what stages were necessary for the app, and from this we determined what design steps to take in order to make a prototype which is convincing and works the same way the real website would.
Thus, the original design was begun and then tested using interviews we had prepared alongside accessibility tests to ensure that our users were not incapable of using .dirtyCode. Now, we are on our final step. The final design which was created using our own creative initiative as well as input from our interviewing subjects.
It is also unfortunate to note that we did not keep pictures of the past design and this will only be able to show some changes that were made in comparison to the older design.
Changes
In order to create a better design many changes needed to be made. Some of these included cleaning up the home page and making it easier on the eyes and less of a stretch to read. Others included adding features into our settings menu which would assist those who require accessibility features. Some were done in order to differentiate between users, and codes.
Change 1 : The Homepage
Original Homepage Design
Concerning the homepage, some design choices were made to make the important bits of information stand out above the rest as well as certain blocks of information moved. An example being the block on the bottom of the page titled “Join Today!” Which features a button that takes the user to the login or registration page. This box was moved closer to the top of the website so that users would be able to find it easier. Other boxes were then resized to fill up less of the page and make content easier to scan. Before the layout required more eye movement to reach from one end to the other. With the new design the users of the website can scan the information more freely without the extra strain.
Newly Designed Homepage
Change 2 : The Profile and Sign-in Button
Old Design for Profile Button
This button ended up being a multifunctional button which would first allow you to login or register for your account. Once logged in it double as a way to access the settings, leaderboards, and unlockables. This information was not clear with the original design, although clean, it did not have a clear indication of its purpose. Thus, it was updated to include a silhouette of a person in order to signify in the universal way-finding language of “user” that the button was a profile and sign-in button.
New Design for Profile Button
Change 3 : The Settings Menu
Old Settings Menu
Although this change isn’t necessarily one aesthetic in nature, it was created with accessibility in mind. During the original testing it was found that when the screen is dark the text in smaller areas of the website were difficult to read. However, in normal light this text is easy to read. In order to compensate for this we added a text size and bold text feature which allows for the user to either make the text bigger, smaller, or add emphasis to it.
New Settings Menu
Change 4 : The Comments Section
Unfortunately, this is one of the edited pages that we do not have an old copy of. Originally, on the right side of the page where the previously edited, and voted on versions of code stand there was no way to find out more about the user and who they were. In order to clean up this area as well as add more relevant information a text bubble was added beside their image to detail their name and their experience as a coder with titles such as “Jquery Beginner” or “Expert.”
New Comments Section
Change 5 : Skip!
Old Coding Area
Another piece of advice from our interviews and instructors were that there was no ability to skip. When it comes to learning to code, or coding in general there will be times when a line of code comes up that is indecipherable to a certain user. A lack of a skip button creates a burden for this process as it forces the user to become stuck which could cause them to quit the website until a new code is given to them or indefinitely. A new design was implemented which is simple and grays out the Submit button until text is put in the field or until a line of code is completed and debugged. Alongside the new gray Submit button is a Skip button which now lets the user skip the current line of code.
New Coding Area
Change 6 : Progress Indication
Old Coding Area
Before, we had no prototyped variation of how you earn points, how many points you have, or how they work in the grand scheme of things. This was an issue we had overlooked and have now added indication for. The new design includes a progress bar which pops in after you click submit on your code. The bar fills up and tells the user how many points they have left until they level up to essentially unlock a “unlockable” item.
New Coding Area
Change 7 : Menu Options
Old Menu
Another detail which was neglected is the ability to return to the tutorial in case you forgot about a certain area or didn’t fully understand an idea. In order to fix this we added a button which allows for easy access back to the Tutorial right inside of the menu.
New Menu
Conclusion
Although these are most of the changes made to the website, as with any project more changes are possible to be made. It terms of accessibility to user-friendly experiences there is never an end to designing to create a better, more inclusive experience. Altogether, the process of creating this website has been enlightening for several reasons but above all is learning how to handle settings for people who have the possibility of struggling with websites which most people take for granted.
