HackitForward
Project overview: building an open-source platform that connects students learning to code with organizations looking for solutions to real-world problems.
Role / Team
I was the product designer on a team with a lead product designer/design facilitator, and 2 software engineers who are key stakeholders.
Tools
Figma
Google Meet
Discord
Client
The Problem
When Kurius first started they had two main missions for the organization:
Make the process of learning code easier for students at the high school and CEGEP level.
Enable students to code projects that can have a community impact.
Over this past year a lot of progress has been made towards those missions listed above. Kurius crafted a centralized resources page with all the best programming courses found online, hosted a workshop at a CEGEP, and organized an online Learnathon and KuriusHacks after COVID-19 hit the world, working with sponsors and various organizations. During the process, they built their own community on Discord.
However, Kurius realized that it wasn’t enough. Students wanted and needed more. This is why they decided to build a consolidated platformto give students the agency to have an impact by working on real-world projects presented by organizations.
Step 1: Initial kick off call and remote expert interview
We kicked off the sprint by interviewing the founders of Kurius to get a better understanding of the vision they had and the problem they were looking to solve. Since this was a remote sprint, our team being based in the United States and Kurius being located in Canada, we used Google Meet to video chat, and Figma as the design and collaboration tool. The notes feature in figma worked wonders for the remote sprint as it allowed for us to clarify any design questions the development team had.
Step 2: Inspiration and design direction
Next, to gather inspiration for design, we asked all parties involved in the sprint to set out and find examples of products that inspired them, these products did not need to be industry specific .
These designs actually inspired things like card design, gallery, badges and break points that would later make it into the final design of the app.
Step 3: Initial concepts and voting
We began with hand drawn concepts to show to the Kurius team, and had a vote to decide which direction to move forward with. We then went into Figma and began to design the product to make it feel as real as possible. We decided to first design the cards, which are essential to the application.
Card design concepts. Card 1 was voted as the favorite.
Badge brainstorming, inspiration and voting.
Step 4: Prototyping
Based on the feedback from the Kurius team on the initial concepts and voting, we began designing and prototyping flows in Figma. We first started designing the ‘browsing for challenges’ flow, which required a homepage populated with challenge cards as the core functionality, as well as the challenge page itself.
After receiving feedback about our first draft prototype, we knew which direction to head in and began building out the rest of the platform, both web and mobile screens, I primarily worked on mobile at this stage.
Step 5: Handoff to developers
At this point we gave the development team the reins and used the Figma notes tool to clarify any questions they had during development.
A couple of months go by, a few check-in meetings later, and before we knew it HackitFoward was ready for its beta launch. Which happened on 5/20/21. Project has since shut down.
GitHub Repo: https://github.com/KuriusMTL/HackItForward
Lessons Learned:
Running a design sprint is a great way to solve problems in a short amount of time. The biggest takeaway from this project was designing with the development team in mind. Sometimes designers have their heads in the clouds, trying to create the most desirable solutions without a mind for how in the world it will get developed. Working along side software engineers in this sprint made us be more practical in our approach.