Desktop and mobile screens for Skill Pill's website
CHALLENGE
Skill Pill create distinguished, microlearning content for both corporates and educational institutions. Having recently launched their pioneering app APOC, Skill Pill wanted to have a fresh new marketing site to attract new clients. 

From their marketing site, Skill Pill wanted to give users fast communication to their new biz team. They needed a news page as their CEO was actively speaking at conferences and the team frequently presented at trade shows. 
SOLUTION
• Define user groups and services that Skill Pill offer 
• Propose to expand sitemap beyond a single page
• Propose to utilise existing artwork from the Skill Pill video catalogue 
• Adjust brand colours to modernise, simplify and digitise the experience
• Propose new features such as animated infographics, Twitter widget 
• Work in collaboration with Front End to rigorously test and launch 
• Deliver a training session to the client 
Proposed high level sitemap
SITEMAP RESTRUCTURE
The needs of each of Skill Pill's clients vary so its essential they can find relevant information quickly. And in case they don't, a contact form would be anchored to the bottom of both pages.
Proposed user journey showing expected content page by page
USER JOURNEY
Mapping with expected content is vital ahead of drawing wireframes to get the client to sign off and they can use it as an early indicator of copy and content required.
Skill Pill wireframes
WIREFRAMES
Once finalised, wireframes are sent to the client. Using placeholder text gives a rough idea of how much text will look good once designed.
Designs of pages from the final website
Four mobile screens showing final designs for the Skill Pill website
RESULTS
Fortunately Skill Pill were open to the addition of new brand colours and simplifying their logo. The pastel palette was inspired from the animations in Skill Pill's extensive video catalogue. We made the nav sticky so the user can access the other pages quickly. Using a burger menu kept everything neatly tucked away and translated well for mobile.
The final designs were developed as components within the CMS so the client can move blocks, create new pages and edit existing text without affecting the CSS or animations.

Visit the site here.

You may also like

Back to Top