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.
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
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.
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:
- Number of memberships created
- Number of chapters created
- Number of events created
- User retention %
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.
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.
- Site maps or information architecture (IA) are a roadmap to a successful and organized product.
- Certain user flows as well as the correct page distribution is identified from an early stage. This ensures that all designs are in order and the product is built from an organizational point of view.
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.
Below are a few examples of user flows that I created to aggressively target some of the main KPIs of the product.
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.
With my consolidated sketch ideas, I created wireframes that could be analyzed, tested, commented on, and get closer to the final product.
- These included different versions that we could test and modify.
- Users tend to scan through websites instead of reading every element on screen; because of this, a Z-Pattern was utilized for the site’s homepage. Since we identified Membership Creation as one of the main KPIs, the Z starts with #1 on the top-left side, being an eye-catching quote followed by a call-to-cation-button (CTA) to become a member. Numbers 2, 3, 4, etc. continue with showing other information that is eye-catching and that also makes part of the site’s value proposition.
- According to the United States Postal Service (USPS), The maximum character count for a physical address in the United States is from 46-50 characters long.
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.
- With this data in mind, I used a Figma plugin called "Text Counts" which allowed me to use the right amount of characters in any given text field. This way, regardless of where users set a location for their events, the input fields will always be able to show the full address without the need to scroll or click numerous times to view it.
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.
prototype
- Once the tested designs were converted to High-fidelity mockups, a second prototype was created in order to ensure that my client understood the site’s design and experience vision thoroughly and as realistically as possible.
- A style guide was included as part of all deliverables to ensure that every component and design element could be used as a reference during the development stages that come next.