Rapid development of a landing page for a social content platform

MVPs (minimum viable product) help us to test whether our idea will spark the interest of our target audience with as little effort as possible. Our client, a social justice-focused NGO, wanted to validate whether developing a social content platform with stories from around the globe could bring value to enough people.

PROBLEM

Although the client had the means to develop the landing page that would allow them to collect the contact of those people interested in this platform, they believed that it would take too long internally. They contacted us to accelerate the development, finish defining the UI design and generate the necessary code to build the landing page on their own domain.

CHALLENGE

How could we determine the look and feel of a social content landing page associated with an NGO? How could we have a fully functional code to carry out a Lean Startup experiment in the shortest possible time?

OBJECTIVE

Carry out the UI design and development of a landing page with content platform feeling in the shortest possible time.

METHODOLOGY

Stage 0. Kickoff Workshop

During the Kickoff meeting, the first meeting with the client, we talked with them about their idea, their objectives within the project and the constraints of the job. This allowed us to better understand what they were looking for (and what they were not looking for) with the landing. We took advantage of the kickoff to request previous documentation necessary to speed up the work: brand guidelines, logos, references, etc. In this case, the clients had developed a pre-selection of the content and a wireframe, a content distribution scheme, on which we were able to base the final design and which accelerated the process tremendously.

Once we had everything clear, we carried out a sprint of a couple of days to carry out a design proposal through a functional prototype. We used webflow to generate the prototype.

Stage 1. Designing the look and feel

Starting from a defined content structure, the development of the website structure was very fast. The biggest challenge was to determine a content platform aesthetic based on NGO brand guidelines.

We opted to take the main color of the brand and darken it to get the background of the website. In that way, we went on to obtain a dark look, similar to other content platforms. At the same time, we kept the brand typographies and the main color for the CTA buttons of the website and other color details. We prepared graphics similar to the client’s to support some of the website’s messages with icons and we prepared the favicon and a cover image to represent the main content of the website and help users to identify it as a content page.

Responsive websites adjust to the size of the browser, allowing your content to be viewed well on different devices.

Finally, we prepared the navigation, the interaction of the elements and the responsive behaviour of the site so that it could adapt to different devices in the best possible way.

Stage 2. Design review and natural changes

In design work, what we want, what we expect and what is conveyed do not have the same format and therefore it is common for the idea to change during the process. It is normal that the first time a prototype is made and presented to the client, it is necessary to make changes to the prototype. This can happen either because certain details have not been taken into account when communicating the idea or because once we see our idea in reality we realise that there is room for improvement. The changes that precede the first real representation of the idea are called natural changes. 

Once we had the first version of the landing we showed it to the client to collect feedback and see what were the natural changes that should be made to it. In this case, although they were generally satisfied with the result, they decided to change some of the content shown in the landing and the style of the icons generated.

The second one-day sprint allowed the proposed changes to be implemented.

Step 3. Code generation and integration of tools for the experiment data collection

Once the changes were completed, the design was presented to the client again. We ensured that the design was in accordance with their expectations before generating the code needed to integrate the design into their specific domain. 

To carry out the analyses, the necessary measurement tools were integrated via code and hubspot forms were integrated. Being external components, the forms had to be visually modified to fit the style of the website so we worked with the client on how to modify these forms in the most convenient way for them.

CONCLUSIONS

In less than a week of work we were able to prepare an interactive and responsive landing page, designed by an expert, that allowed the client to carry out their experiment. At Thinkers Co. we support you in your transformation processes and speed up your design projects. Contact us to find out more.