Jargon-busting champion for the end-user
UX Designer, Frontend Developer, Graphic Designer & Technical Copywriter
— 3Si, Newcastle-Under-Lyme
Organising the organisers
Who are 3Si, and what do they do?
Derived from their surname Chris Sinclair, Pete Sinclair, and their Father – a silent partner, 3Si handle membership and subscription data. With 20 years of integrity their in-house CRM has evolved to become: OM.Net.
The OM.Net platform has been developed for Nonprofit Organisations such as Mensa, The National Farmer’s Union and Trading Standards. The web platform operates for clientele such as The Pathological Society.
As the Customer Champion, I went beyond jargon-busting the flagship product. I encouraged a wave of organisational changes, starting with the elimination of unnecessary complexity to lay the foundation of a customer-first Service Design initiative – one, that everyone could get behind.
This challenge led to an awareness of realigning with user needs, embracing critique by over coming resistence to change.
Responsive Web Design Prototype
Facing down issues one-by-one
- Broadly impacting the business, I began by holding discovery sessions with Senior Heads of Function to determine rationale and accountablity.
- Highlighting UX issues, such as: confusing patterns and inconsistent logic.
- Articulated universal principles such as the psychology of familiarity, lingustic consistency, layout and hierachy. Aiming to axe incoherent “Screens”.
- Engaged in deep-research with a primary interest in product development.
- Accumalating organisation-specific terminology.
- Analysis of sales onboarding process: leveraging human behaviour for better outcomes.
- Diligently absorbed the product offering (as an imperative), before making recommendations, or conducting fresh design work.
- Included internal Product Owners as key Stakeholders. Originally they wrongly considered themselves outside of this important evaluation.
- Encouraged Junior staff to persevere with the OM.Net Driving Test. Our group managed a 100% pass rate! Although, previously everyone failed first time.
- Introduced the Development Team to The Double Diamond Methodology, to systematise iterative feedback into their work.
- Promoted Service Design concepts, initially applied to lighten overall handling of support-tickets.
- Overcame resistance surrounding UAT (User Acceptance Testing), to make the process geniunely in favour of the end-user and an organisational priority.
Structural organisation & arrangement
- Launched a campaign promoting the benefits of Information Architechture (IA), to anchor conversations around common words and terms.
- Began the process of overcoming product-related confusion.
- Creation of an accessible, company-wide glossary, underpinning with the simplification of the marketing material.
- Redesigned the style guide to reassure heads of function as to the importance of fundamental principles of graphic design such as hierachy, layout and typography.
- Structural representation was necessary prior to the delivery of UI exploiting user centered design principles.
- Attempted simplification (inspite of a legacy offering), to produce flows that steer people toward as few decisions as possible.
- The goal is not simplification per se, but linguistic hygiene… and apply conventions that reduce distractions (such as visual noise or jargon).
Developing a CRM platform doesn’t need to be overly complicated. 3Si required technical design improvements in-keeping with 20 years of heritage.
Rewriting their Brochure for an audience of non-technical people, I explained the benefits, without jargon. The company has their own lexicon, so this project was the first to incorporate their new glossary.
With near-absolute autonomy over an intensive period, the marketing material was produced with laser-focus in just 7 weeks.
With an emphasis on readability, people can find the information they need. The goal of task-based information handling is to help people make the right purchase decision.
A simple UI was produced to document the new terminology in one place. This was written to hold and maintain attention, answer common questions and chime the right note – without duplication. A perfect opportunity to overhaul the homepage.
Harmony & rhythm
Eye tracking is fantastically capable for modern authours. Before delving into high-tech solutions, however, I went for the most classic device. To truly place emphasis on readability, we must understand the underlying page – what comes before content?
The earliest formal tools for composition and layout were crude. The Villard de Honnecourt Diagram (or Villard’s Canon), however, still has a modern application in illuminating the blank page.
Villard’s Canon can remove ambiguity by establishing a typographical box.
This works by horizontally and vertically subdividing the space. Naturally, margins emerge… two ninths for the inner margin and one for the outer margin, and one ninth for the top margin with two ninths for the bottom margin.
Magically, this reveals the text-area and paper size are of equal proportions. Also know as Rosarivo’s Canon.
What’s magic about that? See for yourself: whatever the page format, it always brings geometrical rhythm which in-turn, informs the proportions of the typeface.
Modern technology meets a traditional graphic design background.
Harmony & rhythm.
Research into the F-Shaped Pattern helps mitigate comprehension issues. By defining content by user intent, we create a Page Agenda overcoming common eye tracking results:
Page Agenda from 3Si:
- Make headings pop! The Myriad Pro typeface has multiple weights to distinguish hierarchy.
- Remove ambiguity. What does our reader infere from the page? Answered in the first paragraph establishes information scent, reassuring the reader about the content.
- Exploit laziness. Headings convey more information when they’re read, so using fewer words means they’re more likely to be parsed.
- Group content by applying IA to each page.
- Test often and iterate. Audiences make assumptions, going beyond a second pair of eyes is invaluable.
Content without boundaries
The marketing material has an emphasis on clarity. Although the visual language of OM.Net required a nod to what was already in circulation.
Following the the initial IA phase, the design continued to take shape as a cohesive package across print and screen. A Responsive Web Design prototype was then optimised for mobile. Epirically tested on small, low-bandwith devices.
Responsive Web Design Prototype
A design which can overcome poor visual acuity should also work for people with no visual issues. This was how I began combining colour and shape to inform atmosphere and create a Visual Language.
To be adaptive to people’s needs, a colour‑blind theme was developed using concepts born out of consumer psychology, applied at the design stage.
Colour can be useful within the context of information gathering – it acts as a clue telling people if they are nearing their goal. What looks “hot”, what should I visit, is this a group?
The icons and layout became harmonious across print and screen intentionally making the UI an extension of the brand.
Each template was designed to reduce production time, unnecessary decision making and error rate. Both the prototype landing page and the print material contain the same refreshing content.
- Aligned organisational priorities with Maintainence Developers.
- Proposed dramatic reductionist design to user-flows aimed at improving familiarity.
- Incorporated user centered design principles, such as: discoverability, distraction-free relevance and task-based information handling into various product offerings.
Writing CSS & HTML
- Prototyping Webapp, similar to spreadsheet application. Cleverly nesting data within a mobile context.
- Designing a new, clean user interface for the web product.
- Produced a high performance static site – written after the fresh perspective on their marketing material, whilst honouring branding already in use.
Scott fully understands the concepts of design… how things flow and the way the message is conveyed to the user. – Chris Sinclair Managing Director, 3Si