The brief was to design a 1-page website for ThriveSolo, a fictional 1-man startup providing a single elearning product.*

ThriveSolo offers an online course to teach freelancers how to manage their own business, their marketing and their sales. It is targeted mostly to writers, designers, developers, coaches, commercial artists, etc.

The aim of the page was to drive sign ups and sales.

The client provided 12 blocks of content – of which I can only use 8 – and two logos. I will need to choose one and apply the branding to the design. The final deliverables were: a wireframe, visual design, and short description for the brand chosen.

To start, I created a short persona and user journey for David, a 31-year-old freelance writer who needed help with managing his business, particularly invoicing and getting new clients.

David’s Journey
David isn’t new to the freelance game and is keen to grow and take his business further. He goes online and searches for “freelance management” and stumbles upon ThriveSolo in the search results. 

He visits the ThriveSolo website to find out more about what it is, what he’ll get from it, what’s required of him, and how much it’s going to cost 

Not wanting to commit just yet, he clicks on the Free Trial button to see if ThriveSolo is right for him. 

At this stage, I wasn’t aware that ThriveSolo was fictional and thought it was the client’s actual product. I had a question as to whether their free trials require card details up front or not.

After the trial period lapses, David receives a reminder email and invitation to sign up for the whole ThriveSolo experience. David, being pleased with the product so far, signs up for the entire course.

Content
Delivering the information most relevant to David was the priority for me.

To determine which blocks of content to use, I named each block to describe what it is e.g. Block 1 = Description of product, Block 2 = How this product is different, Block 3 = List of things you’ll learn, etc. I then sent out a short survey to freelancers in my network to find out what kind of information they look for when viewing elearning websites. It was in multiple grid format, where the 12 named blocks were rated according to importance. 

I used the top 7 most important blocks based on the results. While “How long it takes to sign up” was rated one of the least important, I included it as the 8th component because the website needed a clear CTA above the fold to get people to sign up. 

There was also a tie between “Why this product is different” and “Testimonials from other users”, but as the former had very similar copy to “Description of product”, I chose Testimonials instead.

Wireframe
I started by sketching the wireframe on paper. Normally, I would sketch mobile-first, but due to the extremely limited time frame (we’re talking hours), I went straight to desktop layout.

The order of content was based on the user journey as well as the survey results. If this was David’s first time to visit the website, what information would he like to see first to fully understand what ThriveSolo is?

After sketching on paper, I rendered the wireframe and the mock up digitally through Sketch.

Brand Application
I chose the logo with the multi-coloured head as it was a stronger brand for me. It had more elements that can be extended to other areas of the brand. For example:
• Blobs – Can be used as a visual design element, standalone or applied on images and with iconography.
• Waves – Can be used as visual design element, as a divider or to be applied on images.
• Colours - Each colour can represent the different items they can get with ThriveSolo e.g. orange for video, blue for audio, green for workbook, etc. It can also be used in iconography.

The other logo was a pink gradient-filled circle with the company name in white. It was very easy to recreate and may compromise the integrity of the brand. 

The bright pink colour was something the two logo options had in common. Pink also evokes creativity, imagination, and fun. I used this colour to denote interactivity. All buttons and links are pink, except for the Free Trial on the Pricing section, which uses a secondary interactivity colour i.e. orange.

The website also uses the same typeface as the logo – Roboto for paragraphs and captions. Roboto Slab was used for the headings. The pairing was based on fontpair.co.

Buttons and thumbnails are round to match the logo’s curves.

Structure
The layout was based on material design guidelines’ 12-column layout for desktop. This also makes it easier to translate to mobile.

Navigation
Though this is a 1-page website, I included a navigation bar so users can see from the get-go what information they can find on this page. Menu items are anchored to the headings.

The Login button is not on the same navigation area as everything else because: 1) it will get lost with the rest of the menu items, 2) it needs to be prominent enough for existing users, but not too prominent to overshadow the Free Trial CTA.

Heading Colours
Heading colours are based on a triadic colour scheme (from Adobe Color CC), where pink is the primary colour. But rather than introduce a new colour, I used the closest ones that are already in the logo. Heading colours are also tested against WebAIM Color Contrast Checker.

Icons used were by the following from the Noun Project:
Abdo, AlePio, Alfa Design, Alina Oleynik, artworkbean, bezier master, CBi icons, Creative Stall, Dinosoft Labs, hans draiman, Housin Aziz, Karthik Srinivas, Kidiladon, Kimmi Studio, Linseed Studio, Musket, Nathan Thomson