Mobile-first website for Safe Place International TDA graduates
Design Leadership | Design System | Brand Guidelines | User Flows | Collaborative Problem Solving
Safe Place International (SPI) is a global organization dedicated to supporting doubly marginalized communities, primarily refugees identifying as LGBTQIA+ and/or single mothers. Through holistic development programming, the organization provides support, advocacy, and resources for individuals facing crisis situations, such as violence, trafficking, or abuse.
Through their Dream Academy, SPI offers a 10-week course of leadership training focusing on leadership development, socio-emotional learning, and job skills training. Our design team’s goal was to continue designing a mobile-first web browser for SPI TDA graduates to keep in contact with each other, participate in community activities, report acts of violence and get necessary information about various resources (jobs, housing, community, etc.).
Tasks
Design Team Leadership
Implementing New Brand Guidelines
User Stories & Flows
Updating Design System
Style Guide
Prototyping
Icon Design
Dev Team Handoff
Collaboration with UX Research
Tools
Figma
Photoshop
Illustrator
Rotato
Discord
Notion
1. Problem
To create a platform for TDA graduates to connect and share resources and information.
The project was paused for 1.5 years, during which the Priority 1 flows were created. In this gap, the client had implemented new brand guidelines (logo, colour, typography, patterns) in their organisation, and when our team started working the old designs looked outdated.
During the process, we discovered the design system was unfinished – missing components in a variety of design files and not optimised design build with the components. Also, in the design flows, we noticed a lot of unfinished basics in the design – no systematic auto-layout, instances not linked, and inconsistencies in typography, accessibility and design elements.
As a design lead, I had to create a sustainable workflow for our designers. The biggest issue we had was the difference in time zones. Half of our design team was located in the EU and the other half in the US, so we had to navigate within the constraints of different time zones, as we were not able to have many all-hands meetings.
Solution
As a design lead, my first task was to organise all of the Figma files systematically – to have the design system and design files separate. Within the files, we had to create a seamless and sustainable flow of information – whoever joins the project can understand and find the necessary information (prototypes for the dev team, user flows, priority tasks and their process, etc.)
The project involved a lot of design work from a variety of angles – auditing the designs, updating the design system and implementing new brand guidelines for mid-fidelity designs. As a design team co-lead I decided to split our team in half – 3 designers working in wireframes and 3 designers in a design system.
It was logical to have one designer from the EU working in the design system, one designer working on wireframes and then a team lead supervising and assisting both of their work. So both of the teams would have an overview about both of the design files. With the Kanban board, daily working sessions and weekly meetings, we managed our sprint goals and were even able to provide first prototypes to dev team.
2. Organizing workflow and files
workflow organization
- The biggest problem we faced at the beginning of the project was the handoff of the project. The main issue was that design files were not linked together and had to be organised to create a sustainable project for the following Phase. We analysed the previous product team’s predefined user stories and matched them with the previous design team’s Kanban list to discover the most up-to-date designs.
- The second problem was to organize a unified workflow between two teams who worked in two different time zones. To be able to create a workspace following a servant leadership style, there had to be a balance between independent work time and a collaborative environment. For that, our team was split in half – having practically no all-hands meeting but weekly retros within the small team + daily working sessions. Approximately every other day, we were briefing each other together with another team lead. As our designers were highly motivated and resourceful then this organization proved to work smoothly within a team – we managed to deliver all of our pre-agreed sprint goals together with the product and research team and the client was satisfied with the designs.
