WARNING: THIS ONE IS VERY UXY

Meadow
and the ux
design story…

(there’s a page on the UI stuff too)

ABOUT THE PROJECT

It’s magic!

Ever wanted to quickly create a social media banner, perhaps a presentation or a leaflet but just don’t have the time or budget to wait for a designer? Meadow is a design and content platform especially for growing businesses or not-for-profits. Read more about Meadow and how Meadow began.

This page is dedicated to the UX design side of my role as lead UX-UI designer at Meadow. I’ve also created a page showcasing my work on the user interface design evolution of Meadow. There was just too much of a story to pack on one page. Please note the Brand Meadow website has very recently been updated and not reflective of my work. You can see the latest homepage I designed on the UI design page.

ROLE
Product owner, Scrum
UX, UI & product design
Testing
Visual identity
Branding
Marketing & sales

CLIENTS
Barclays
Rainbow Trust
Whizz-Kidz
Many more

 

Behind
the scenes

I’ve been on a fantastic UX journey over the last few years. From ideation to the birth of the first high-fidelity prototype. From collaboration with testers to the user interface design of generation 2 of Meadow.

I’ve secured investment funding and got some amazing clients. There’ve also been many bumps in the road, a few potholes, traffic lights and plenty of diversions. After all, UX is a problem solving discipline. It wouldn’t be the same if it was a smooth ride…and where’s the highs without the lows!

Generation 2 Meadow: Ideation and flow

Meadow welcome brochure

Sketching the Meadow

Ideation with my co-founder, Dean

Client demo with Jack and the testing team

Background

GENERATION ONE: MEADOW

It all started when I worked as a design lead at a busy medium size charity. We needed a solution to empower fundraisers to easily create day-to-day materials whenever they needed them, without having to wait for a designer. And with a new brand, we needed to ensure consistency across all digital and print materials. This presented a great opportunity to develop a user friendly design & content platform to empower many experiencing the same content generation problem. 

Generation one: The solution

Time to create generation one of Meadow. We set about creating a high fidelity prototype for the first generation of the design & content platform. Users could create well designed branded materials with signed off imagery, fonts and colours. We wanted to guide the non-designer through the platform and ensure they couldn’t go off-brand. 

Choosing a template colour

Step boxes guiding the user

Choosing an image

Editing the poster in real time

Generation one: The challenge

A series of user tests and focus groups revealed that whilst the platform was performing it’s mission, (to empower users to create branded materials without the need for a designer) there were several usability issues that affected the overall user experience. Pain points, such as restrictive layouts and images and lack of design choice.

01

User research

I set about delivering qualitative research; including in-depth interviews, users testing and affinity mapping to understand the user experience of our product.

As UX design is an ongoing and iterative process; the following observational methods were used regularly in our product delivery cycles. Quantitive data is collected and analysed via the software which records usage, template generation and top users.

1.UX DESIGN & USER TESTING

User testing &
depth interviews

 

A sped up user testing session 

User testing objectives

User testing script

The user testing process

Good prep is key to any successful user testing session, so having pre-prepared testing goals and a testing script is vital. I usually find a friendly initial chat, followed by an overview of why/what we are about to do makes the tester feel comfortable and relaxed.

During this particular user testing round, I wanted to identify:

1. How users typically create branded materials,
2. Which sections of the platform worked well
3. Which sections could be improved.
4. Was the tester feeling empowered or frustrated? 

 

2. UX DESIGN & AFFINITY MAPPING

Affinity mapping

Affinity map session

The Affinity Process

I absolutely love affinity mapping! Like most UX designers, post it notes and whiteboards are our faithful pals. Affinity sessions are fun to run as they are collaborative and really help to consolidate all the information gathered from both qualitative and quantitive sources of data.

In this session, we sorted all the feedback from the usability sessions and positioned them into groups of feedback. We could begin to see recurring pain points and lack of clarity.

Many users were left hanging at the end of producing a design and didn’t know how to get back to the dashboard. Others found the step boxes  (which we’d put in to aid clarity) irritating and repetitive. 

 

User
journey map

3. UX DESIGN & BEHAVIOUR MAPPING

This customer journey map shows the highs and lows of a user flowing through generation one of Meadow during the early testing cycles. This highlights a few key pain points, such as too much restriction on the templates, no save button, sudden system error reporting and lack of design diversity. We needed to ensure that these pain points were urgently addressed in generation two.

Analysing the emotions of the user journey

02

Structure &
navigation

I like to keep things sketchy when looking at structure & nav flows. I usually find it’s the best way to visually share and iterate flows with the developer team without spending too much time on a polished flow. 

1. SKETCHING THE USER JOURNEY

User flow

Sketching the user flow for generation 2 of Meadow

The Sketch Process

I explored the different ways a user would be able to flow through the revised version of our platform. We wanted to test the idea of having more flexibility with editing of the templates whilst still having a useful guide for users. We found that over 50% of our testers wanted to “drag & drop” layouts rather than simply click. This is one of the final drafts in our flow process.

 

Navigation

2. SKETCHING THE INFO JOURNEY

I then shared sketches of each screen state and interaction during the navigation process and decided to trial drag & drop for every interaction such as selecting layouts and imagery.

Sketching the user-flow

03

States

I like to constantly review the interactions we have, from drag & drop to tiny micro hover action states. All incredibly important to the user experience.

Drag
& drop focus

1. FROM DRAG TO DROP IN SKETCHES

We explored how the drag & drop interaction would function, initially as a low-fidelity sketch. Amazing how a simple interaction needs to be tested, tested and tested!

Sketching the drag & drop interaction

Drag & drop
ui design

2. HOW THE UI WORKS

Here’s the drag & drop in action. Testing prooved that most users got this unteraction very quickly. However, testing flagged up some other issue with the scroll bar. Initially we had a swipe scroll bar as we thought it would be easier for our tablet users. This prooved to not work so well for desktop users, so we replaced swipe with scroll up and down arrows. This suited more than 80% of our users who tend to access the platform from their desktop.

Meadow drag & drop templates to artboards

04

Prototypes

Sketching opens up more creativity and drastically helps with the re-iteration process including interacting with developers and other stakeholders. Recently, I like to do low-fidelity prototypes using Adobe XD and then once these have gone through a collaborative process, I tend to design the look and feel of the user interface using the same framework. This saves a lot of time and energy.

1. LOW FIDELITY PROTOTYPES

Low fidelity
prototype

The Fidelity Process

Here’s my protype “skin” based on the last drafts of the user flow and nav sketches. It’s starting to look like a product now but is still very much open to iteratons since I haven’t yet spent oodles of time desiging the user interface. I added interactions using Adobe XD and used the same final draft to add notes as a wirferame for our developers.

Closer up

2. LOW FIDELITY TO WIREFRAMES

1. Dashboard showing templates and quick to access edits. The user scrolls down the dashboard to see more template options.

2. The user chooses a template. Shows hover state.

3. The user is directed to a preview of the templare after clicking a template

4. The new template button darkens on hover.

5. The user navigates to a ‘create’ page with empty artboard on the left, guide text pointing to a layout on the right slider. The cursor is active on the title area. 

6. The user can type in a title for the new design or do this later.

7. If the user types in a title and hits return, the guide highlights with text saying ‘Great. Now choose a layout and drag & drop across to your artboard.’

8. The user scrolls through the layout slider options. The layout shows as active on mouse over. and the artboard is also highlighted showing where the layout needs to be dragged to.

9. The user starts to drag the layout across from right to left.

10. The layout is dragged across close to the artboard, shown as active until dropped.

11. The layout is dragged across and appears on the artboard, ready to edit.