Looptimize - How I designed a website from scratch in one week
Looptimize is an online customer journey and growth optimization company who wanted to launch their brand internationally. For that, they needed a website. The catch: they needed it in one week.
After the first launch, Looptimize contacted me for a new illustration style. The result you can check on their current page.
THE CHALLENGE
Looptimize received a once-in-a-lifetime offer from the biggest company in their field of work: the chance to expose their brand by publishing a guest article, slated to go online only two weeks later. Looptimize’s team took on the challenge but, to maximize the effects of having such an article online, they needed a fully developed website to receive the traffic it would generate.
With very little time available, three main challenges became evident when they contacted me:
01.
The visuals of all screens had to be finished in one week so that Looptimize’s development team could use the following week for implementation
02.
Implementation resources were limited – a no-frills approach was preferable. The website had to be easily translatable to the boundaries of WordPress as a CMS
03.
The only existing visual element was the logo. A brand identity had to be established
BRAND EXPLORATION
In my opinion, Looptimize already had a good logo. I decided to explore its features and base the style of illustrations and modules on it.
DECISIONS ABOUT ILLUSTRATION STYLE
Having in mind the brand’s desire to use illustrations as a supporting element in content such as articles, guides, and videos, a style that is simple and easy to produce would be more suitable from both time and cost perspectives.
The exploration process that led me to the final illustration style:
COLORS
Although I was given great freedom to implement my own ideas, the client had three wishes on this topic:
01. The brand color had to be complemented by neutral tones in institutional contexts
02. Flat colors had to be used to distinguish non-institutional content
03. Colors related to the theme “universe” had to be used to represent services
Taking those wishes into account, the following definitions were reached:
Solid Brand Colors
Used for general content, articles, and videos.
Solid support colors
Used for in-depth guides.
Sky/Stardust gradients
Used for Services.
COMPROMISES
The atomic design methodology is a core part of my design workflow. In this project, however, I opted to partly skip it in order to reach a full-screen design in the shortest amount of time.
For that, instead of starting with atoms as I usually would, I started with the creation of replicable stripes (organisms) based on the most important types of content that appeared in multiple pages. These key elements could be reused in other sections or even as standalone screens.
LESSONS AND CONCLUSIONS
I would have talked directly to the developers on the first day of the project to clear boundaries and set expectations.
Signaling earlier and with more emphasis to the client that they had way too much copy on each page which would require more time to layout in the pages
Functionality trumps aesthetics. I took too much time trying to figure out the nicest illustration style when my focus should have been finding the most functional solution for the situation
I decided to stick to email for file delivery believing that only a couple of exchanges at most would be required. Looking back, I should have taken 10 minutes to set up a Trello board or similar to organize the files and versions instead of exchanging emails