free planet

Web App UX/UI Design
summary

Free Planet is a web app in its early stages. Its main purpose is to connect people across the United States and eventually the world to allow them to join events, create chapters, and learn from each other without prejudices and biases. The site includes multiple user flows and pages that contain calendars, events, membership programs, chapters, news articles, and much more.

mission

I was hired as a Consultant and Designer to not only design the site from scratch, but also to identify potential pain points, define the main user flows, and most importantly create a functional MVP within the allocated budget and time.

framework

learn
client interviews

In order to learn as much as possible about my client’s main idea, we arranged an initial conversation where I asked numerous questions and requested information that would allow me to design a functional and appealing MVP.

documentation

After our initial meeting, my client provided detailed documentation based on what we had previously discussed. I received a series of documents that contained previously conducted research as well as other important KPIs for the site. KPIs included:

competitive audit

Once I had identified the main KPIs with my client, it was time for me to review and audit other competitor and non-competitor apps and websites to be able to gather inspiration for both a pleasant user experience (UX) and interface (UI).

I also looked for a variety of UI inspirational elements that I could learn from. This step is key to transferring modern UI skills to the project.

define
USER PERSONa

Based on my client’s research and on our new understanding of the product’s goals and end-users, I created a user persona to be able to use a user-centered approach and provide a product that connects with their needs as well as the product’s KPIs.

information architecture
ux strategy

The strategy for this web app design was to create an MVP that was functional and that met its initial purpose which was to attract as many users as possible to create a free membership account.

USER FLOWS

Below are a few examples of user flows that I created to aggressively target some of the main KPIs of the product.

design
SKETCHES

After defining Free Planet’s KPIs and building a strong foundation for the project, I sketched my design ideas for each page using a whiteboard. Low fidelity sketches on a whiteboard can undergo multiple iterations before committing to an expensive, digitized version.

wireframes

With my consolidated sketch ideas, I created wireframes that could be analyzed, tested, commented on, and get closer to the final product.

An example of the many features for this project included completing a form for creating an event and adding its online link or physical address.

With accessibility in mind, I designed input fields that would be able to contain any address in the United States without any visibility issues.Clicking multiple times inside a small text field to view or select an entire address can be exhausting, especially if users suffer from vision issues.

MOODBOARD

Based on my client’s personal preference, the color green would be the product’s main color. I utilized different shades of green for primary and secondary colors. Green also symbolizes safety, and Free Planet’s idea is to connect people around the country and eventually the world to communicate and share similar ideas in a safe way, free from judgment.

Other darker colors were used because combined with light or white backgrounds, they can also provide a sense of quality and exclusive elegance.

high-fidelity designs

prototype

handoff