Equalista mobile app mockup

Designing Equalista, the world’s first gender equality learning app

Website: equalista.com
Date: Sep. 2019 - Sep. 2020
Services: UX & UI Design, Web & Visuals

Role

In a small team, I worked closely with founders, designers, content creators, and engineers throughout the project’s development. As design lead, I planned a lean design process to create the app’s first MVP. Using user-centered methods and design best practices, I helped to create an intuitive, instructive and enjoyable product.

Design process

Equalista’s design process was focused on the Lean UX methodology:

• Involving potential users early on
• Testing designs regularly to solve UX issues
• Analysing user insights to develop user-centric features

For the span of this presentation I will only show some of the points we went through in this design process.

1.1 Strategy workshop

During my first week at Equalista I took part of a strategy workshop where I learned about Equalista’s vision, mission and goals. We discussed the product’s target groups and main user needs, and brainstormed ideas for features for the Minimum Viable Product. This concluded in a Product Development Canvas and a Vision Board.

1.2 Benchmark analysis

Understanding how similar products presented themselves, what value they provided, and what strengths they had, was a great inspiration to start defining our product.

We narrowed down the 8 most relevant competitor apps and conducted SWOT analysis to extracted the best ideas and opportunities for our app.

• Headspace
• Neuronation
• Happify
• Khan Academy
• Quizlet
• Duolingo
• Elevate
• Fabulous

1.3 User research

Research was fundamental in order to be able to understand our users, to validate assumptions, and to determine the best features for them in Equalista.

User interviews

User interviews helped us gathering qualitative data from early adopters.

User surveys

Equalista’s social media channels were used to recruit early users and gather quantitative insights.

Persona profiles

With the information gathered about our users, I created persona profiles. This ones represented major user groups for Equalista, described real people with backgrounds, goals, and values, focused on their needs and expectations, and helped test assumptions and prioritising features for the app.

1.4 Information Architecture

The information of an app can be hard to navigate without a logical and well thought out system. The content team passed me the content for the app in spread sheets.

Sitemap

I organised that information in diagrams and sitemaps to organise the app’s content and help users focus on specific areas of information. This diagrams served to lay out the logic and functionality of the courses. We employed micro-learning strategies to develop short and easy to digest courses.

User-flows

A user flow is the path taken by a user on a website or app to complete a task.
This was the first draft I made for the sign-up process.

Low-fi prototypes

User flows of main features allowed me to create low-fidelity wireframes, connect them in interactive digital prototypes ready for running usability tests with real users. This helped discovering pain points and usability issues to solve them before launching the final product.

3.1 Design System

The last stage of the design process was about polishing up the designs, incorporating visual elements to the interface to increase the product’s visual appeal, professionalism, brand value and usability. I created a Design Sytem to implement this, and also to ensure style-consistency among screens and elements.

Brand voice

I developed a design system that included elements of Equalista’s former style guide, and took in consideration Equalista’s brand voice and product vision for the future.

Fonts

The “Lelo” font was already chosen for the titles, and I chose Open Sans for the bodies’ text due to its legibility and well balanced proportions, kerning and tracking.

Type-scale

I chose the “Mayor Third” Type Scale (x1.250 increments among text sizes) to produce an harmonious and well balanced text-hierarchy.

Color palette

I inherited some colours, and chose another ones to create a vibrant color palette to match Equalista’s vision and brand.

Logo redesign

I redesigned the Equalista logo in order to adapt it to the new style and create a cohesive brand experience.

App layout

The Equalista layout system was hybrid: I consulted Google’s Material Design and Apple’s Human Interface Guidelines, together with the design trends by mayor apps to define our layout rules for both, the iOS and Android apps.

This resulted in visually balanced layouts, where most elements aligned to a 8dp grid, while smaller components aligned to a 4dp grid. Special screens followed layout variations to enrich the visual appearance of the app.

UI Kit

To be consistent with the brand, I created minimal UI elements and components that were accessible and predictable, helping users navigating the system intuitively.

3.2. High-fidelity prototype

In this stage I polished the designs and created a high-fidelity prototype. I ran the last user tests with it, which focused on the app’s appearance and visual design.

3.3 End designs & presentation

After refining the app designs for the last time, I organised and documented all the assets and design deliverables in a clear manner, so that everybody in the team (other designers, developers and founders) could easily find them and use them.

3.4 Marketing materials

While designing the app, I also designed CI, marketing and editorial materials. I designed a responsive website, social media posts, banners, the graphics for a kick-starter campaign, product presentations, pdfs, business cards, emails, stickers, post-cards and illustrations.

Conclussions

Equalista was the first job I had as a UX & UI interface designer. I became the design lead shortly after starting working due to my previous experience in graphic and web design. I lead and mentored the other UX- and graphic designer, and end up being the only designer in place. The app launched in the beginning of the corona pandemic, and even if it did it in extremely hard times, it got to receive a 5 star average rating in the first weeks after its release.

During my time at Equalista I put into practice all the things I had learned in the intensive UX course bootcamp I previously took, and learned lot of things, not only regarding to design, but also to team-work, and to learnings and concepts about equality and intersectionality.

picture-you-made-it-to-the-end heart-picture