Boys Who Write - Capstone Project

Capstone Project commissioned by UofT and Shaila Kapoor

Further work commisioned by Shaila Kapoor

Group Members

David Buckley

Lucas Luoma-Uhliq

Jordan Lum

Etika Omoafor

Ryan XXX

My Role

Engaged in secondary research directed by the client and helped develop and conduct stakeholder interviews to better understand the problem space
Helped build models to demonstrate our findings to the client
Led the teams communication with the client in aligning and refining the web platforms feature set/requirements, alongside the style and vision
Assisted in the development of the high fidelity prototype in Figma
Planned and developed the instructional demonstration video of the web platform prototype

At the end of the project at our clients behest our team created a promotional video the client could use to show off the prototype in funding pitches. This video demonstrates both the culmination of research and collaborative work we engaged the client in to shape the direction of the project as well as a look at many of the completed high-fidelity screens we designed form the ground up.

Project Overview

"Boys Who Write - Fostering the Power of Connection"

The final project of our masters degree tasked us with working alongside university selected external clients in teams to help them achieve their unique and specific UX goals.

Our client was an entrepreneur attempting to get a non-profit organisation off the ground, an organisation that would would try to connect young boys with mentors and peers through an online platform hosting writing/reading clubs and other literacy related activities.

We established project requirements alongside our client, and focused on conducting some limited research to help shape the direction of the project, then created high fidelity mock-ups of the platform for them to use as marketing tools when seeking funding, the current highest priority endeavour for the client.

With our services extended by the client following the summation of the university project, we created a comprehensive, clickable prototype, demonstration video and mock-up landing page for the fundraising website.

Video Presentation

Discovery Phase

Understanding the problem space with our client

The first stage of the project involved discussing the clients goals and expectations. Because of their limited knowledge of UX and our expertise, it was our responsibility to work with them to create a realistic roadmap and plan for what we could achieve within a limited timeline that would still provide them with real world value.

We first aided the client by conducting secondary research through semi-structured interviews with target user groups ( ten boys aged 12-17 and a parent), as well as separate interviews with teachers of that age group. This research was crucial, but limited due to the challenge of recruiting in such a short time period, with 10 interviews with boys and 3 teachers.

We then built several different artefacts and models to present our findings back to the client, including user profiles, persona's.

Define Phase

Research Findings

While there were some limitations in the breadth of our research, namely a lack of economic diversity in participants, we still were able to identify some potentially useful insights for the client. Firstly our research suggested the target demographic skewed too old, with activities and interests largely solidified by the time boys reached high school. A second important point was that mentorship was seen as an emergent benefit, but not something parents or boys sought when selecting extra-curricular activities. Both of these could be used to refine the direction of the organisation.

Project Scope

The team worked with our client to develop a concrete scope and roadmap for the project, to ensure we would deliver something of value within the time frame, without over promising. This involved making a concrete list of screens and features we'd develop, alongside a roadmap for delivery.

Aligning on Aesthetics

We met with the client to discuss the visual direction of the web-platform. The client gave prompts such as "dynamic", "exciting" with the general brief that it should appeal to young boys without hyper focusing on masculinity. Collaboratively, we agreed upon a look we would use in development.

We created a rudimentary style tile to showcase the basic look we agreed upon, which we refined and built upon up until the end of the project as a tool the client could use to show any future designers or developers she might bring onto the project.

It was our aim to make high-fidelity mock-ups for the client to use as marketing material, which necessitated a large amount of high quality illustration, something we lacked the time and skill for. We used Midjourney, an AI art tool to create art we could use to populate the proto-type. As a team we had great success with this as it's a very powerful tool, but did urge the client to budget for and invest in designers if the platform ever went into full development, to ensure a cohesive visual look across the platform, to support the industry and to increase control they would have on the final product.

AI art

Design Phase

Design Process

Our approach for this phase of the project was to operate in weekly sprints, providing nearly completed screens to the client each week in feedback sessions, allowing the opportunity for revisions while we simultaneously worked on the next batch of screens.

Prior to the first sprint we created some low-fidelity layouts to make sure we were staying consistent with our work, and to ensure we were paying enough attention to the information architecture of the platform.

The design process was collaborative and very iterative, with a larger focus on the dashboard as the focal point of the platform. Below is an example of just some of the development the dashboard went through.

Final Product

This is our completed screen for the dashboard. It combines the modern, sleek colour scheme we envisioned and utilises bright and engaging illustration to create a sense of fun. Subtle signage and use of colour helps show the user how to navigate around the platform, with careful consideration taken to the hierarchy of information on the page. We also included many micro-interactions to help make the screen feel alive and responsive. I've also included a couple of other screens below, more of the prototype can be seen in the latter half of the promotional video shown at the top of the page