marci papineau | design & code

Rails Girls Copenhagen

Mentoring platform made to connect women looking for help in technology with a mentor

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.

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.

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.

✓ UI kit

✓ Prototype

✓ Design ready to be implemented into code

✓ Selection of colors, gradients and fonts

✓ Wireframes

✓ User personas

Code RailsGirls Copenhagen coders and mentors

Design and Product Development Marci Papineau Gottlieb

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.

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

» Figma » Whimsical » Pencil and Paper » Bear

Style guide and component library for the app is used by designers needing to create new designs and frontend developers translating the design into code.

Typography for large and small screens
The font styles are named with developer terminology, h1, h2 p ... They are also named with their function, helping designers quickly understand where to use them.

Colors, shadows and gradients
Colors are defined for both the designers and developers. Designers can easily use them while working on new designs. Being that they are defined as variables, if the master colors are changed, they will take effect directly in the Figma prototype. These changes can then be brought directly to the developers who can change the code for universal changes.

Buttons
States being used in the product so far.

Assets
The assets here are created for the designers to use while designing new parts of the app. They are created as components, linking them to all of the app– for example, if the nav bar needs to be altered, it is possible to do into the main component, and have it carry down to all the screens designed thus far.

Card components and grid
The components here were built with the predefined styles highlighted above– typography, colors and assets. The grid is a 5 pixel grid.

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 UI gradients.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.