Website Redesign of Flok22
Flok22, is a social meet-up app that launched in 2021. Flok22 helps people to make friends and grow their network in real-time situations. Attempting to combat excessive planning, no-shows, ghosting, and catfishing, Flok22 encourages people to make authentic connections with likeminded individals.
Role: UX/UI Designer
​
Responsibilities: Project Managing, Meeting and Strategy Facilitating, Researching, UI, Interviewing, Testing, Iterating.
​
Duration: 2 weeks
​
Tools: Figma
The Task
To redesign the company's website such that:
1. Users have a clearer understanding of the product and how it's used
2. Users are informed and trust the content enough to want to download the app
3. The website has a plethora of information that entice all website visitors from investors to app users
The Problems
Site has repetitive, unclear, and unappealing information
The site needed better visual aids when presenting important information
After collecting data from competitor analysis, Neilsons heuristics, and usability testing I was able to uncover these insights that helped inform the design decisions moving forward
Users noticed clear inconsistencies throughout the site
Solutions
1
Create clear, engaging, and informative visual aids on how to use the app
Design Process
2
Ensure each page is consistent and on-brand to encourage trustworthiness and increased user downloads
Research
Competitive Analysis
The first order of business was to look at similar app websites and identify the common themes which gave me clear receipe for success.
Neilson's Heuristics
After taking a good look at the app and spotting the usability issues, I had a clear idea of how to make it better. I made sure the changes matched what the stakeholders wanted and used insights from the users.
Usability Testing
I conducted 5 usability tests and structured the tests according the project goals.
Script
Goal: Understand how usable the website is
Task 1: Ask tester to look through the website
-
What are your first impressions of the website?
-
How did you find navigating the website?
-
Is there anything you’d change?
Goal: Increase app downloads
Task 2: Locate and download the app from 3 different places on the website
-
How did you find that?
-
What would motivate you to download the app from the website?
-
Is there anything you’d change?
Goal: Find out if users know how to use the app from the website
Task 3: Look through the app and find out how you would use it, including features and functionalities
-
Were you able to find that information?
-
Do you feel confident that you know how to use the app from what you found, why?
-
How do you feel that information is displayed to you?
-
What additional information would you need to feel comfortable using the app?
Goal: Improve users experience
Task 4: Have a final look through the website
-
How satisfied were you with your experience on the website?
-
Was there anything frustrating or confusing?
-
What, if any changes would you suggest to improve the website's usability?
Site Map
Creating the site map allowed me to visually structure and redesign the website with a clear understanding of user pain points. It helped to prioritise changes, streamline user journeys, and provides a roadmap for effective implementation of solutions.
Prototyping
When wireframing and prototyping, I used the mobile first approach
Low-fi
Mid-fi
Redesigned Experiences
Homepage
The homepage had several deficiencies, which led to various redesigned features such as: a "What's It All About" carousel that provides explanations about the app's purpose, usage, and connections; a Features section featuring concise descriptions and clear images; an explanation of Flok22's commitment to safety and user protection, as well as testimonials and additional enhancements.
Blog
The revamped blog page features categories tailored to engage and inform their target users effectively, maintaining consistency with the brand's identity while presenting only essential information.
FAQs
The original FAQ page suffered from inconsistent design and inadequate accessibility standards. The overhauled FAQ page now boasts improved usability with a search bar for quick navigation, well-organised sections, and a cohesive brand design.
Contact Us
Initially, when users clicked the "Get in Touch With Us" button, they encountered an overlay with a barely visible email form. To align with Flok22's commitment to providing a top-notch user experience and establishing trust and credibility, I dedicated a separate page for user inquiries and issues, making it easier for users to contact the company with questions or concerns.
Additional Page: Invest
To ensure the continued achievement of the project goals, I introduced the "Invest" page, enabling Flok22 to be well-prepared for a diverse range of visitors and potential stakeholders, facilitating the company's growth and development.
Redesigned Mobile Site
Result
I'm delighted with the results of this website redesign. It appears cleaner, aligns better with Flok22's brand, maintains consistency, and presents information in a pleasing and readily digestible way
If you'd like to look around the final prototype in a new window, you can find it here
