Role

Product Designer
Team

1 Product Manager
1 Project Lead
2 Product Designers
4 Developers
Duration

4 months
(January 2021 - April 2021)

What is UW Blueprint?

The Client
UW Blueprint is a team of students at the University of Waterloo dedicated to building and promoting technology for social good. Many NPOs do not have the resources of budget, time and expertise to create technological solutions. UW Blueprint partners with non-profits to provide technology services such as websites, mobile applications, analysis tools.

The Problem

UW Blueprint's diverse team of Product Managers, Product Designers and Developers deliver high-quality products and services for all their clients. However, UW Blueprint is struggling to attract the interest of Non-Profit Organizations to collaborate and create technological solutions for their processes.

The Question

How can UW Blueprint leverage their website to increase engagement and interest from Non-Profit Organizations and students?

Scoping

To begin, we held scoping meetings with the client to drive conversations about the requirements, the nice-to-haves and their goals for this project.

Previous Website

Lack of Brand Personality
There are no consistent traits that consumers can relate to or identify as our brand image. This is key in building user relationships with UW Blueprint.
Text Heavy
Majority of the website pages are dominated with large groups of text. This is important for captivating the users and maintaining their interest.
Poor Display of Projects
The team has delivered highly efficient solutions to many Non-Profits. There is no visual aids or content that demonstrates the capabilities of our members.
Tailored to Students
The content presented on the website is useful only to students applying. It is critical that the website creates a great user experience for both the students and Non-Profits.

Solution

Design a dynamic, react-based website that represents UW Blueprint accurately. The website will incorporate many visual elements such as images, videos and graphics to portray the student and NPO experience. It will also feature a revamped projects portfolio. It will retain some of the major elements from the original website, including the “About Us” text and admin application portal.

Roadmapping

After defining the requirements for the project, we created a project roadmap to help visualize the teams progress and track tasks. In addition to this, a calendar with project milestones, deliverables, work sessions and client meetings was created for the team.

Constraints

Timeline
The project duration was 4 months. Between myself and my co-designer, we have the responsibilities of gathering requirements, prototyping, conducting user interviews and producing content. We initially planned to include animations throughout the website however, with a small team and short timeframe, we were occupied with higher priority items.

Junior Developers
Since the team comprised of junior developers, we are constrained on the complicity of the design and interactive components.

Branding
Over the past 5 years, UW Blueprint has developed their own branding. This existing branding has been established and projected across all social media platforms and therefore, needs to be maintained throughout the website.

Defining the Users

User Flow

Design System

Final Designs

View Interactive Prototype

Next Steps

Mobile Designs
Next, we plan to create a mobile prototype for users who will be navigating the website on their phones or tablets.
Website Launch
The website is currently in the works of being developed. The plan is to launch it this coming summer!
Track KPIs
After deploying the website, we will closely monitor insights via Google Analytics, feedback and responses from user interviews.

Reflecting

Throughout this project, I had the unique opportunity to collaborate with cross-functional teams of different skillsets and experience. I am grateful for the knowledge I have gained from my peers and I am incredibly proud of the product our team has delivered.