...
Picture | Description | |
|---|---|---|
| Login page. | |
| Creating a new account. From the heuristic evaluation we found some bugs in password checking that we fixed, as well as adding better descriptions for the requirements of the password. | |
| The "Edit" page. This is the starting point to begin editing a resume. We added a logo which was lacking prior to our final design. We also added buttons next to each bullet point both to move them up or down or delete that bullet. | |
| Checking the boxes next to a section will expand or contract that section, and add or remove it respectively from the final resume. | |
| One of our strongest usability features which was suggested to us early on during the paper prototyping phase is to be able to click directly on text to edit it. The text can then be edited in place and persisted on the page and in the backend without refreshing the page. In addition, the text is a grey color default, but once it has been edited it becomes solid black. | |
| Viewing a resume that is built dynamically from the database. | |
| Lightbox viewing of a picture. This was a design decision where we considered various options. For example, we strongly considered inlining the media. In the end, based on our user population and from paper prototyping feedback, we decided to use the lightbox option. It allows the user to quickly read the resume itself and only choose to view the media that interests them. | |
| A similar view showing lightbox viewing of an added video. | |
| Similar lightbox view of supplemental text. We used feedback from paper prototyping to determine what kinds of media we should support. | |
| Lightbox view for adding supplemental media. The look of the buttons at the bottom has been modified to comply with the look and feel of the rest of the website to give an overall consistent look. |
Reflection
Throughout the course of this project, we learned a substantial amount about the challenges in iterative design and also in software project management. This was the first time that any of us participated a project of this type – with a fast iteration cycle and a variety of media. If we were to do this project again, we may spend more time initially brainstorming and "verbally" prototyping ideas. This would allow us to really think through an idea before getting into design; additionally, our project could have benefitted from a clearer vision from the start.
We worked very well together as a team, which made the process go very smoothly. Having worked together for 6.005, we knew what the relative strengths of each teammember were. However, what we didn't know is how much the gap between our skills would factor in to our success. Ultimately, the hardest part of the project implementation was not in the complexity of the backend or the details of the frontend, but in putting the two together. We would have greatly benefitted if all of the members would have been better more well versed in all the technologies we used (PHP, HTML, CSS and JavaScript), as a better understanding would have enabled us to be more successful at bridging the gap between the different components. And as always, we could have used more time (and started earlier).
When deciding which features to prototype, we looked at the core tasks that a user might perform. The two obvious ones were creating a resume and viewing one. From there, we thought the two most interesting challenges were how to make it obvious to the user that they are inputting text and how to make a simple interface for attaching the files to a resume. We had to encourage users to speak up about their thoughts when testing the system in order to get useful feedback.