Overview
SMSpubli are a business messaging provider offering a range of rich messaging services to a wide array of Spanish companies mostly operating in advertising & marketing or retail sectors, and sending both promotional and transactional messages to their customers.
Role
User research • UX design • UI design
Tools
Miro • Figma
Challenge
The website had not been updated for a considerable amount of time and therefore required a refresh to be more visually attractive to customers. Due to photography-based look and feel the website appeared generic and it didn’t stand out in the market.
Solution
Whilst the logo remained unchanged due to the brands' established position in the market, the rest of the website was given a much needed facelift. A library of illustrations was created to facilitate explaining sometimes complex concepts, whilst photography was reserved for more general use.
Outcome
The update of the website successfully gave the company a more unique identity that had been lacking on the original, somewhat more generic website. Giving the brand a more distinctive look and feel helped to differentiate it from its competitors in the market.
Process
Styles & Components
I kept the blue and the grey from the logo. I expanded the colour palette to use different colours to differentiate different industries and products offered by the company. The typography was also updated including the type scale that was applied to the website. That aligned to the 8 point thingy.
Colours
Primary palette
Secondary palette
Text and surface
Typography
123456789
!@£$%^&*(){}[]?
Typescale
Bespoke character illustration library
Whilst photography would feature as part of the overall look and feel, it was decided that illustration would serve as the main visual element to support content across the website. A lot of the website content is very industry specific, and so illustrations were the better option to help represent at times more abstract concepts related to B2B communications.
Initial character concepts in both profile and front facing poses.
Custom brushes to help build a character library
In order to build a set of illustrations of people for use across the brand, that were both easy to customise and quick to create, a set of custom brushes were made. These were then used to build the limbs of each character which allowed for different poses to be created and for the stroke weight to also be unique to each character. Once the initial set of characters had been approved, the wider team were able to easily create further characters based on a range of industry specific themes and ideas.
Custom brushes
Brush variant A
Brush variant B
Brush variant C
Lines and custom brushes were used to create the limbs of each character.
High fidelity mockups
A high fidelity mockup of the website for desktop users was created to cater for what would be the greatest proportion of traffic visiting the website.
Homepage concept for desktop users
Making things responsive
Whilst desktop users accounted for the majority of website traffic, it was important that the website was responsive and therefore considered users on different devices, from tablet and smaller screen laptops, down to mobile devices.
