Vaibhav Khulbe
The Contra team wanted to review each of their newly made templates and themes for the Portfolios by Contra feature. So I performed a technical audit for each of them, from responsiveness to visual/technical bugs.
Contra is the independent-first community and commission-free hiring platform shaping the future of work. The best part that I like about Contra is that it's commission-free, so what we earn is what we get with 0 platform fee. Plus, they have a wonderful set of new features and an equally awesome community.
The Contra team wanted me to provide feedback, audit checks, and features/improvements to the Portfolios by Contra feature:
This exciting new update to the platform showcases an independent's personal brand with a portfolio website designed and managed straight from their dashboard. The content is pulled from the user's Contra profile (check out mine for an example).
These were the main areas of auditing to consider:
The initial 6 templates I worked on were the following:
Each of them had 5 themes: Midnight, Dusk, Midday, Morning, and Dawn:
I've been excited about Contra since joining this platform. Plus, after meeting with the Contra team (product, community, engineering, etc.) on their Slack community, I liked how passionate they were about building the product and the requests/feedback from their community member (users).
Being an active member, I got access to the Portfolios by Contra feature and was invited to discuss things around this specific addition. I sent 1-2 detailed pieces of feedback over there, which the Contra team noticed. After that, I received multiple messages asking me to take a look at each of the initial 6 templates as a paid opportunity!
I teamed up with Daniel Cruz, Creative PM at Contra, for this project. He says they chose me because:
As one of our earliest adopters of Portfolios, Vaibhav has been a steadfast supporter that the team could always count on to provide valuable feedback – both from a design and development perspective. Upon our beta rollout, we set out to formalize this valuable feedback loop with Vaibhav into a paid project; enlisting his services to provide an audit on our Portfolio templates and themes in order to put that final polish. Vaibhav delivered acute, timely, and valuable feedback on each template the team was able to implement and deploy to users.
Daniel gave me access to a Notion document prepared for me where everything was laid out, including the project brief, areas to consider for the audit, and a separate page where I could write down all the template feedback in detail.
I completed the project in the following steps:
✧ Getting a general feel of the webpage: I simply opened the website in a chosen template and noted anything that looked off. Be it in terms of design, accessibility, a bug, or a tweak to an already existing feature.
✧ Writing down my findings: using the provided Notion doc, I converted my notes from the first step into a piece of clear information inside the template page using the formatting tools of Notion, screenshots, annotated markups, etc.
✧ Noting down text accessibility issues: I used the Pika and the Chrome Dev Tool tool in order to check any text accessibility issues on each template/theme. Then I put the WCAG (Web Content Accessibility Guidelines) Contrast Ratio value of both the foreground and background color like this:
I also suggested contrast improvement ideas. For example, improving the contrast of the emojis used in the text. Here's the previous version:
And here's the updated version with improved accessibility:
✧ Suggestion on formatting/layout: I suggested various new ideas to improve the overall formatting and layout of each of the pages of the portfolio website. For example, adding a new subheading before each section or lowering the font-size
of a text to improve the visual hierarchy.
✧ Technical bug report: I would then test the same webpage on different browsers to check the compatibility across different browser engines, like some bug on a Webkit browser like Safari.
✧ Checking the performance: I tested the website load/stutter both manually as well as using Chrome's Lighthouse tool to generate the performance report. Then I also used Google's PageSpeed Insight to understand where things can be improved technically.
✧ Mobile experience: I would take screenshots, record the mobile screen, annotate them, and share some new features that could be utilized on a mobile screen.
Vaibhav is an absolute dream to work with ✨ a true professional, he cares deeply about his work and field. Vaibhav is dedicated to delivering quality results and shares regular updates throughout the process. 10/10 recommend!
⤷ Daniel Cruz (Contra | LinkedIn)
Creative PM, Contra