Verto.sh
(previously called Good First Issue, and FirstIssue.dev)
Branding and re-design for an Open-Source collaboration platform.
Timebound: 1 month (part time)
Role: UX/UI Designer
Tools: Pen & Paper, Figma
The problem
FirstIssue.dev (original name of the product) has undergone a change of ownership after being left unused for many years. The new owner aims to revamp and modernize the website to enhance its appeal and marketability, attract more users, and lay the groundwork for future monetization.
Design Goals
The UI had to match the new brand principles:
Modern: simple, brand oriented, minimalistic, sleek
Fun: catchy fonts, rounded, curves, organic, geometry, futuristic, artistic, vibrant colors, emojis
Reliable: It should be easy to use but still have a bit of fun without confusing anyone.
Task
Branding, logos, user interface, user experience.
Priority:
UI is quite outdated and since marketing of the service is already undergoing, the priority is to make it user-proof and modern looking asap.
Simple and basic (mostly) UI changes, such as typography, palette and branding elements will be sufficient but necessary focus points in the first phase.
In the second phase, we will focus on the User Experience and re-touch on the UI.
Deliverables
Downloadable logo’s vectors
Wireframes and prototype for developers
The initial design status
First Phase - User Interface and Branding
My approach
After learning about the client, their goal and the wishes, I kicked things off by checking out some modern tech tools/companies and browsing through design ideas to get inspired.
-
Objective: Establish a visual direction and cohesive aesthetic for the redesign that aligns with Verto’s brand identity and appeals to the target audience.
Color Palette: Created mood boards featuring a fresh and modern color palette that conveys trust and professionalism.
Typography: Selected clean, modern fonts that enhance readability and give the site a contemporary feel. Considered fonts like Open Sans and Lato for body text and Montserrat for headings.
This project really pushed me to learn about designing for a completely different target audience, different background of my client, and finding the right mix between style and usability.
In the open-source collaboration space, it was crucial to prioritize usability and clarity while delivering a visually appealing interface that fosters effective teamwork and user engagement.
As I gathered inspiration, I began exploring design ideas, focusing on color palette and fonts to reflect the brand's values. I sought feedback from my client early and often, enabling me to make sure I was meeting expectations and I could iterate quickly to improve improve the design.
-
COLOUR PALETTE I crafted a palette to reflect playfulness, clarity, and trust, ensuring accessibility through legibility tests.
Pink/magenta: it’s powerful, striking, but can also be used to smooth bold and dark colors and fonts.
Blue: Accessibility is an important factor. Approximately 10% of the human population is red-green colorblind; blue is a suitable color everyone can visualize. Psychologically, blue also inspire trust.
TYPOGRAPHIC SCALE I chose two fonts for simplicity and readability, organizing variations per device.
Nunito +Nunito Sans:
Well balanced, Sans serif, rounded, fun, clear, simple
-
With approval of the Brand Colors and Typography palette choices, I could now develop and propose a range of options for the potential brand’s logo.
I started off with market research and font inspirations of companies or products in the tech industry that shared the same values of FirstIssue.dev: Modern, Fun, Reliable
FirstIssue.dev: Modern, Fun, Reliable
I began testing different solutions and combinations of fonts and colors. Brainstorming with the client, through trial and error we settled on the Organo font, due to it’s simplicity and curvy lines that gives a sense of easiness yet it helps a brand stands out for its modern geometry.
Second Phase - User Experience
While UI was developed and implemented, I kicked off the second phase of the design, focusing on the User Experience, pinpoint crucial points and observations that could enhance both user and company’s experience.
User Experience pain points
-
Through a survey shared on LinkedIn in developers pages, I could identify the following points:
FirstIssue.dev is primarily used by beginner developers to learn by contributing to open-source projects, though many experienced IT professionals use it as well. Therefore, it's crucial to keep the learning curve manageable to encourage and support enthusiastic beginners.
Users would like to see more features (filters, sorters, tags etc)
-
Web users spend 80% of their time viewing the left half of the page and 20% viewing the right half. Adhering to design conventions will help maximize users’ efficiency
https://www.nngroup.com/articles/horizontal-attention-leans-left/ -
Filtering system is limited and, following user research, this should include more options or field of filtering.
User Experience Solution
Used Gestalt Principles to improve visual clarity.
Organized information with grid systems for better focus.
Added more filtering options to better serve users.
Chose colors to emphasize important features and create a clear hierarchy.
Maintained smooth shapes and clean lines to match the modern and playful brand of FirstIssue.dev, making it easier for new developers to use.
Included marketing features like a newsletter signup and a GitHub star button based on business needs.
The challenge: a new name, a new strategy
A few weeks after launch, while visits to the new tool were rising constantly, the client decided they wanted to try make a bolder move: the platform is now called Verto.sh.
Through market research, they also developed a new strategy: they wanted to ensure not only beginner developers would use Verto.sh and they asked for advice into how we could attract more seasoned users as well, from the design prospective. This would mean increased traffic and broader collaboration within different levels of users.
My proposed solution
Seasoned developers might be attracted to nostalgic and vintage-looking typography styles.
Endless Boss Battle typography (discovered during the 1st branding phase) sounded like a perfect match.
A new brand design logo and a twist of colors, proved to be worth it (see the success below)
Rewarding achievements
The collaborative effort between design, marketing, and development experts has led to impressive results for Verto.sh.
Today, we take pride in sharing the following successes:
Reaching the first page of Hacker News* is a significant milestone for Verto.sh.The recognition reflects the platform's growing popularity and the value it provides to its users.
*Hacker News is a social news website with reputation for fostering insightful discussions and is widely followed within the tech community for staying up-to-date with the latest developments and trends in technology and entrepreneurship.
Engagement: Verto.sh's rebranding and launch have led to 3.9k new users, with an average engagement time of 1 minute and 16 seconds.
Brand Recognition: Most traffic comes directly, with 3k users, indicating strong brand recognition. Organic social channels add 337 users.
Global Appeal: The largest user base is in India (1.7k users), followed by the US (640 users), highlighting its global reach. User activity is healthy, with 2.8k active users in the last 30 days and 1.7k in the last week.
Retention: Steadily improving. This non-profit product shows strong metrics, indicating a solid foundation for future growth and possible monetization.
Challenges & Learnings
While redesigning Verto.sh, I managed tight deadlines and blended stylish looks with easy-to-use designs. This created a consistent style featuring colors and fonts that are modern, fun, and reliable. By using feedback, I adjusted designs to enhance user engagement. The transition to Verto.sh was successful, appealing to various developers and gaining recognition on platforms like Hacker News.
-
Successfully revamped Verto.sh under tight deadlines, blending modern aesthetics with user-friendly design principles.
Developed a cohesive visual identity with colors and typography that reflect modernity, fun, and reliability.
Used iterative feedback to refine designs and meet client expectations, leading to improved engagement metrics.
Managed rebranding to Verto.sh, expanding appeal across diverse developer levels and achieving recognition on platforms like Hacker News.
-
Proud Of: Achieving a balance of creativity and usability that improved user engagement and retention.
What I Would Do Differently: In future projects, I would enhance early-stage user research to better anticipate and address user needs, ensuring a more tailored and impactful design approach.