Having taken a break from my full time job I’ve been really enjoying getting my nose into lot of books and articles that I just hadn’t had the time to read. I’m also getting my head around various ways of working to truly understand the differences and when each are are best used. It’s easy to get stuck in that way of thinking when you’re working full time in a single company which uses the the same processes across projects. Taking a step back has really helped me realise the pros and cons to the ways of working I’m previously used to.
Option A - Building a website with a CMS and an off-the-shelf CMS theme
Useful for marketing or e-commerce website with a common/simple structure.
Themes usually allow for colour and minor style changes, sometimes allowing custom CSS. This is good for articulating a brand identity
Modern themes usually have responsiveness baked in
Maintenance is required. You’ll have to keep things up-to-date and secure as updates are released. This includes the CMS installation (e.g. Wordpress), your theme, any plug-ins, even the underlying software on the hosting server
Website can become bloated with superfluous features offered by the theme
A UX consultant can help their client to understand the needs and functional requirements of the website, help pick out the most suitable theme, define the pages and where content sits.
Most of the visual design is pre-defined by off-the-shelf themes. However, visual designers can make decisions around any custom styling (if available) and how this needs to be updated to reflect the brand identity.
Option B - Creating a bespoke website using a UI framework
For example, Bootstrap or Semantic UI
Useful for anyone who needs a custom website/application with specific functionality. Smaller companies that can’t afford to invest in a custom pattern library and who know the functionality of their website/app will increase over time through iterative releases.
Can integrate your preferred CMS (e.g. Perch)
The styling can be customised to reflect the brand identity through
Much faster than building your own custom UI framework and so you can quickly get an MVP website up and running
Frameworks have responsiveness baked in
Code can be quite bloated as there will be a lot of the UI framework which is unused
Components are restricted to what is offered by the framework, though components can be grouped together to create additional features
A very collaborative approach with visual designers and developers that will see the UX designer through several stages: Define the Information Architecture, User Journeys, Content Strategy/Analysis, Lo-fidelity wireframes (blocks on pages), choose components from the UI framework to use in the hi-fidelity wireframes maybe making a few tweaks as needed, design page templates.
Decisions around the custom styling and how this needs to be updated to reflect the brand identity
Option C - Building a website with a custom UI framework/pattern library
For example, atomic design.
Useful for anyone who needs a custom website/application with specific functionality and components, who doesn’t want the bloat of using an already existing UI framework and who wants their website to look unique.
Speed: Low (not as low as other less lean and agile methods of similar vein)
Can integrate your preferred CMS (e.g. Perch)
Having a living pattern library means you can have a more consistent interface design and experience
You can set up your pattern library as a living source code which when updated will update on production website (Lonely Planet managed to do this by building a custom API called Rizzo). This means an efficient workflow and no conflicts from design to code
Allows you to add/change pages on a regular basis by utilising page templates and living components.
Useful when designing websites that have lots of pages using the same page template (in these cases the page needs to ‘work’ regardless of the exact content of the page and this is achieved using atomic design because you design without content initially)
Longer set up time and more testing required, as there are no predefined considerations (such as responsiveness, accessibility, etc.)
A very collaborative approach with visual designers and developers that will see the UX designer through several stages: Define the Information Architecture, User Journeys, Content Strategy/Analysis, Lo-fidelity wireframes (blocks on pages) and Design hi-fidelity atoms, molecules, organisms, page templates
Style tiles of overall styling and design of components (organisms) which will be translated into code, some full page mock ups to validate the design of components and overall styling
UX research can be done as part of all of these projects
Ultimately it is the job of a UX Consultant to steer the client in the right direction for which way of working is most appropriate, but usually its very clear from the offset
