Cultsure LLC. - (Completing May 2025)

This is part of the contract that I designed in Figma, we signed, and we kick-started the project the week before holy week 2024.

Two Contracts

We will have two contracts and the bulk of the project will consist of two corresponding parts including: design (first contract) and later development (second contract).

For the first part I will bring some Research to the project (specifically I'll do a Competitive Analysis) so then with my findings I'll be able to propose a possible structure for the whole website to show to my clients in the next call — I'll create a Sitemap with some explanations per section for this.

After that I would also end up creating a concept-mix to show to my client with various screenshots from different websites reflecting the same Sitemap that I had created.

Later, after we discuss with my client and they aprove these sections or we iterate and do changes to the Sitemap, I might craft Low-fidelity Wireframes (in paper or in Figma) of these sections (which is not compulsory in the contract, as I'm going to show them many visual examples, discuss the Competitive Analysis in a call, and I'll go directly into Mid-fidelity Design).

Finally, I'll iterate on them and create the Mid-fidelity Design (in Figma) for the Home Page for now (which is in the first contract as the final deliverable) and we will have 1 design revision during this stage (plus the first design meeting where I'll bring the Competitive Analysis and Sitemap as the first deliverables, and we'll discuss features and design looking at examples).

Later in the second contract we will include 2 more design revisions and we will expand and polish to a High-fidelity Design (in Figma) which will also contain the design for the rest of the pages included previously in the Sitemap. For this stage we will need to have defined and confirmed the technology that we will use.

Finally I will develop the complete website (using NextJS or Webflow) depending on the final needs of the project.

The two above are Cultsure LLC's current websites and their current brands – as of April 2024. Their landing page is currently a simple 3 pages website made in Wix. I proposed a re-design and a development made in NextJS (+ Hygraph CMS) or Webflow (+ Webflow CMS).

The Brief

With the information I gathered in the first chats with my client and later in our Discovery Call, I created this Brief to guide the project.

I tryied to avoid including biases as arguments such as e.g: "as a new company, a website is required to establish an online presence" as other designers sometimes do, or tryied to avoid confirming my own assumptions in the Brief or Research, as we just don't know anything yet.

I included "insights", not so common in Briefs for the web-design industry, but very common among us Publicists for advertising and full campaigning Briefs, as I'm a Publicist as well.

The main two differentiators of Cultsure LLC are: They want a way to communicate transparency towards the whole nearshoring process and towards employer costs, employee salaries, employer company savings, and their own profits; they also want to ensure perfect culture-fit of these talents within a company and offer plans to nurture them for the future.

Competitive Analysis

The design process would include a few steps as mentioned: I would initially conduct a Competitive Analysis and with this bring up new competitors and related websites, similar nearshoring businesses, related talent-adquisition or job-hunting platforms, as well as other relevant websites outside the competition that might have similar features to compare, or websites such as award-winning designs that could help us with some ideas for features or design. I would then have to analyse and compare them during the first week of the project.

The goal was for me to get ideas of possible features, sections, and pages to include in our website re-design to then present to my client. A Competitive Analysis also helps to understand the overall business itself and its place in the market.

I studied these 9 websites and platforms fully over the first week after starting the project. 5 were given by my client (Tecla, Howdy, Talently, Terminal, and Confetti) and I added 4 more to the mix (Strawberry, Remote, Contra, and Paired) — I'd later end up adding a few more for further analysis and design inspiration.

During our Discovery Call my client showed me 5 websites that they liked or considered their competition; I later included 4 more from my own research.

I analyzed the different pages and combination of pages for these 9 websites, for example: as a hiring manager, as an independent, searching per different countries, searching by roles, searching jobs or candidates through specific skills or technologies, checking their different forms, their signup and profile pages, their onboarding flows, and most of the features of these platforms which included 8 direct and indirect competitors and 1 related business of nurturing remote teams (virtual team building) given by my client.

Although Strawberry is the only non-tech related talent-adquisition platform here, what I truly liked about it is that — once I heard: "When designing a website the usual is to start with the header and then go down from there, or to think about the overall structure, how many sections do I need... instead, ask what's the key functionality or the main selling point of this website, for a lot of websites it could be a heading, input field, and a button... start from there. Don't complicate websites by adding too many elements".

Simplicity + Premium Feel

Usability, ease-of-use, good hierarchy, good focal points, white-spacing which is known to give a premium feel to websites by bringing space-to-breath which makes information easier to consume — it also creates contrast with quite spaces for important actions, accessibility, responsiveness, premium photography, and social-proof (with user-stories, testimonials, partnerships, blog e.g. life at Strawberry) are at the core of Strawberry and some of the most modern competitors in the list, like Contra, the newest hiring & freelancing platform which is gaining tons of popularity in 2024.

Although I'm following the full web design process (i.e. including Competitive Analysis, Sitemap for overall structure, Low-fidelity Wireframes, and more) I'll also keep the above quote in mind, as sometimes less is indeed more.

Social Proof is always a key feature to include in most websites wanting to communicate trust and credibility towards their users... but let's see how our competitors are dealing with it.

The first thing that I immediately noticed is that all of the competitors (8 out of 9 except for Strawberry which is a bit different) had their Headers (also called Heros) directly followed by a Partners (Logos) Section — this section has the goal to generate trust and credibility — I found them 100% of the time just immediately after the main Header in these 8 competitors, sometimes above-the-fold, sometimes below-the-fold, but always second as shown in the previous set of 9 screenshots.

These competitors are also very big in showing testimonials, case studies, developer stories, or client success stories to provide a sence of the benefits that their services have provided to others.

During the time working on this project and by the time of capturing the above screenshots and putting together this case study, 3 competitors had re-designed their websites already (Contra, Howdy, and Confetti). See the newest designs above. You can also still see the old designs in my first images displaying screenshots for the 9 competitors which I did capture at the very start of the project in April, 2024.

As competitors could improve or change their features at any time, Competitive Analysis is an iterative process and we should keep track of these type of changes for the whole duration of a project. I was still iterating in Low-fidelity Wireframes and about to create a Mid-fidelity Design when this changes happened.

"If I had an hour to solve a problem and my life depended on the solution, I would spend the first 55 minutes determining the proper question to ask, for once I know the proper question, I could solve the problem in less than five minutes" — Albert Einstein.

I started finding some patterns so I conducted a Competitive Audit comparing some of the most common or important features that I found, as well as features or best practices that I found relevant to look for or analyse over all of these 9 websites, e.g. I checked for some relevant best practices like Responsiveness, Accessibility, and Usability.

Temporary placeholder Competitive Audit (incomplete) (imgs). [Adding (complete) (imgs) when I have it 100% filled plus re-structured for this case study in 2 parts.]

⁠Missing (additional) Competitive Analysis (imgs and screenshots) still.

My Procedure At First

For this, at first I took lots of notes and lots of screenshots for every website, I had them sorted in many different folders, I compared most of the above features and most of the questions I asked in my list during the beginning 1 to 3 weeks; I was also looking for design inspiration right away. I encountered many patters, noted some findings, and ideated some solutions for our Cultsure landing page re-design... but now I'm updating this case study (in July-August) with all those previous findings being placed all together in the above Competitive Audit.

The above is part of a new nice and unique city-guides feature that Howdy added to their platform in their most recent re-design, while I was working in this project.

My clients didn’t like Howdy’s design, although I think it is a very complete site and one of the most competitive. The good thing is that we can avoid a similar visual style entirely and I can design the website to look just like we want — with NextJS or Webflow we start with a white canvas in a browser.

Some of these websites I found them very modern and friendly as well as very big and complete, some are bigger than I expected, some are very clean and easy to use, some others like Tecla I feel are a bit convoluted and the design is a bit outdated resembling an old website and making the search for the different products or solutions a bit complex.

The reality is that most of these websites are not just a website, some are big and complex apps or platforms with thousands of users, some include deep tech related glossaries of search with all sorts of information for every skill or technology in mind (purposed for SEO and search), they include direct contracting or invoicing vía the platform, onboarding, signup accounts, profiles, dashboards, job posting, job searching, among other more complex features, some have big data-bases of candidates and companies enrolled — I have to work with my client's budget, which I did ask and we discussed when signing the contract. They aren't looking for something as big as these platforms right now, but getting closer.

They were looking for something that could be designed and developed by an independent freelancer, not by a team of designers and developers.

This is the exact same Sitemap and structure that I presented and proposed to my clients a couple of months ago after doing the Competitive Analysis, just in a slightly different format in a PDF and in a Figma link.

Sitemap

I sent my clients a Figma link first (the exact same link from the "See the prototype" button above, live since that day). It perfectly opens but that night that my clients were going to revise it, they told me they couldn't open it. So I sent them a re-structured PDF later that I worked that night, with some of the Competitive Analysis captures including a teas or a summary to some of my findings that we were going to discuss in the next call, the scope that I was proposing the project to be, the Sitemap, and a Concept-mix of example competitor and non-competitor screenshots for every section that I was proposing, for which I took a couple of nights gathering and creating.

I think the idea should be to update and upgrade Cultsure LLC's landing page to be more modern and friendly, easy to understand what they do, intuitive, functional and competitive, but still maintaining a conservative scope.

We will add 100% responsiveness as well, as the current site is not accessible in a mobile or tablet device where more than 50% of the users are; it can only be opened in desktop.

This is the same exact Concept-mix of screenshots that I sent to my clients in a browser Figma link a couple of months ago, just in a slightly different format together with the Sitemap and a tease of the Competitive Analysis as we were getting ready for a call.

The Figma link was even interactive — I made it so that they could see the first column only (from the 3 above) and then they could drag each section alone left-and-right to reveal from 2 to 6 (competitor and non-competitor) example screenshots that I put together; for this Case Study I just kept up to the 3 best screenshots per row representing each section in the Sitemap.

This Concept-mix above was ment to reflect the same exact structure that I was proposing previously in the Sitemap for the Home Page, so my clients could get an idea of some similar sections from other websites in the niche and outside it, during our next conversation, so we could start talking about my proposed pages, sections, and features as well as looking at some visual styles and examples.

We can see examples of the same sections presented in my Sitemap before: Header, Partners [Section], How It Works [Section], Feature [Section] (where we want to show our differentiators: having more transparency in costs, savings, and profits, as well as addressing culture-fit which could also be mentioned here as one of Cultsure's main features and value propositions), Testimonials [Section], CTA [Section], FAQ [Section], Resources/Blog [Section] (huge for SEO today), and Footer.

This was my first scratch, concept, or placing my first ideas at Low-fidelity Wireframes for the Home Page Header, it might remind of something similar to Strawberry, Tecla, or Contra from our previous competitors.

Maybe a new logo?

The "Cult-sure" name division seems pretty obvious but it is what I had in mind all this time... maybe a new logo could start from here? The most obvious ideas are sometimes the most adequate.

A logo should be the whole business idea, its culture, tone, feel, vision, mission, and much more, all crumbled into its minumim concept pieces. It should be the least-complex way to represent the brand in its minimum visual elements. Also, branding is not just a logo... it encompasses way more... graphic designers think it is just a logo.

But I'm a Publicist and I studied hundreds of brands and campaigns during 5 years, I had to create many concept logos and whole brands from scratch in the past... thinking conceptually, looking at color theory, psychology, semiotics, linguistics, and much more.

I haven't designed a logo in a while but I'm thinking on doing this one for the Mid-fidelity Design so it goes all together with the website's re-design as a whole.

We can still keep the project simpler towards a landing-page scope, but we could re-create, simulate, or incorporate some of the competitors' features. An option is e.g. having "candidates" vs "businesses" website view (see Contra) with their respective forms and general information for each one, different actions, as well as slightly different design.

We will add concise information and contact details for personalized guidance as well as clearifying the steps and process on how everything will work for both parties.

Lastly, the idea could be to incorporate Odiseacultura's website a bit more as part of the whole Information Architecture by linking, explaining, or integrating some of its features entirely; we can even utilise the same actual provider (or plugin) to be able to post or handle vacancies directly from Cultsure (we could link to the same external page that Odiseacultura is doing) or we can include forms to accept candidates' information and CVs (maybe creating a small data-base), or links to onboarding, or links to information on how to join or how to work with Cultsure, or links to direct contacting; maybe handling this directly from Cultsure as a more robust platform.

I also sent this capture to my clients showing that Contra's platform had been developed using NextJS which was one of my two proposed technologies for development.

NextJS lets you create any scope of projects or scale them in the future. Even e.g. any social media platform or any big app could be developed using NextJS, contrary to using Webflow or Framer. Its library ReactJS (the most popular library in the world) was created by Meta (previously Facebook) and it powers some of their current platforms.

I could even create e.g. a dashboard or so, if needed, with NextJS — not with Webflow or Framer. I can implement better "responsive" styles with NextJS (not just 3 website versions following only 3 breakpoints like in Webflow or Framer) plus the only way to handle real "accessibility" as well is by getting into the code and optimizing also for screen-readers and other devices, focus states and styles, keyboard-only, hidden information ment just for such devices, how they access modals/popups... it is not only about contrast-ratio.

So I would choose NextJS for the next phase and my next proposal in the second contract. I also designed and developed this very Portfolio using NextJS + HygraphCMS and its the most appropriate tech for me to use for Cultsure LLC — they could later scale it and almost every developer knows ReactJS.

Missing Low-fidelity Wireframes (footer) (img).

Low-fidelity Wireframes

Wireframes might start looking good, but these are Low-fidelity Wireframes, so please don't even look at layout... image at the top, or right, or background photo, video, or carousel... it doesn't matter right now. We are just dropping ideas at the moment... it must be messy, dirty (although I'm handling some spacing and fonts selection right now), we are just placing sections, features and a possible structure for the Home Page.

Real copy, little subtitles, real design or content are still missing. This layout and design will totally change for the next Mid-fidelity Design I'm doing next.

I chose "Italiana" (Serif) & "Inter" (Sans-serif) fonts for this Wireframes, but it doesn't matter... they might stay, they might not.

WIREFRAMES (Updating) [Coming Next] [Editing: Aug 27, 2024]...

UI, DESIGN, & INSPIRATION (Updating) [Coming Next]...

I expanded my Competitive Analysis with sort of a Comparative Analysis on week 3, adding some new award-winning (design-driven) job-hunting and job-posting websites more focused on good design and interactions, where I was looking for more unique features, good storytelling, engaging interactions, inspiring copy, and inspiring design.

COMPARATIVE ANALYSIS (Sort of...) [Coming Soon]...