WARNING: THIS ONE IS VERY UI-Y
and the ui design
story so far…
(there’s a page on the UX stuff too)
ABOUT THE PROJECT
Starting from ux
This page is dedicated to the user interface design of Meadow, the design and content platform for growing businesses and causes. I co-founded Meadow to empower teams to create and edit professionally branded day-to-day marketing tools 24/7, without the need for a designer.
I believe in the power of user experience (ux) design to deliver purposeful user interface (ui) design. Lay great foundations for your building and your beautiful paints and plants will add spark and glamour to a well-built project. Just like a grand design, a well built website will have gone through an architectural process, defining problems, goals and behaviours. Get the foundations right, and the beauty of design will follow. More on the Meadow ux story here.
UX, UI & product design
Marketing & sales
The evolution of the product
We started off with an advanced high fidelity prototype to test with real users. This enabled us to see how users worked through the flow of the product before entering into a more lengthy focus on user interface design. The next step was to focus in on designing a friendly user interface design that we knew our target market would understand.
Generation 1 Meadow: UI design
Putting the first demo brand in the charity context
We needed to create a demo brand to show how our design & content platform could work for a brand in context. It felt apt to focus the demo brand on a charity, since this was the target market we had initially decided to focus on. Our new water charity, ‘Watershed’ was born, with a set-of brand guidelines, mission, vision and full suite of branded materials from leaflets to social banners.
1. DEFINING THE DEMO BRAND
Demo name, logo, colours, font
Our brand page
I set about designing the new ‘Watershed’ brand. This had the added benefit of shaping the brand guidelines section of the platform itself, ensuring that the layout acted as a brand guideline summary.
2. TEMPLATE LOOK & FEEL
I designed the following Watershed branded templates in “situ”. These images would became dashboard thumbnails so that users could easily see a preview of what they were about to create. The dashboard needed to convey consistency, trust and evoke excitement using Meadow.
The demo interface needed to empower our users to access relevant designs within seconds.
dashboard V. 1
1. DURING THE CREATE PROCESS
The first version of the design, showing each template in situ and a brief description.
Sketching the user-flow
2. THE GENERAL BUSINESS DEMO
We soon found that it wasn’t just charities that were interested in Meadow. We needed to create a more general business style showcase demo, appropriate for non-charity users. We also wanted to make this our first trial for users to explore at their own leisure.
Dashboard: choosing a template to design
A user can add a Google style document title, save, scroll through the design choices, drag & drop a layout, change the background picture or layout of the template, save and export as a web presentation. Each interaction shows subtle differences when active and a green step box guides the user through the process. The brand colours change each time we build a new Meadow for a different brand and the user can customise each template.
Creating a design: choosing a presentation layout to design on our demo
Creating a design: one of our clients choosing a presentation layout to design
The following section showcases the ui design for the other pages within Meadow. These pages have grown over time, as we test the goals of our users and add more functionality to the product.
From edit to analytics
1. DESIGNING THE OTHER PAGES
This is where we really saw Meadow blossom into a fully fledged product. Adding sweet interactions to pages like the edit section so that users could favourite, clone and filter their favourite templates.
The analytics section was fun to design as it really helps to show the value of Meadow. Super admins can gain valuable insights into user behaviour, such as top user, top templates and seeing their daily return on investment via a calculator.
Brand guidelines: intro
Brand guidelines: logo, typeface and colours
Brand guidelines: photography
Team board: what the team have made
Export: how to add templates to your website
User analytics: licenses & top users
Template usage analytics and return on investment
Ah! The pricing page. All about psychology and product placement. Pricing pages are interesting to design, test and iterate. And as the product evolves, so must the pricing page.
1. THE FIRST DESIGN
The following designs illustrate the evolution of my ui design for the pricing and upgrade sections.
The first pricing matrix
The bundle pricing matrix
I started with a bundle strategy, highlighting the most popular offering by showing it appearing larger than the other bundles. We liked this, but it soon became clear that the detailed explanations became a bit overly confusing for our users. Plus, as we grew, our pricing matrix needed to change.
The evolution of the pricing matrix
2. THE SECOND DESIGN
At this stage in our journey, Meadow was offered only to enterprise customers with 30+ team members. However, due to the level of customisation of our packages, we found it increasingly tricky to pinpoint an exact price for our product.
This is where the ‘from+’ price came in. A from price enabled us to tell prospective customers what the lowest cost point was likely to be but then they could customise by adding features bespoke to their needs at any point and when budget allows. This version of the pricing ui reflects this in the design, focussing on a from price at the top and then all the customisable options beneath.
The second pricing ui
The latest iteration
3. FOR SMALLER BRANDS
We always knew we wanted to open out Meadow to smaller businesses and solo entrepreneurs. We’re currently in the midst of developing Meadow so that it is cost effective to smaller brands – watch this space. The latest iteration of our pricing page again needs to reflect this.
We are looking at a “pay as you grow” strategy. The slider reflects the incremental price of adding new users. From prices are listed below for additional services, such as a website, template design and any other branded assets.
The slider style pricing page