Content Hub
Website Builder
WEB
PROJECT PITCH
SaaS WYSIWYG website builder.
CLIENT
Lastminute Group
ROLE & TEAM composition
2x Product designers
PO
3x QA
3x DevOps
6x Front-end
4x Content editors
PERIOD
February 2017 - December 2021
(4 years, 10 months)
TOOLS
Sketch, Abstract, Principle, Protopie, Figma, Hotjar, MUI X, Invision, Adobe After Effects, Adobe Illustrator
KEY RESPONSIBILITIES
Gathering business logic from stakeholders
Conducting platform expert users interviews
Conducting end-user A/B tests on Optimizely.com
Refining requirements and designing them into features
Design system maintenance and synchronisation with front-end
Designing new features
Improving existing functionalities
KEY DELIVERABLES
Design system (built with Sketch)
Mockups & prototypes of new functionalities
Design notes for developer handoff
Marketing assets
Internal videos
STATUS
COMPLETED
PRODUCT DEMO
A note on the process …
This case covers the work done for nearly 5 years and gives a broad summary of the accomplishments during that period.
Emphatise
During the empathize stage of the project, I aimed to understand the needs and pain points of content editors and SEO specialists. The initial goal was to develop a user-friendly blog platform that would enable them to easily create articles for the end users and make them optimized for SEO.
To gather insights, I conducted in-depth interviews and usability testing sessions. Through these interactions, I empathized with their frustration in handling complex code and limited customization options.
Some key pain points included:
time-consuming nature of page creation
unappealing layout and design of the articles
little to no control over SEO optimization
How and why
USER INTERVIEWS
I conducted one-on-one interviews with content editors to gather qualitative data about their experiences, challenges, and goals when creating web pages.
How and why
PERSONAS
Created fictional representations of typical content editors based on research findings, allowing me to develop a deeper understanding of their motivations, goals, and pain points.
How and why
COMPETITIVE ANALYSIS
Evaluated other website builders in the market to identify industry standards, best practices, and potential areas of innovation to consider in our own solution.
How and why
STAKEHOLDER INTERVIEWS
I have conducted stakeholder interviews to determine the primary challenges they face with the current solution and their desired outcomes with the new platform. Additionally, I sought to understand their reasons for wanting to develop an in-house platform.
PLATFORM PERSONAS (CONTENT CREATORS)
PerSONA #1: CONTENT EDITOR
Focused on typing tools
Proficient in writing
Minimised distractions
Highly organized
Creative mindset
Collaboration skills
PAIN POINTS TO ADDRESS
Complex content management
Lack of visual editing capabilities
Ineffective collaboration tools
Inadequate SEO support
Multiple tools needed to go from draft to published
PerSONA #2: SEO SPECIALIST
Analytical mindset
Technical savvy
Results-driven
PAIN POINTS TO ADDRESS
Lack of advanced SEO settings
Limited website optimization capabilities
Collaboration issues with editors/devs
Knowledge sharing with industry updates
goals that were met during the project duration
END-USER (PLATFORM CONTENT CONSUMERS)
PerSONA: TRAVEL ENTHUSIAST
Undecided, needs inspiration
Curious
Independent
Tech savvy
Budget-conscious
PAIN POINTS TO ADDRESS
Information overload
Lack of social proof/insider tips
Time constraints
Incomplete offers
Language barriers
goals that were met during the project duration
Define
After analyzing the collected insights, it was concluded that the content editors and SEO specialists needed a user-friendly platform with flexibility to manage a blog page for end-users. This platform should also allow for the easy creation of visually attractive articles using pre-designed templates to save time.
How and why
USER SCENARIOS
Pairing personas with user scenarios helps to envision specific user journeys and requirements, informing the design and development process.
How and why
PRIORITIZATION MATRIX
Collaboratively prioritizing design goals and features based on user needs, feasibility, and business impact. This helped to focus our team effort on the most important and impactful areas to develop.
Pivot time!
Based on the success of the early working prototype the company decided to expand the functionalities of a simple blog platform to a more advanced WYSIWYG website builder that will support multiple brands and tens of thousands of pages.
INITIAL PITCH:
A platform designed for editors and SEO managers to internally create and oversee a travel blog featuring links to company promotions.
FINAL PRODUCT:
A flexible WYSIWYG platform to build custom landing and SEO pages, optimized for heavy traffic and SEO.
Ideate
In the ideate phase, my colleague and I collaborated to generate various ideas and designs in order to find the most suitable solution for the business requirements. This process ultimately resulted in selecting our top ideas to establish a strong foundation for the project.
How I've handled it
ANALOGOUS INSPIRATION
I've tried and studied other solutions on the market to see what patterns and capabilities we might adopt, and where we can strive to be better.
How I've handled it
VISUAL THINKING
I've focused on making a semi hi-fi prototypes to get the feeling of a ready product. This then was later validated by our teammates to choose the best ideas.
Prototype
The prototype phase took a longer time since we wanted to employ the usage Brad Frost's Atomic Design principles with the capabilities of Sketch's design system into the project.
This enabled us to create a single source of truth for design components that we re-used throughout the designs, as well as a source for PM's, devs, and other team members to have access.
EXAMPLE: DESIGN SYSTEM
Challenges & Solutions
The creation and development of the initial idea for the platform as a blog brought many obstacles. However, establishing a robust information architecture early on helped to avoid any risk of having to remodel the platform when we decided to transition towards a more sophisticated custom website builder.
How I've handled it
EARLY PRODUCT PIVOT
Originally, the initial concept for the platform was to consist of only a singular blog site featuring articles on travel destinations. However, upon the platform’s initial release, the company recognized its potential to expand and serve as a centralized hub for various landing pages, functioning as a reliable and comprehensive source. Due to its adaptable nature, we were able to effortlessly enhance and broaden the platform scope, allowing for more intricate functionalities and diverse applications.
How I've handled it
LEGACY SYSTEMS
The primary website builder used by the company was Adobe Experience Manager, but there were numerous other sources available to end-users. I conducted thorough research on these sources and collaborated with the team to develop a migration plan for the new platform.
How I've handled it
DECENTRALISED MULTI-BRANDS
Initially, the primary design files were based in Photoshop, making it difficult to maintain and create designs that were future-proof. However, our platform allowed us to create white-label sites with the help of web controlled style guides and meet our own needs in a centralized manner, supported by Sketch-driven designs. As a result, we were able to prioritize designing new elements and pages instead of fixing disorganized legacy code.
How I've handled it
IMMATURE DESIGN TOOLS
During the early stages of design systems, when the platform was being developed, Sketch was leading the way. I utilized all of its features to design the platform. However, since Sketch was primarily meant for individual designers, Abstract was implemented to enable collaboration among multiple designers and gather feedback. It also allowed developers and other stakeholders of the product to access the project.
How I've handled it
LACK OF FAITH IN DESIGN
When I joined the company, there was a lack of design awareness, but after the initial release of the blog version of the platform, the C-suite was convinced to prioritize better design going forward. I have also conducted A/B and prototype tests to confirm this belief, which, in most instances, demonstrated that design improves KPIs.
Key outcomes and impact of the team
DESIGNED A SUCCESSFULL
SKETCH DS
By using the atomic design principles, we were able to define a single source of truth for our atoms, components and organisms for easier implementation and deployment.
MULTI-BRAND SUPPORT FOR
7 BRANDS
With the platform’s multi-brand style guide support, even regular users could easily configure brand typography, colors, and settings with just a few clicks.
PAGES MIGRATED
+140 000
The platform we have developed allows for easy migration from Adobe’s Experience Manager, simplifying the process of permanently converting pages to our new design with minimal manual effort.
IMpLEMENTED GLOBAL BRAND REFRESH
IN 2 WEEKS
With the assistance of some minor developer support, it only took two weeks to complete the global refresh of all 7 major brands, thanks to the platform’s global style guide capabilities.
MADE THE WEBSITE MORE
RESPONSIVE
Migrating from Adobe to our platfor gave us a chance to greatly enhance the mobile experience for our users by designing mobile specific variants of elements and layouts.
