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.

Putting the first demo brand in the charity context

1. DEFINING THE DEMO BRAND

Brand guidelines

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.

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 first version of the design, showing each template in situ and a brief description. 

Sketching the user-flow

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. 

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.

Downloads

Brand guidelines: photography

Export: how to add templates to your website

Manage users

The following designs illustrate the evolution of my ui design for the pricing and upgrade sections. 

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. 

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

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

I designed the overall branding identity of Brand Meadow, from the look and feel to the messaging and tone. An example of the latest iteration of the homepage I did can be seen here.

Brand Meadow homepage 2022.