CSR Platform

Designing the interface of a platform aimed at improving the management of employees in corporate social responsibility

Over the summer, I had the opportunity to intern at an early startup focused on creating an online platform to enhance and improve employee engagement in corporate social responsibility (CSR). The platform was to be rolled out in three different stages, from a minimum viable product (MVP) to versions one and two.

Within the design team, I was able to work with two other people, as well as a design lead who supervised our work.

ROLE

Designer

TIMELINE

June 2020 - August 2020

TOOLS

Figma

Corporate social responsibility helps engage employers and employees with causes that matter to individuals and contribute collectively to the community.

For employees, one aspect of their work that matters to them is the values that the company holds and how they act upon them to impact the community. With vast influence and access to resources, companies are uniquely positioned to be able to contribute to solving issues affecting everyday society, from social justice to hunger and homelessness. As a result, corporate social responsibility within the company culture is crucial in attracting like-minded candidates who can help contribute towards helping the local community. However, to effectively coordinate various ways to engage in corporate social responsibility, it is just as important to have a platform within the company that can help effectively manage these activities, as well as provide employees with many options to get involved.

My contributions

As a member of the product team, I engaged in daily meetings with other interns and fellow project managers to discuss and understand the next steps to take in further understanding potential users of the platform. I helped develop various use cases and user stories for the MVP in conjunction with my respective project manager. Furthermore, I was a part of the design team, in which we were responsible for creating wire frames and high-fidelity mockups on Figma that corresponded to the requirements and objectives set out from use cases for each version.

Main users

Prior to creating designs, the product team discussed that users of the platform would be divided into two general types: regular employees and human resource (HR) department members. Since HR members are also regular employees, we would design additional interfaces for HR members.

The HR department members would be responsible for helping employees accustom themselves with the features on the platform, so it is important that they are able to easily understand the design regarding their role. This is to ensure that they will be able to properly exercise their administrative privileges to not only regulate settings but also access important information regarding all activities conducted through the platform. However, since HR members are employees as well,they are also able to access the employee view of the platform.

Displaying organizations/causes

In creating the display pages for organizations and causes, I created rough wireframes, in which I contained each organization/cause within its own rectangle for a consistent and orderly display of options for users to easily browse through and choose. A larger rectangle taking up more screen width was used to contain causes, since a cause represented a broader focus than a single charity/organization and deserved more space to provide a brief description.

Donating to an organization

In donating to an organization/cause, I decided to contain the entire process on an overlay to convey a feeling of impermanence to the users. This is to ensure that even though they are currently engaging in the process of donating, they can always retreat and cancel their transaction while being returned to the same scrolled position they were previously at. The information displayed on the overlays were chosen to ensure that the users can see all relevant information at each step, as well as abiding to general conventions seen on other donation platforms.

Table design for HR

Record of employee donations and matched amount

In discussing prospective components of the interface for HR members, the design team discussed what is important for HR members to know and be able to do from their end when it came to overseeing corporate matching, from the basic information of each donation to the ability to download receipts of all matched donations. The features and capabilities of HR members effectively shaped the process in which they will engage with regularly on the platform.

In designing the table, I aimed to provide a sense of control over both individual and aggregate data. I first arranged the data in a tabular arrangement free of borders for a sense of spaciousness rather than confinement. For every column, I added a filter option so users can use them to search through and display specific portions of data.

Filtering through data of matched donations

Searching for volunteer projects

Searching for a volunteer project and joining

To search for a project, I used an overlay and selected cause type, duration and registration deadline as search criteria, as the team believed those are the most important attributes of concern for users when choosing a volunteer project. Cause type options would derive from the existing set on the platform to ensure users pick a valid option. Each project display would be similar to that of causes, to create enough space to display information used as search criteria. Upon clicking on a volunteer project, users will see more information regarding the project displayed on an overlay, from an extended description to registered employees.

Creating volunteer projects

In-person and remote options in creating volunteer projects

Similar to most other procedures I designed on the platform, I placed project creation onto overlays. From out design team discussions, we decided that volunteer project creation will not be limited to HR members to allow for a wider range of participation and input from regular employees. Information required to create a volunteer project is dependent on the location of the project, between in-person projects and remote projects.

Discussion Page

To enable further discussion among employees registered for the same volunteer project, we devised the concept of a discussion feed page. On this page, information regarding the volunteer project would be displayed once again, along with a roster of registered members. A discussion feed will dominate the page, in which members can post announcements to either inform others or ask questions; other users will be able to respond to a post, with a structure similar to that of social media platforms. For newly-created projects, an empty discussion page is automatically.

Empty discussion feed page, created for new projects

Once an employee creates or joins a volunteer project, I wanted to provide options to spread the word of the project by sharing. Other than targeting individuals, I wanted to find a way to be able to share the project with large numbers of people in a simple process. As a result, I created the option to “invite people” and “share to communities”, with the words “invite”and “share” carefully chose to differentiate the volume of the target audience.

Inviting people to the volunteering event

Final Thoughts

My previous experiences in incorporating my understanding of requirements and user interface design was finally put to the test during the duration of the internship. While I have previously worked with making prototypes for mobile interfaces, being able to work with a larger screen dimension unlocked more challenges for me, as I had to carefully consider the use of more screen space. Furthermore, I gained a better understanding of the process and expectations of creating a product meant for release into the market.

While the startup has been restructuring and redefining their purpose, it is doubtful that the wireframes and high-fidelity prototypes I constructed with the design team will ever be rolled out. However, the process of working with a startup and creating content from scratch was a valuable experience that has left me better-equipped with more understanding of user research and user experience in industry.