Rails Girls Copenhagen
Mentoring platform made to connect women looking for help in technology with a mentor
Business Case

Rails Girls is an international non profit organization helping women learn to code and become more involved in tech. I help run the Copenhagen chapter. We were looking to work on an open source project and came up with the idea of building a mentorship app.

The Challenge

We want to connect women wanting to become more involved in tech with people already in different fields within the industry. As a group we are writing the code. At the same time, I have been working on the design and flow of the app.

Figma prototype
Sample of the design system in use– using predefined colors, typography and components. Figma made it easy to make a prototype using the styles designed in the UI kit.
Project Scope & Objectives

The design side of the app needs the following things to be created– » Design » Font Selection » Prototype » UI Kit » Wireframes » User Stories » User Needs » User Personas. The final design will be used to code the app in Ruby on Rails and React.

UI kit and style guide
The Figma file was a great place to do a design that would be easy to implement by multiple designers and coders. There were components and style sheets created so it would be easy to further develop the product.
The connections between elements
Working on a clickable prototype in Figma helped to make sure that everything on the page is accounted for. It quickly shows holes in an early stage, shortening the process of production.
The Solution

✓ UI kit

✓ Prototype

✓ Design ready to be implemented into code

✓ Selection of colors, gradients and fonts

✓ Wireframes

✓ User personas

✓ UI kit

✓ Prototype

The Team

Code RailsGirls Copenhagen coders and mentors

Design and Product Development Marci Papineau Gottlieb

My Role

I worked on the visuals including the design, wireframes, and user stories. We collaborate over Slack to make sure what I am designing will work with the code. We have simplified decisions for it to work as a MVP— especially in respect to database fields.

Skills Utilized

» Design
» Prototyping
» UI kit creation
» Style Guide Creation
» Coordination with mentees, mentors, frontend and backend developers

Tech Used

» Figma » Whimsical » Pencil and Paper » Bear

The Process

Step 1 Discussions with team on user needs for 2 types of users– mentors and mentees. This was extremely important as it greatly affected how the database would be created. We wanted to keep it uncomplicated to keep release time quick.

Step 2 Discussions on user behaviors guided the creation of the wireframe.

Step 3 Sketched out layout ideas.

Step 4 Created a wireframe in Whimsical.

Step 5 Started design with a UI template creating: color palette, typography, form elements, button styles, card layouts, shadow styles, and a nav bar.

Step 6 Started designing the app based on the above information.

Step 7 Worked with variables set in the style guide, making updates when needed.

Step 8 Worked on clickable prototype in Figma

Step 9 Gathered feedback and made changes.

Step 10 Product is being coded with React and Ruby on Rails at the moment.

Color Studies from early on in the design
We were not planning on using photographs, so I wanted to keep the colors fun and lively to draw users into the product. Used UIgradients.com, Google's Material Design Color Tool and MyMind for color inspiration.
Product Pitch and User Stories
The product was defined and user stories were written to guide in the development of the product.
Primary actions for the 2 types of users– mentors and mentees
User journeys were written based on conclusions from the product pitch and user stories. These were used to make an initial wireframe.
Wireframe based on the defined user journey
The wireframes were reviewed by the developers planning on working on the project. There were compromises made in some areas in order to keep the initial code uncomplicated.