As part of our web design series, we recently explained the process we follow when designing the UX of a website. If you’ve not read that already, it will be useful to go and have a look first before reading this article.
A study by Forrester Research has found that a well-designed UI has the potential to increase your website’s conversion rates by up to a 200% while UX design could raise conversion rates by a staggering 400%.
Whether you’re working with a web design and development agency or an independent designer, this process is equally important. Nailing the UI design process is a crucial step towards producing a website that will maximise engagement with your target audience and help you achieve your business goals.
So, let’s take a detailed look at how to run a successful UI design process.
User Interface (UI) Design at a Glance
The UI design process is the creation of the visual design elements of your website. Think about UI as the way in which you convey your brand’s visual identity and bring your UX to life. The UI is there to facilitate the UX.
How Does the UI Design Process Work?
Earlier in the process, we recommend conducting a visual exploration exercise, using mood boards to gain a clear understanding of how your brand will be conveyed and how your website will look and feel.
That visual exploration phase of the project is a pre-cursor to your UI design, as it creates the visual identity of the website, including use of colour, font, blank space, buttons, and more. Some agencies do this as part of the UI phase, but here at SoBold we like to keep it as its own stand-alone phase. You can learn all about the visual exploration phase and how it works here.
After you’ve been through the UX design process, you’ll have approved a set of wireframes, which give you a blueprint of your website’s structure and flow before anything is built properly.
Once you’ve approved those wireframes, then the visual design created with the mood boards will be applied to bring them to life. This is essentially how you create your UI.
Your agency will typically begin with the design of your website’s homepage. Like each phase previously, you can expect this UI design process to be collaborative. Be prepared to have all the stakeholders available to provide feedback to your agency, and work with them to perfect the design when it’s combined with the wireframes.
Once the homepage is approved, your design will then be applied across all the pages of your site. Again, this is an iterative, collaborative process based on feedback and revisions.
Responsive Design Testing
On completion of the desktop designs, your agency partner will work on designing the site across multiple break-points. To ensure your site is responsive across all the most popular devices, the following break-points should be tested as a minimum:
- 1,920px – This covers most external computer monitor sizes
- 1,366px – This covers most laptop screen sizes
- 992px – This covers most Notebook and iPad devices
- 768px – This covers most other tablet devices
- 375px – This covers most smartphones.
You’ll then reach the exciting part, where your website is fully designed for you to view, test, and play around with. Once you’re happy with the design across the different break-points, your agency partner will be ready to prepare the design for a development handover.
What Does Effective UI Design Involve?
Good UI design is something that should feel seamless and almost invisible to your visitors when they land on your website. The aesthetics and visual style should be simple and engaging, while not distracting from the UX.
These days, you only have a matter of seconds to make a positive impression that can retain your visitors’ attention, so it’s crucial you don’t over-complicate things. But what differentiates good UI from bad UI in practical terms?
Like with UX design, there are some best practices you can follow to ensure your website has an effective, attractive UI.
Follow these guidelines to create a UI that delivers the desired experience for your visitors and supports your website’s strategic objectives:
- Keep your design simple and your content succinct
- Prioritise the preferences and best interests of your target audience
- Make your design elements as clear as possible
- Maintain consistency
- Ensure your brand, and your company’s identity, have been accurately represented through the design
- Use power of visual imagery to capture and retain your visitors’ attention
- Make your call-to-action as strong and compelling as possible
- Don’t create anything that interferes with the goals of your UX.
Check out our related article for seven helpful tips to ensure your website is designed with great usability here for additional guidance.
The Importance of Accessibility
Accessibility is the practice of making technology as easy to use as possible, and fully accessible to everyone. While web accessibility is largely intended to help people with disabilities gain better usage of technology, it’s also much broader than that.
There are people who have difficulty using certain types of, or aspects of, technology who don’t have a disability. For instance, someone with deteriorating eyesight may find it difficult to read small text on a smartphone screen.
It’s also important to ensure your website is as easy to use as possible for the average person as well, because you should always strive to deliver the best possible UX for all your visitors. Accessibility is a key driver of this.
The Web Content Accessibility Guidelines (WCAG), which are used to define what constitutes good accessibility, lists four key principles of web accessibility that should be followed by all websites.
This means your website must be:
- Perceivable
- Operable
- Understandable
- Robust.
Web accessibility is an important topic, so we’ll talk more about that in a separate article. For now, it’s worth noting that any web design and development agency you work with should consider accessibility a top priority when designing the UI of your website. If they don’t, you should challenge them and ask why not.
Here at SoBold, this is built-in to all our design processes. We believe that all technology should be inclusive and equally available to everyone, regardless of their physical ability, location, personal background, or any other factors.
Some design best practices that we’d recommend you always follow to ensure your website is fully accessible, from a UI design perspective, include:
- Use contrast and blank space to make your content easy to perceive
- Use bold colours
- Use font sizes no smaller than 14px for desktop and 13px for mobile across the whole site (although, this does depend on the font you use)
- Use headings and structure correctly to organise content clearly on each page
- Make all your content easy to both see and hear
- Write all your copy in plain, simple language
- Avoid any flashing or blinking imagery or video content
- Write simple, clear, and helpful error messages.
Preparing Your Website for Development
As you can see, UI design is mainly a case of applying the visual design that was created with the mood boards to your UX wireframes with the agreed flow. Good UI is no more than a clean, simple design that accurately represents your brand identity. While it sounds straightforward, it’s important to remember this is just one phase in the holistic, end-to-end process of web design.
To conclude the design process after the UI is complete, your agency will prepare your site’s designs for development. To learn how this process works, understand what to expect, and ensure your own web development process runs smoothly, read our next article in the series here.
Would you like these insights straight to your mailbox?
- Innovation
- Creativity
- Clear strategic thinking
- Effectiveness
- Tangible results.
- Make a critical client engagement process increasingly efficient and effective
- Provide each user with a personalised experience that includes tailored investment information and updates
- Obtain more data about user engagement and leverage that to improve other services
- Accelerate and increase investment in client funds, driving significant commercial growth for the firm
- Use an industry-first digital tool to gain significant competitive advantages.
Digital Business
28 February, 2023
Seven Simple but Effective Tips to Improve the Usability of Your Website
Providing your website’s visitors with a great user experience (UX) is a challenge. Especially for corporate websites that require sophisticated features and functionality, this can be an ongoing struggle. But it’s a challenge you need to solve if you want to stay relevant and remain competitive in today’s digital business landscape.
Usability is the measurement of how easy or difficult your website is to use for your audience. Good usability makes the experience of using your website as convenient and simple as possible for all your site’s visitors.
Despite the obvious value of this, usability is often neglected by businesses when building a website. That could be because you don’t have the time or budget to follow best practices, you don’t have the in-house design expertise, or you simply aren’t aware of just how important usability is today. Whatever the reason, you can’t afford to take the risk of releasing a site with a poor UX.
Understanding the Importance of Web Usability
You’d be amazed by how many websites these days fail to give their users an experience that delivers on their basic expectations. If your website falls in that category, poor usability may have an influence on whether your users adopt or reject your site. This could be the difference between a visitor abandoning a poorly designed page or sticking around and converting to become a customer.
So, how do you ensure your website doesn’t end up on this ever-growing list of failures?
The key is to focus on your users’ needs, and put yourself in their shoes when planning, designing, and developing your site.
Even if your site isn’t customer-facing, good usability is also crucial for internal systems. Employees are users too, and their adoption – or rejection – of your technology will also have an impact on your business.
This is easier said than done, we know. That’s why we’ve provided a selection of tips and advice to help you overcome this challenge.
How to Improve the Usability of Your Website
1 – Keep it Simple
Whenever you’re thinking about UX, always follow the rule that simplicity is best. If a website has a design or functionality that’s complicated, its usability will suffer. Try to keep things as simple as possible at all times.
2 – Nail the Fundamentals
While some design choices, like colour and font, can be argued as subjective, there are certain aspects of usability that are more objective. Getting the fundamentals right will help you ensure you’re delivering great usability.
For example, optimising your site to ensure its pages load quickly, organising your pages with proper headings and sub-headings, making sure clickable buttons and links stand out, avoiding making any text or touch-points too small, even providing clear, useful error messages, and so on.
3 – Adhere to Accessibility Guidelines
Usability shouldn’t be confused with accessibility. Accessibility’s purpose is to make all technology accessible and easy-to-use for everyone, equally, with a significant focus on those with disabilities and other difficulties.
To ensure your website meets the current requirements for accessibility, you need to follow a set of principles and standards known as the Web Content Accessibility Guidelines (WCAG), linked here.
If you’re working with an agency, they should have best practices for accessibility already incorporated into their approach. Make sure you check this anytime you’re evaluating agency partners for a website project.
4 – Learn from Experience
We’re all users of websites, and we all know how it feels to encounter a frustrating UX. Use your own experience of this to try and build empathy for your users and what they might like and dislike. Any time you come across a website that gives you a bad experience online, make note of this and ensure you don’t allow similar problems to creep into your own site.
5 – Don’t Make Assumptions
While the previous point is important, it’s also crucial to realise it’s not enough. Using your own experience will only get you so far and, in some cases, it could even cause additional problems.
Remember that usability is dependent on delivering for your target audience’ personal preferences when interacting with your website. It’s always risky to assume you know how your users think and feel.
Don’t make decisions about design and functionality without considering who the target users are and what they need from their experience. This leads us nicely into the next point.
6 – Test With Real Users
It’s always necessary to test the usability of your site with real people who are part of your target audience. The best way to ensure your website will provide a great UX is by asking real-life users to test it out, collect their input, and put that feedback into the final version. This is known as usability testing, which is a phase of the design and development process that every successful project requires.
7 – Know When to Ask for Help
All of these tips are helpful to be aware of, but for the average business they can be daunting and difficult to put into practice. That’s why the majority of large businesses with outstanding websites have worked alongside a specialist agency partner with expertise in user-centric design. To ensure your site has great usability, it’s often necessary to find the support of an agency who has proven experience delivering similar projects successfully.
Usability Should be a Priority
Usability is crucial to the success of any website, but it’s something most businesses are still struggling to get right. Ultimately, though, your users are the ones who will determine the success or failure of your investment.
You have to put yourself in their perspective when designing and developing your site, and that includes getting real people’s feedback and approval. Only then will you create something that meets your target audience’s expectations for speed, convenience, and simplicity.
If your website provides a clunky or frustrating UX, most users today won’t hesitate to go elsewhere rather than waiting around to complete their task on your site. If that task in question is purchasing a product or service, you’ll see that poor usability will eventually begin to have a negative impact on your business.
Following the tips and best practices listed in this article will help you avoid that trap and create a UX that’s better than most websites. Doing that will begin to drive positive outcomes like greater adoption rates, improved customer retention and loyalty, and a stronger return on investment.
To continue learning with a deeper dive into the topic of web usability, including more insight into its principles, additional guidance on design best practices, and current trends and future predictions, read our related article here.
Would you like these insights straight to your mailbox?
Company Milestone
8 June, 2021
SoBold is a Proud Clutch 100 Fastest-Growing Company for 2021
Clutch is a B2B review and rating platform that spans the IT, marketing, and business services industries. The site annually holds an awards cycle to celebrate the best and brightest service providers from the aforementioned sectors. SoBold are delighted to be one of the Clutch 100 fastest-growing companies for 2021!
“The Clutch 100 growth lists represent the top service providers based on revenue growth over the years,” said Clutch Founder Mike Beares. “Their recognition is only possible because of their willingness to participate and their commitment to delivering the best services to their clients.”
“We are delighted to be recognized as a Clutch Leader. This award highlights our consistent project success and growth as a business,” said SoBold Managing Director, Will Newland.
Would you like these insights straight to your mailbox?
Announcement
24 September, 2022
SoBold is an accredited Living Wage employer
SoBold has continued to be an accredited Living Wage Employer and has formally made a commitment to ensure all new and existing staff contracts are renewed at the Living Wage rate as a minimum.
SoBold has been a Living Wage Employer since 2019 and they are committed to ensuring that all staff are treated fairly and remunerated fairly in line with the Living Wage Foundation.
The new Living Wage rates were announced on Thursday 22nd September 2022 and SoBold ensured that all staff pay is in line with this.
SoBold hope to see more agencies within the technology sector follow suit and become accredited.
SoBold Managing Director, Will Newland said:
We are proud of the people that work at SoBold and we truly care about them. Our staff have always been the life blood of our organisation and it is an absolute no brainer for SoBold to be a Living Wage employer.
Would you like these insights straight to your mailbox?
Development
9 November, 2023
Regulation of digital markets: Comparing UK and EU approaches
Digital markets have experienced significant growth and dominance by a few companies and their platforms, raising concerns about competition, consumer choice, and data access. To address these issues, both the European Union (EU) and the United Kingdom (UK) have introduced regulatory reforms.
The EU has implemented the Digital Markets Act (DMA) and the Digital Services Act (DSA), while the UK has proposed the Digital Markets, Competition, and Consumer Bill (DMCCB) and the Online Safety Bill.
We’ll look at the regulatory approaches taken by the EU and UK, highlighting similarities and differences in scope, applicability, the importance of consent and how to get started with compliance.
Data privacy regulations in the European Union
The Digital Markets Act applies to companies designated as “gatekeepers” by the European Commission. Gatekeepers are the owners and providers of what the Commission identified as core platform services (CPS), such as search engines, social networking services, video-sharing platforms, and cloud computing services.
Companies designated as gatekeepers must carry out self-assessments to determine that they have met and continue to meet both quantitative and qualitative criteria. The list of gatekeepers may grow or change over time based on these criteria.
The quantitative criteria include a minimum annual turnover of €7.5 billion in the EU and at least 45 million active monthly users on the relevant platform or service in the last three financial years. Qualitative criteria consider the impact, importance, and market position of the CPS provider.
The DMA’s requirements are similar in many respects to those of the EU’s General Data Protection Regulation (GDPR), but are broader in some ways, addressing additional access to and uses of end users’ personal data.
Data privacy regulations in the United Kingdom
The Data Protection Act 2018 (“DPA”) covers the general processing of personal data in the UK and came into force on 25 May 2018, just before the EU GDPR took effect.
Following the end of the Brexit Transition Period, the EU GDPR became part of UK law through the European Union Withdrawal Agreement, and the Data Protection, Privacy and Electronic Communications Regulations 2019 (Exit Regulations).
The EU GDPR gave rise to the UK GDPR, which came into force on January 1, 2021, as the EU GDPR no longer protected UK citizens’ data. It includes the provisions of the EU GDPR with only minimal changes to the core principles, rights and obligations for data protection.
The UK GDPR and the DPA 2018 (amended version) are now the principal data protection regulations in the UK. They require businesses to protect individuals’ data, obtain consent to collect and use it, and protect data subjects’ rights.
The Privacy and Electronic Communications Regulations (PECR) implemented the EU’s ePrivacy Directive (Directive 2002/58/EC) and sets out privacy rights relating to electronic communications. The PECR came into force in 2003 and .
The “British DMA”: Enter the Digital Markets, Competition, and Consumer Bill (DMCCB)
In the U.K., Parliament has yet to pass the British equivalent of the DMA, the Digital Markets, Competition, and Consumer Bill, or the DSA equivalent, the Online Safety Bill.
The DMCCB applies to digital commercial operations in the UK or affecting the UK market, which are deemed to have Strategic Market Status (SMS). The definition of a digital activity is broad and includes any service provided via the internet.
To qualify as an SMS, a firm must meet criteria such as conducting a digital activity linked to the UK, having substantial market power, and holding a position of strategic significance. Turnover thresholds of £25 billion global turnover and/or £1 billion UK turnover are also considered.
Obligations and requirements
European Union: Digital Markets Act
The DMA imposes various behavioral obligations on gatekeepers. These include allowing third-party interoperability, granting access to user-generated data, promoting fair competition, and prohibiting preferential treatment of the gatekeeper’s services.
Gatekeepers must appoint compliance officers and submit annual compliance reports to the Commission.
Additionally, gatekeepers are required to inform the Commission about mergers (any “intended concentration” irrespective of whether they’re notifiable under the EU Merger Regulation or national merger rules. (DMA Art. 14.).
United Kingdom: Digital Markets, Competition and Consumer Bill
Strategic Market Status (SMS) firms in the UK will be subject to strict behavioral obligations under the DMCCB. These obligations revolve around fair trading, open choices, trust, and transparency.
The specific requirements will be tailored by the Digital Markets Unit (DMU) and the Office of Communications (Ofcom), the regulatory bodies overseeing the DMCCB and the Online Safety Bill, respectively.
SMS firms must also report proposed acquisitions meeting certain thresholds to the DMU.
EU vs. UK processes
European Union: (Digital Markets Act)
The EU’s legislative-driven model designates gatekeepers based on size and imposes behavioral expectations through regulation. The European Commission develops and enforces these requirements for compliance from gatekeepers.
United Kingdom: Digital Markets, Competition and Consumer Bill (DMCCB)
The UK’s approach involves more regulatory discretion. The DMU and Ofcom determine if a company has Strategic Market Status and tailor specific remedies accordingly. This approach allows for a more flexible and tailored oversight of digital platforms.
Participatory regulation
In the UK, both the DMU and Ofcom adopt a participatory regulation approach. This means regulators work closely with target companies to develop behavioral expectations and codes that can be enforced. The companies conduct their own Duty of Care analysis, which is reviewed by regulators that provide guidance and work collaboratively to define behavioral codes.
This means that beyond what’s defined by the two regulations, gatekeepers and SMS are required to determine their own privacy requirements to apply to third-party businesses using their services.
The importance of consent management for EU, EEA and UK companies
While both the European Union’s Digital Markets Act (DMA) and the United Kingdom’s Digital Markets, Competition and Consumers Bill (DMCCB) emphasize the significance of obtaining user consent for data processing activities, there may be variations in specific requirements and implementation.
To address these differences and get ready for data privacy compliance, follow these steps:
1. Understand the regulations
Familiarize yourself with the specific consent requirements outlined in both the DMA and DMCCB. Identify any variations in terms of lawful bases for processing, explicit consent, and additional obligations.
2. Assess your website or online platform’s data processing
Assess your organization’s data processing practices and identify any areas of noncompliance. Scan your website and check its degree of GDPR compliance.
3. Implement a leading European consent solution
Choose a consent management platform that enables GDPR and ePrivacy-compliant user consent collection and signaling for DMA compliance. Ensure that the CMP provides features such as granular consent options, secure recordkeeping, and user-friendly interfaces.
The specifics of CMP implementation do depend on what platforms you’re using, like your CMS, as well as other tools, including Google Tag Manager and other services. Cookiebot CMP is flexible, has direct integrations with leading website platforms, and can be installed with just a few lines of JavaScript. There’s also a cookie WordPress plugin.
4. Customize consent banners
Tailor the consent banners displayed on your website or online platform to meet the specific requirements of each regulation. Provide clear information about data processing activities, purpose specification, and the ability to manage preferences.
5. Update your privacy policy
Review and update your privacy policy to align with the requirements of the DMA and/or DMCCB. Include details about the types of data collected, the purposes of processing, parties with access to the data, and how user consent is obtained and managed.
6. Train your team
Educate your staff about the nuances of both regulations and the proper implementation of consent management. Ensure they understand their roles and responsibilities in obtaining and managing user consent.
Final thoughts
The UK and EU regulatory initiatives are creating de facto global digital risk management standards, by taking significant steps to regulate digital markets and addressing concerns related to market dominance, competition, consumer choice, and data access.
While the EU has implemented the DMA and DSA, the UK is in the process of enacting the DMCCB and the Online Safety Bill. The approaches differ in some aspects, but there’s a shared goal of promoting fair competition and protecting consumer interests.
Would you like these insights straight to your mailbox?
Announcement
23 May, 2023
SoBold Selected as a Finalist for The Drum Awards for Marketing for Digital Transformation
We’re thrilled to announce that SoBold has been nominated as a finalist for an award at The Drum Awards for Marketing.
We’ve been nominated for our team’s outstanding work developing RedeWire, a unique, “game-changing” online portal for global financial services business Rede Partners LLP.
The Drum Awards for Marketing
The Drum Awards for Marketing are intended to highlight agencies and marketing teams that truly understand their clients. Focusing on outcomes, not outputs, these awards are designed to celebrate teams who have demonstrated the measurable value their work has delivered for their clients.
We’ve been nominated as a finalist in the transformation category. This category rewards creative and innovative thinking from agencies who have created a change in model or product to enhance experiences for their clients and their end-users.
The criteria on which the finalists were selected for this category included:
We’re incredibly proud to be named as a finalist for this award, especially since innovation, creativity, and strategic thinking are qualities that we actively strive to put into every project we work on for our clients.
“Game-Changing” Innovation – the RedeWire Platform
Global private equity (PE) fundraising advisory firm, Rede Partners, has a mission-critical process of keeping a large network of limited partner investors (LPs) updated with relevant, timely information about opportunities to invest in client funds.
The previous method of communicating this information to LPs was a large static PDF doc, produced once per quarter, shared with LPs via email. That approach is standard within the fundraising advisory industry, with many of Rede’s competitors using a similar approach.
But the Rede team recognised this needed to become more engaging for their clients, and our team here at SoBold provided an opportunity to innovate and transform this process.
We worked closely with Rede’s stakeholders to understand their challenges and define a clear set of strategic objectives. This allowed us to identify a way to remove this long-winded, one-way communication process with LPs and create a dynamic, interactive online portal.
RedeWire is the first of its kind, and has been identified as a “game-changer in the industry” by Rede’s LPs.
RedeWire successfully met Rede’s complex set of requirements, allowing them to:
The portal has already exceeded expectations for adoption, as it has made one of Rede’s critical points of communication with investors more efficient, effective, and engaging.
Check out our case study to learn more about the RedeWire platform here.
What they Had to Say
Gabrielle Joseph, Head of Due Diligence and Client Development at Rede Partners LLP, said:
“Originally conceived as a game-changer within our industry, we are thrilled with the outcome of RedeWire and have had several clients highlight how intuitive and easy to use the platform is.”
“Throughout the project, SoBold clearly understood our vision and provided thoughtful solutions to our needs. Choosing to partner with this team was one of the best decisions we’ve made, and we couldn’t be happier. We look forward to continuing to work with the team as the site evolves.”
One early adopter of the RedeWire platform also provided highly positive feedback, saying:
“This is a massive time-saver for everyone. I can’t believe how fluid and user-friendly it is. It will be a useful tool in 2023. We’re super impressed.”
Waiting for the Results
The results will be announced at the live awards show on June 15, 2023, in London. Congratulations must also go to our fellow finalists, Yodel Mobile, Braze, and Coterie Marketing.
Please keep your fingers crossed for us until then, and keep an eye out for the results this time next month!
In the mean-time, you can discover how financial services businesses should approach bespoke web development projects to successfully embrace digital transformation here.