Enactus SFU
Creating a design system from the ground up and designed the website UI.
As part of the global organization Enactus, Enactus SFU is committed to expanding sustainable projects each year, empowering students to develop entrepreneurial skills and become future leaders. Through its website, Enactus aims to raise awareness of its mission and attract sponsors to support students on their journey.To streamline design and development, I created a comprehensive design system. I also collaborated with another UI designer to design the website’s user interface.
01
Overview
Role
UI Designer
Contribution
Design Systems, UI Design
Tools
Figma
Duration
August 2024 - October 2024
Final Website
02
Components Overview
03
Foundations
— Offering help
To accept a volunteer’s offer to help, users can start by chatting with the volunteer through in-app messaging. After the conversation, they can officially accept the offer right in the chat. There's also a location-sharing feature to make coordinating resource drop-offs easier.
Accepting an Offer to Help
— Accepting an offer to help
In the Activity page, within the Request tab, users can see an overview of notifications and the status of their posted requests for help or offers to provide help. The My Requests and My Offers pages allow users to view and track their current and past requests and offers.
View Activity and Notifications
— Viewing activities and notifications
The prototype was evaluated with six participants, and the gathered insights were used to refine the features.
The study aimed to assess how easily users can find and use the app's most vital features to accomplish primary goals. Usability targets were identified, and participants from our user demographic were given realistic tasks to complete using the Think Aloud method.
04
Usability Testing and Improvements
Update: Make a help request
Problem: Users were confused as the term 'request' was used in multiple sections, such as the explore page and request tab, leading to ambiguity about which requests were theirs and which belonged to others.
Update: Icons were added to make the request feature more noticeable in the requests tab. Copywriting for offering help and posting requests has been revised to differentiate the two.
Update: Offer help
Problem: Users were confused between projects and requests, making it difficult to find request posts they could help with.
Update: Content design was restructured to make finding request posts easy and memorable.
Update: Viewing activity to accept help offers
Problem: Users had trouble distinguishing between notifications for offers to help and acceptances, making it cumbersome to accept help offers.
Update: The Explore tab was changed to the Activity tab to give users a dedicated section for viewing responses to their help requests and offers. This restructuring emphasizes understanding who is offering help before engaging.
note: the highlighted content above are only the major fixes part of the several identified issues. This presentation slide deck provides a detailed breakdown and solutions for all the problems we discovered.
During this project, I conducted my first usability study, and it was an enlightening experience that taught me the importance of user-centered design. Despite our assumptions about the app’s usability, direct user feedback highlighted issues we had not anticipated. This process made me realize that our assumptions about how easy the app might be to use for end users only made sense to us as designers, as we were part of the design process from start to finish.
Although I designed the app with the end user in mind at every step, the final product's usability could only be confirmed through testing. The usability study uncovered critical areas for improvement, allowing us to integrate user feedback and create a more intuitive, efficient, and enjoyable user experience. This experience reinforced the need for continuous testing and iteration, ultimately leading to a more effective solution for our users.