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
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.