Styles and Components
We optimised the business resource launching the first Spotcap´s design system: a centralised framework capable of reducing the time to delivery and promoting Brand consistency across four market countries.
As UX/UI Designer I was responsible for creating the design library, establishing the guidelines and advising a scalable implementation.
Product
Spotcap Website
Timeline
Q1 2019 - Q2 2019
Problem Statement
Spotcap operated as a direct lender in four different countries. Each country had its own CMS website, an incredible marketing tool to generate leads, and on the other side a big technical debt, because of the lack of a centralized code repository.
The status quo was negatively affecting the resources of the Marketing Ops and Design teams, based at Berlin Company Headquarter, since they were in charge of the website maintenance, content reviews and involved in the creation of landing pages.
The following case study covers how we improved and streamline the process of creating new web pages ensuring a high standard of web design and development.
Research
Job Shadowing
The 82% of content managers declared, the landing page building process started duplicating a current page from our CMS and after customising the content and then passed the hot potato to the headquarter. Indeed it was on our side to untangle the mess: visual inconsistency, outdated assets and bugs.
Data Analysis
As an advocate of a mobile-first approach for marketing websites, and thanks google analytics report I argumented it was the time for paying attention to our mobile experience and website responsiveness.
Visual Audit
Styles were already described in the brand guidelines, but unfortunately there was not a strong definition of the accent colour usage. So we agreed to use the green to lead the user to sign up, improving our visual language.
Solution
To face the demanding request from the local market teams we launched the design system revamping the two of the four websites.
The new framework was integrated with our current CMS with the purpose of positively affecting those metrics: reduce visually inconsistency; reduce development cost and technical support.
Code Repository
The back-of-front-end: a file containing the string of code editable and readable only with someone with web developer skills.
Sketch library
A large set of foundation, components and pattern reusable in the design software, listing states and responsive behavior.
CMS Sandbox page
The back-of-front-end: a file containing the string of code editable and readable only with someone with web developer skills.
Styles updates
Border Radius
Since Spotcap web applications run on a different framework, we decided to align the border radius and button paddings promoting both consistency across our Products and a more appealing interface.
Typography in REM
We set up a new typography for the website.
According to the latest w3c, we updated the unit to REM and provide different sizes and line-height following the most common breaking point.
Learnings
What didn´t work well: Documentation
Without previous experience with the design system, we missed the opportunity to document accordingly and write down many aspects of the new framework. Many information how-to was owned only from people that built the system: only 4 persons. I got a lesson: DOCUMENT AS YOU GO.
What worked well: Onboarding
Thanks the network I created from the previous job shadowing work and interview, I got to know many of the content manager creator so I was able to present and show how to integrate the framework in their work.
