Playable
Web Design and Content
Playable is a SaaS platform that transforms video assets into auto-play, cross-channel marketing experiences in email, in-app, push notifications and messaging channels.
I designed webpages end-to-end, beginning with research and analysis of competitor and partner sites. Then, creating wireframes to establish layout and structure, and finally developing and launching pages on the Playable website through iterative testing and feedback.
Role
Website Designer
Timeline
1-2 week turnaround
Tools
Canva, Framer, Jitter, Claude
Blog
Brief
Create a CMS Blog index page and it's individual detail pages.
Wireframe
I analysed competitors partners’ blog pages such as Braze, Benchmark Email, Beefree, Klaviyo, PuppyDog and ViewedVideo, identifying important design elements and functions such as category filters, search, and animations.
I developed wireframes to map out the layout and structure.
Outcome
The Blog page was published with functions like category filters and search, and with stylised individual blog pages containing the blog content, imagery, table of contents, and a comments section.
Partners
Brief
Design individual partner pages for the existing Integrations page.
Wireframe
I analysed major partners’ integrations and partner ecosystem website pages, including Braze, Beefree, Mailchimp and Klaviyo, establishing the webpage design and content.
I drew a sketch wireframe to map out the interface design.
Outcome
A standard template for the individual partner pages was designed to act as a layout guideline, then it was adapted according to each partner’s content and purpose. The main contents included links to the partners’ website and policies, how-to video, images, integration or partnership overview, capabilities and a step-by-step tutorial.
Solutions
Brief
Re-design the existing Solutions page.
Existing Page
The existing Solutions page was unfavoured from management and lacked a visual hierarchy.
Wireframe
I explored solutions pages from partners such as Constant Contact, Beefree, Iterable, Salesforce, Braze, and Mailchimp. Due to content limitations, I chose to create a single Solutions page rather than multiple pages.
I designed a wireframe to map out the exact layout and hierarchy.
Outcome
A new Solutions page was developed using both existing and newly created content, including a hero motion animation produced in Jitter and 3D mockups designed in Canva.