CodeArc

Concept Ideation  |  Service Design |  UX Mapping  |  Branding  |  UX/UI Design  |  Information Architecture

HD mockup of The Galaxy travel appImage showing screens taken from the CodeArc platform.

Overview

CodeArc is a online learning platform aimed at transforming the lives of young people experiencing homelessness. CodeAc partners with tech companies to teach those at risk or experiencing homelessness how to code, helping them launch into fulfilling careers in software development.

Problem

Homelessness is a problem that affects hundreds of thousands of people across the UK every year. In Northern Ireland alone 8,531 households presented as homeless from January to June 2023. This is a 4.7% increase from the previous year.

Homelessness can happen to anyone. The Simon Community, Northern Ireland's leading homelessness charity, reports an increasing number of young people from family units experiencing homelessness. Half of the clients at Simon Community NI do not conform to the common stereotype of a homeless person. They are healthy, young and live active lifestyles, yet they still struggle with homelessness.

Solution

CodeArc’s mission is to provide young people experiencing homelessness a way out through education leading to employment. CodeArc’s goal is to help guide young people into programming internships by teaching them how to code.

Project Planning

This project spanned seven months, during which I utilised a gantt chart to effectively manage and track its progress. Using this tool facilitated comprehensive planning and clear time management throughout the project lifecycle.

AN image of a Gantt chart.

Research and Discovery

I began my research by exploring the problem space and considering what sustainable solutions would lead people experiencing homelessness to both independent living and financial independence. This lead me to focus on speaking to people working directly with those experiencing homelessness and leaders in the development and delivery of training and entrepreneurship programmes.

Images taken of the affinity mapping process used in CodeArc's research.

User Interviews

I had the opportunity to conduct seven user calls as part of my research. While I couldn't directly speak with individuals experiencing homelessness, I connected with professionals closely involved in their support, including youth workers, social workers, and the head of research at the Simon Community. These conversations provided invaluable insights into the experiences and perspectives of those facing homelessness.

Additionally, I spoke with organisers and facilitators of entrepreneurship programmes, such as Co-Founders and Stryve. Through these discussions, I gained a wealth of insights into effective group teaching methods, content delivery strategies, and the advantages and drawbacks of online learning platforms. Overall, these interactions greatly informed my understanding and approach.

Affinity Mapping

To analyse the information gathered from user calls I carried out affinity mapping using FigJam. The visualisation of patterns provided by this technique was very helpful in the identification of themes and the ranking of higher priority and lower priority user needs. I was then able to use these finding to inform my UX Mapping.

User personas created for CodeArc.

UX Mapping

As a part of my UX mapping for this project I created empathy maps, user persona's and user journey maps. These were essential in helping me to get into the mindset of user and consider their wants and needs when being faced with an opportunity to learn how to code.

Competitor Analysis

A key aspect of CodeArc is its partnerships with charitable organisations as well as tech companies. I therefore created a partner analysis, considering existing training programmes that could funnel participants into CodeArc. I also created a competitor analysis to explore what was happing in the online and in-person software development training space. From key insights gathered here I was able to make better decisions on branding and how training might be structured.

Experimentation and Development

Findings gathered throughout my research and discovery provided a great bases for brainstorming potential solutions and fleshing these ideas out. Through this phase I was able to create designs for the CodeArc service as a whole and the CodeArc learning platform.

Service design blueprints

Service Design

I created service designs for the both the participant and business partner future states. I formatted my blueprint using the actions created for my user journey map. From there, I considered technology touchpoints and staff touchpoints above the line of visibility. I then added any relevant backstage actions and support processes. After completing each stage, I added flow lines to indicate the flow interactions and connections. This provided me with a holistic view of the system and helped me to consider how much support would be required from staff and the CodeArc platform. I was also able to iterate on service designs and later incorporated mentors into the blueprints.

Feature Mapping

I carried out feature mapping for my product by pulling all features highlighted in my service design blueprints and the ranking them in order of necessity.

Platform information architectures

Information Architecure

When I had identified all the key features required I moved onto creating user flows, information architectures and site maps. These provided very clear requirements that I was able to translate into wireframes. I considered both the back and front-end of the learning platform as well as a mentorship portal.

Image of COdeArc wireframes.

Wireframing

I wireframed each flow and then experimented through wireframing with the layout of key screens. I iterated further on these outcomes following feedback from professional software developers and engineers, returning to paper wireframes to help refine my design approach.

CodeArcs branding.

Branding

The CodeArc brand was inspired by the spark of a welding arc. The asterisk and curved arc above it represents that spark.The wordmark uses the typeface Brockmann Medium. This clean, straight-edged typeface presents the strong and supportive nature of the brand.

Image of the CodeArc prototype.

Prototyping

I began the early stages of prototyping by creating user flows using low/ medium fidelity mock-ups. I tested these flows and designed a number of screens in high fidelity and gained feedback on those before finalising and building my final prototype.

Usability Testing

I conducted usability testing for CodeArc, focusing on both participant and mentor user flows across relevant age groups. Additionally, I collaborated with professionals in software development and engineering to review early prototypes. Their valuable insights, drawn from their own training experiences, provided further enhancement opportunities for the platform. This was particularly helpful in selecting what content to include on the platform and how it should be delivered.

Results

Multiple screens of CodeArcs UI
Mentor overview page UI
Modals
CodeArc information booklet
CodeArc notebook

Get in Touch

I’m always up for making new connections. Feel free to contact me.
hello@rachelsdesignlab.com