MR.E

OVERVIEW

Mr. E was a project I finished in the senior year of my undergraduate. In SYSU (Sun Yat-sen University), students are mandatory to do commonweal activities for more than 50 hours each year, which will act as their credits for graduation. Mr. E is a digitalized system for this process. Charity organizations can publish their activities and students can apply online. After the activities, students can also receive verifications and comments for their activities. 

PROBLEM SPACE

Since 2012, 50-hour commonweal activities are required for graduation. Students can only get the activity-verification from the organizers, most of which are student-based associations. However, SYSU does not have an official system to manage the verification. Students have to contact the associations for verification and all of the files are paper-based, which are difficult to keep and communicate. Hence, an efficient management system is lacking. 

Furthermore, organizations usually post their activities on the bullet boards and they are easy removed or covered by other stuff. They are just easily ignored by people. 

IDEATION

We started the brainstorm by clarifying the potential storyboard. Mr. E should be an website that could help the organizations and students to improve the management of the commonweal activities, from posting to verification. For students, they can apply activities online and get the digital verification at the same place, rather than contact the publishers individually. For associations, the website can automatically generate the verifications, so they don't have to repeat the process for each students. For the graduation office, the system can sum up the quantity of commonweal activities, which will make the verification process more efficient. The storyboard for the new process would be: 

WORKFLOW

Before diving into the low fidelity design of the application, we settled the information structure on the workflow. We divided the system into basic operations as Login/Register, Publishing, Joining, Checking and Verifying: 

LO-FI PROTOTYPING

With the insights of the workflow and several rounds of brainstorming, we took the pace to the low fidelity design. This gave us more detail of the big picture of this system. We started with wireframes on paper, then we used them to get feedbacks from the organizations and students. After a few times of iteration, we figured out the most feasible version of the prototype: 

HI-FI PROTITYPING

We set green as the main color in the high fidelity prototype. To remove distractions and keep the interfaces as clean as possible, we only used different grades of grey as well as black and white to construct different parts of the UI. 

In the Login and Register pages, I used a big picture of hands as the background, which can raise the empathy of users. It can also give users a sense that this website is about "charity". 

In the home page after logged in, the poster will be set as the background of each commonweal activity. People are more sensitive to pictures than texts, so we used this way to better pass the information. In the account information page, the activities are organized in a timeline. By using different color to show the status of the activities, it would be easier to manage the events. 

To verify the participation of students, organizations just have to choose the participators or upload a pdf file to the system. Then edit the Verification letter and send them back to the students.