As form follows function - UI follows UX
by
No items found.
How would you design a product which can be used constantly by millions of people? Let’s say, the chair.
A product designer would start by underlining its basic function - to sit on. He would then go on to identify the context within which this chair is going to be used - by whom and where. Whether it is used by someone at a bar, or while reading a book or watching TV, the way the chair is used determines its overall design.
All of these are essentially chairs, but not all have the same function. Think of it this way, it would be pointless to have a bar stool in an elderly man’s living room, because a sofa is more comfortable for him to sit on while watching TV.
Upon establishing the product's ultimate objective, the designer would then need to research how his target market would interact with the chairs. The person at the bar, typically strong and energetic, is likely to sit comfortably on a high, swirling bar stool — but this would be a less typical scenario for someone who needs a chair which is easily accessible and sturdy. This is where ergonomics comes into play.

In Google’s words, ergonomics is “the scientific discipline which deals with understanding the interactions among humans and other elements of a system. The profession that applies theory, principles, data and methods to design, in order to optimise human well-being and overall system performance.” Understanding this is the first step.
This process and planning occurs before any product designer can actually start designing a chair. The exact same thing can be said for a UX/UI designer (or “Digital Creatives”, as we call them) who need to undertake a similar process before working on the UI.
So in our case, the UI (user interface) is how the final bar stool, or that old man’s TV sofa is going to look when produced - its overall look and feel based on the choice of colour, fabric, texture and finish.
This comes after establishing how the user will interact with it - the UX (user experience), or how I’d like to call it - the ergonomics of the web.
This comes after establishing how the user will interact with it - the UX (user experience), or how I’d like to call it - the ergonomics of the web.
Identifying user personas and mapping out user journeys
Clearly, we need to start by understanding who’s using our product. User personas are the typical users of a particular product or platform. They are created as part of the research process, conducted before the start of a project. These are useful to help outline the behaviours, objectives, needs and challenges a user often faces when using a particular platform.

Identifying user personas is a key element when designing a website. It helps you map out your user's journey when navigating through the platform you’re designing - be it a website or an app.
Establishing who and how your platform is used allows you to identify what’s most important to your user and the ultimate journey they would need to take to get from A to B.
Having an ongoing content strategy
A common mistake when creating a website is that content is often neglected or left as an afterthought. Bear in mind that your users will visit your site to access your content. So a content strategy, built around the personas we established earlier, is a crucial part of your planning and an ongoing process - starting with auditing, planning, editing, revising, posting and updating.
A solid content strategy will set a sound foundation for the next stage in the process. It will exponentially improve the way you work in the information architecture stage.
Information architecture: Creating a sitemap and wireframes
Information architecture creates a structure for the platform, allowing users to understand the information in relation to their position. With your user personas and journeys in mind, and an idea of the content you would like to include, you can now start creating a sitemap by structuring the site content into a hierarchy.
Wireframes will then tie all this in and help create a visual representation of the connection between each of the pages and finally enhance the platform’s flow.
This will give you a clearer understanding of what the end result will look like, and will help you map out how your users will navigate and experience the pages of your platform. At this stage, you follow your users’ journey and ensure they never get lost or confused. This can be avoided with evident signposting and “call to actions” or buttons.
With this at hand, we can create prototypes and test the platform, to make sure that all user personas fulfil their goals while embarking on their journey on the website or app.
Then comes the .. (wait for it) .. UI
The user interface needs to be intuitive and easy to follow for your users. Fonts, spacing, colours, buttons and icons are there to help guide your user through your platform.
Although all these elements are there to help the designer achieve an inviting and functional layout, too much can also have the opposite effect — rather than helping the user, it may distract your user from reaching his final goal.
This can be prevented by creating a style guide or style sheet to ensure all the elements work together in harmony, providing uniformity and continuity to your project.
Takeaways
- Know your target market. Who’s going to use your website or mobile app?
- Content is much more important than your cute hipster pictures.
- The more time is spent planning in the UX phase, the more money is saved from coding.
- If you have everything (the foundation of the project) in place, the fun bit, that is, the UI is more fun in the end.
Basically, you can have the coolest chair ever - but if the person you made it for can’t use it, it’s just a waste of space.
