SFU Bulletin
Try it out!
The SFU bulletin board is an SFU web service system that allows students to post their flyers virtually, providing students a new way to check out the new events around the campus. The main motivation for the project is to deliver the functionality of sharing posts digitally and without the extra hassles of looking at a messy bulletin board littered with outdated and unrelated posts. With this project, we engineered our user Interface so that users can quickly log into the system, find the post they are interested in and share it with others without experiencing any challenges and setbacks.
Tools and Skills:
- User-centred design (UCD) process
- Adobe Illustrator — Create graphic elements
- Figma - Construct prototype
Specifying Context
Context Identification
First step is to describe the situation or environment that influence decisions, impose constraints and implications to the design for it to adhere to through when/where/who/what/how.
User Identification
I came up with two personas to describe the people who carry out tasks and make decisions, provide insights into their approach or attitude towards an interface and what affects their judgments.
Design Sketches
The first set of sketches were made as a mobile application with the following functional requirements and non-functional requirements.
Functional Requirements:
- SFU account syncing
- Text and image submission
- Content searching
Non-Functional Requirements:
- Prominent buttons
- Post length limit
- Post moderation
Low-Fidelity Prototype
In the next iteration, I created the low-fidelity prototype using the identified users, their tasks, and the requirements. The design illustrates how my interface would appear to them.
Using the wireframe, I conducted a usability test with think-aloud and Use Experience Questionnaire (UEQ). I had them go through the wireframe while verbalizing what there are thinking at the moment. After the test, I give them the UEQ questionnaire to fill out. This produces a general impression towards the whole interface design.
Medium-Fidelity Prototype
I converted the low-fidelity prototype into medium-fidelity prototype with Figma while considering the evaluation results from UEQ. The functional and non-functional requirements have also been updated.
Functional Requirements:
- SFU account syncing
- Post sorting
- Content sharing
Non-Functional Requirements:
- Fast and familiar SFU authentication page
- Clear and intuitive visuals for post filter based on popularity and date
- Confirmation for sharing action before redirecting users
Cognitive Walkthrough
To evaluate the prototype, I conducted a cognitive walkthrough with the following steps:
- Come up with the context and a scenario
- Determine who the target users are
- Create three representative tasks
- Conduct the cognitive walkthrough by asking the participant to perform the tasks
- Summarize findings from the cognitive walkthrough
Demo Video