Category: Article

What are SVG’s and why are they useful?

SVG stands for Scalable Vector Graphics. It’s a type of graphic format widely used in web design. SVG was developed by World Wide Web Consortium – W3C between 1998 and1999. It was then created as an open-standard XML based vector image and was officially released in September 2001. SVGs are especially useful because they are scalable and lightweight which beats traditional images like JPEGSs or PNGs. The can be scaled across a wide range of dimensions without losing its quality. This is why they are great for responsive web designs, icons, logos, illustrations and interactive graphics.

SVGs use mathematical formulas to create lines, shapes, colours and paths instead of pixels, which allows the image to be sharper.

Here is a comparison between a PNG and SVG of the same image:

From a distance, the PNG and SVG image looks the same however when zoomed in, the PNG lines become pixelated while the SVG graphic remains sharp.

When comparing file size between the two images, the SVG file is less in size. But why does file size matter? Smaller file sizes create a better user experience. A webpage with a small file size will load faster. It also means that those with limited connectivity and are using mobile data will have less data to download. As well as this, it also improves the overall performance of the webpages.

Key benefits of SVGs:

• Scalable: No pixelation on any screen size which allows websites to have quality images.
• Lightweight: SVGs are often smaller in file sizes than high resolution PNGs or JPEGs
• Editable: It can be editing in both code and design software
• Interactive: It supports animations and CSS styling

How to Create SVGs

Here are a few ways SVGs can be created:

1. Manually writing SVG code – Its discussed in the ‘What are the various ways SVGs can be added onto webpages’ section under Inline SVGs.

2. Design tools – such as Adobe Illustrator, Figma and infinity.

Here’s a tutorial using Figma as the design tool

2.1. Create your shape – Here is a smiley face created in Figma using 3 cirlcles and a line.

2.2. Group your wireframe. If your SVG has many shapes and layers, this ensures that the SVG is exported as a single image.

2.3. Remove the background (optional). If you don’t want your image to have a background, go selection colors. A Figma wireframe automatically comes with a white background so for the white colour (FFFFFF) change it from 100% to 0% and that should remove your background.

2.4. Once you are happy with your desired line or shape, go to the Export tab and click the +. Mine is set to PNG as default but we want to select SVG. Then click the Export button below, which will save your work as a SVG file.

2.5. When the file is opened, it should automatically display in the default web browser, allowing the SVG image to be viewed.

3. Converting graphics to SVG – You can also convert PNGs or JPEGs to SVG using online converter tools. However, it’s not the best practice because complex raster images may not always convert cleanly.

Here’s an example of an image that was converted from JPEG to SVG.

Various Ways SVGs Are Added to Webpages

Inline SVG

In HTML, SVG lines, shapes and colours can be created using code, where the position and the size of the shape is defined using x and y axis coordinates. Here are the basic shape elements that can be created:

1. An <line> element creates a straight line between two points. X1 and y1 is the starting point of the line, while x2 and y2 defines the ending point of the line. The stroke is the line colour; here it’s been set to green. And the stroke-width is the like thickness which I’ve set to 4.

2. The <rect> element creates a rectangle. The x = horizontal position (left to right) and the y = vertical position (top to bottom). The x and y positions determines where the rectangle starts on the page. The fill attribute determines the rectangles colour, here its been set to red.

3. The <circle> element creates a circle. The  cx = centre point x axis and the cy = centre point y axis, while the r = radius. The radius determines how big the circle is. A larger radius value creates a bigger circle, and a smaller radius creates smaller circle.

4. The <ellipse> element creates an oval shape. What makes the ellipse different to a circle is the rx = horizonal radius and ry = vertical radius which will stretch the circle out. In the example, the rx is larger than ry, therefore shape will stretch horizontally.

5. The <polyline> element creates any shape made of connected straight. The points for polylines and polygons are represented in coordinate pairs. The pairs are written like this: x1, y1 x2,y2 x3,y3 x4,y4. The x value represents horizontal position, and the y value represents vertical position. In the example, there’s 4 pairings which makes 4 connected straight lines.

6. The <polygon> element is similar to <polyline>. The key difference is the polygon element automatically closes the shape, connecting the last point back to the first.

7. The <path> element is most versatile. Although SVG provides seven basic shape elements, the <path> element can create almost any vector shape, which makes it foundational to most SVG graphics used on websites.

Img tag

In this case, the SVG is used as an image source file,  just like any other image on a webpage. It is important to also include a descriptive alt attribute so that those who are visually impaired can interpret the image through screen readers.

CSS Background image

In this method, the SVG is being applied though CSS instead of placing it in the HTML. In the example, the background image has been added to the body CSS. The min-height is made to fit the screen size, and the background-image loads the SVG onto the webpage. Background-size is put as cover to cover the webpage and background-repeat is to make sure the SVG is not duplicated many times across the page.

SVG Sprites

This is best for reusing SVGs multiple times across the webpage without having to rewrite the full SVG code. The SVG is defined once inside the <symbol> element and each symbol is given its own unique ID. To be able to reuse the SVG, you would use the <use> element. Its especially good for styling all the SVGs you’ve reused, at once.

Creating CSS Animated SVGs

With CSS, it can animate properties such as colours, positions, scales and rotation.

Hover Animation

In the example below, the circle changes colour once the user hovers over it. The transition property tells the browser the way it should animate once the user hovers over it, the 0.5 ease gives it a slight delay into a smooth transition to a different colour. The MyCircle hover element is calling for the orange circle to turn purple when the user hovers over it.

Bouncing Animation

The <svg> element creates a 150×150 canvas, while the <circle> element draws a circle positioned in the centre using cx and cy. The CSS applies a keyframe animation that changes the circle’s radius from 40 to 60 pixels, causing the circle to expand and shrink repeatedly to create a pulsing effect.

How can they be optimised?

Why should we optimise our SVGs? Optimising SVGs improves the website performance and loading times which is from removing unnecessary things in the SVG.

1. SVG optimisation tools – SVGOMG. A optimisation tool like SVGOMG removes spaces, comments, layers and metadata which is not needed. By doing this, the SVG file size will be reduced.

2. Code-level optimisation – If you are manually coding your SVG image, removing line breaks, indentations and extra spaces will also help reduce the file size.

3. Simplify paths – if using a design tool to create your SVG from scratch, try reducing the amount of anchor points on your image and removing unnecessary layers. Extensive amount of anchor points and layers will make the file size bigger.

References

• https://www.w3schools.com/graphics/svg_polyline.asp
• https://en.wikipedia.org/wiki/SVG#:~:text=SVG%20has%20been%20in%20development,submissions%20were%20received%20that%20year

Introduction

In November, we took part in UX design workshops led by Steph and Chris. Across the two sessions, I learned a range of research and design methods, including conducting interviews with my peers, creating user personas and wireframes, and presenting our ideas. The hands-on activities helped me gain practical experience helped prepare me for real-world UX work. The workshops were highly informative and influenced the direction of my major project.

My major project is a web-based application designed to help people regain their attention and improve their cognitive well-being in a world of unrelenting digital distractions. The basis of my project is derived from my own experiences with lack of concentration, fatigue of mind, and difficulty to sometimes maintain attention. My website is about my personal experiences with improving my cognitive well-being, and it should be understood that it is not expert-based. While documenting what worked for me, I hope to encourage users to evaluate their own attention patterns.

The purpose of this article is to act as a plan for how I will use User Experience Research and Design techniques to develop my major project. I will discuss the different research methods I will be conducting in order to build the final product. The planning phase is vital to ensure that my project continues to be user-centred, accessible, and aligns itself with the needs of individuals who are already mentally overwhelmed.

Project Overview

My goal is to develop an easy-to-use website where users can explore attention as a cognitive resource affected by today’s fast-paced digital world. In my own case, my over-stimulation was caused by excessive tech usage, which resulted with declines in reading comprehension, increased procrastination, and ongoing mental fatigue.

Therefore, I decided to develop a website that shares my personal experience, while making it clear that the ideas and techniques I present were ones that worked for me and may not be universally applicable to all. From my website, users will get to read about my experience, experiments, and soft prompts to reflect on, instead of just providing solutions to problems.

My Goals and Objectives

• The website must provide an environment where the user does not become overwhelmed by the content of the site. Since this website is about cognitive wellness, elements on each webpage must be organised to provide a comfortable and focused learning environment.
• The website must be easy to follow through. The user must know Where they are, What options they have and How to proceed.
• The website must be developed with empathy, a core principle of User Experience design. By understanding users, I can create a design that supports them.
• The website needs to be consistent. Consistency in layout, navigation and interactions will help the user feel confident using the website. When interactions are predictable, the user will not need to learn and recall unfamiliar actions.
• The website must be tested and improved continuously. With the help of classmates, teachers, friends and family, I can receive valuable feedback and continually improve the website. Doing so will help better the usability and accessibility of the website.

User Research Methods

Competitor Analysis

As part of my planning, I researched other platforms that focused on attention, brain health and digital wellbeing so I could understand what has already been produced. I specifically looked at Lumosity, Healthybrains.org and Freedom.

The focus of Lumosity is to improve your attention by using brain training type games. The games are engaging, but they focus on performance and repetition rather than supporting meaningful development of attention. Healthybrains.org offers a lot of evidence-based information about lifestyle and brain health, and also preventative measures. However, may seem too formal to readers and can lose their attention. Freedom takes a different approach by eliminating distractions, and while this may be beneficial, it does not encourage users to reflect on the underlying reasons for their attention difficulties.

My website aims to be somewhat different from those three platforms because it will attempt be more open and honest. Instead of instructing users on what they should do, I tell them what I did and provide the opportunity for them to learn about their own attention while making it fun and informative. Hopefully, my website can create a space for users to be able to think again.

User Interviews

As part of my user experience research, I intend to interview people individually, with some being affected by some sort of cognitive or attention-based limitations. The intention of the interviews is to understand what users expect from a website focused on cognitive health and wellbeing. By understanding the user needs, it can help me implement what they are looking for.

The interviews will allow participants to express themselves freely and address specific topics relevant to my project idea. Open-ended questions will be used to encourage participants to share their views, experiences, and emotions, helping me design and build a website that is responsive to user needs. I also plan to make the interviews semi-structured because it gives me the opportunity to also ask fitting questions based on their answers.

Contextual Research

I will be researching existing ideas, models and concepts for the design and development of the website.

There are three design models I will be following in order to build a well-functioning and user-centred website:

1. Human Centred Design Model. By following the HCD model, this ensures that I always put the users at the centre when it comes to decision making. This allows me to focus on who I’m designing my website for and why. Actively working with users throughout the development process will prevent me from building a website which is not ethical. I want to allow users to make choices and have control.
2. Double Diamond Model. This framework will help with the way I approach problems. Discovering and Defining the problem, then Developing and Delivering a solution. These 4 stages make sure that I understand the problem before building the solution.
3. The Iterative Design Model. This model will be beneficial when I get to the prototyping stage. I plan to test my prototype on 5 to 7 users to gather their opinions and make necessary design adjustments. As the website follows a user-centred approach, it is designed for real users rather than personal use, therefore, ongoing feedback on prototypes is essential. I plan to encourage honest feedback from user and stay open to criticism in order to make the website better. I aim for users to spot errors that I might have missed, and to help create a website that is efficient and enjoyable to use.

User Personas

User personas will allow me to think beyond my own experiences and consider how other users might interact with the website. It gives me an idea of the type of users who might use my website, so I can design it based on their lifestyle, needs, and what is currently bothering them.

I have created two user personas:

Alex – 18-25 years old – ADHD/ Neurodivergent learner

Alex struggles with attention and is interested in exploring attention-support strategies that have been effective for others. For someone like Alex, who struggles with attention, I will need to think about ways I can make information engaging on my website especially because he wants to learn. For users like Alex, one design consideration is how interface elements are positioned on each webpage.

Michelle – 30 -35 years old – Self-improvement explorer

Michelle is all about self-improvement. She’s very self-aware and feels that she can make better life choices. One of her goals is to reduce her phone use by 50%. She’s looking for alternative activities to replace her phone usage. When creating a website for someone like Michelle, I want it to be inviting and encouraging because she wants to improve herself. With Michelle in mind, greater attention would be given to the emotional tone conveyed by the website. Colour, font and layout research will be conducted because they play a factor in the way users feel when using a website.

Empathy Maps

Empathy mapping helps me to understand users’ experience rather than just assuming. Using empathy maps allows me to practice the HCD framework, as I focus on the user’s emotional needs.

I have created an empathy map for Alex to understand his perspective through what he Thinks, Needs, Feels and Says & Does.

The use of empathy mapping for Alex has influenced my design decisions. It has allowed me to think about being cautious with the wording on my site to ensure that I don’t show a sense of urgency or imply that there’s something wrong with the user. I’m planning to express the content on my site using language that encourages reflection, for example, “you may find yourself experiencing a similar situation”, which will assist with creating an emotionally safe space and will encourage the development of a calm and supportive experience.

User Journeys

Another technique that will help with my project is user journey mapping. This will give an understanding of the user’s experience when navigating the website from start to finish. Using user journeys is good for spotting pain points early, preventing myself from designing only for myself, and it gives me the opportunity to reduce cognitive load in users. It also enables me to design a user experience that acknowledges that a user’s ability to concentrate and pay attention can vary greatly, and therefore avoid creating an overwhelming website.

User journeys will be beneficial in the design and development process because I want avoid overstimulation when it comes to someone like Alex. And I want someone like Michelle to feel calm every step of the way.

The goal is for the user to have a positive and insightful experience throughout.

I’ve made a user journey map for Michelle below:

Accessibility and Inclusive Design

Accessibility is a big factor, given that the focus of the site is cognitive well-being and attention. Designing for accessibility requires me to understand that users may have ADHD, Dyslexia and/or other conditions which can impact their ability to process information.

In terms of supporting cognitive accessibility, I plan to create a clear visual hierarchy using consistent layouts and a good amount of space between the interface elements. I will make sure that animations are minimal, avoid sudden animation movements or auto-play features which can be distracting.

I plan to also choose colours that are calming in the hopes of minimising visual fatigue, yet remain readable. The language used should be simple and avoid complex definitions so that users don’t feel that the information is hard to understand.

A/B Testing

Based on the feedback and suggestions during the iteration design stage, I will create two prototypes. The iterative stage will identify usability issues to address, while A/B testing will be used to tell me which prototype version performs better functionally. I plan to ask 7 participants which prototype they like best. The prototype with the most votes will guide how the website looks and operates.

Conclusion

The user research techniques I plan to use has allowed me to think about how I can transform a personal experience about my brain health into a more thoughtful user-centred product.

What I hope out of this project is to create a website that is perceived by users as helpful. Instead of providing answers, I want the site to encourage users to consider their own brain health and figure out their next steps.

References

• Design Council (UK) – The Double Diamond Design Process
• Harvard Health Publishing – Staying focused in the era of digital distractions
• Interaction Design Foundation – What is Human-Centred Design?
• Nielsen Norman Group – Journey Mapping 101
• Nielsen Norman Group – Minimize Cognitive Load to Maximize Usability
• Nielsen Norman Group – Personas – Study Guide
• Nielsen Norman Group – User Interviews 101
• UX Collective – A/B Testing in UX Design
• Vermeulen-design – Designing for neurodiversity: Inclusive visual content for ADHD and autism.
• W3C – Web Content Accessibility Guidelines (WCAG) 2.2

The Flash Mop

The Flash Mop is a well-thought-out cleaning tool that combines sleek design, practicality, and ease of use, making it a standout alternative to the traditional mop and bucket. Its modern aesthetic, with purple and grey tones, feels gender-neutral and stylish while being slim enough to fit into tight spaces. The overall look updates the outdated mop-and-bucket style, aligning with the brand’s promise of “Flash” by allowing users to clean both faster and more effectively.

One of the mop’s biggest benefits is its efficiency. Unlike conventional mops, there’s no need to fill and empty a heavy bucket of water. Instead, it features a built-in cleaning solution bottle that sprays the floor with the press of a button. This saves water and reduces mess, while the bottle’s design ensures no leaks, even when turned upside down. The solution can only be released when attached to the mop and activated, eliminating the risk of spillage. The reusable cleaning pads add to the sustainability and convenience, as they can be easily washed and reused. The mop is lightweight, easy to carry, and prevents the common struggles of rinsing and squeezing associated with traditional mops.

When it comes to usability, the Flash Mop is designed with comfort and accessibility in mind. The handle dotted indents for a secure hold, while its curve fits naturally in the hand. The rubber at the end of the handle allows the mop to rest against the wall without falling. The spray button is large and accessible to different hand sizes, positioned so the index finger can press it comfortably. Its height suits a range of users, meaning cleaning doesn’t involve awkward bending or stretching. Altogether, the Flash Mop delivers speed, effectiveness, and ease, making it great for everyday cleaning.

---

Philips Hue Lights

The Philips Hue lights are a prime example of modern, user-centered design that incorporates functionality, accessibility, and aesthetics. The product is a modern take on the traditional light switch, offering a remote with clear icons that users can instantly recognise. Its lightweight and minimal design ensures ease of use, while the magnetic feature allows the remote to stay on its base, prevents the chances of it being misplaced. Because its magnetic, users don’t always need to hold the remote in hand when adjusting the lights.

One of the greatest benefits of Philips Hue is its flexibility. Users can control the lights not only with the remote but also with their phone, voice commands, or even set schedules. This is especially helpful for those with mobility issues, as lights can be adjusted without physically reaching a switch.

Personalisation is another key benefit. Users can set custom scenes and colours to match their mood, whether it’s “Energising brightness” for the morning or a “Night light” to prepare for sleep. Features like “Reading” mode help reduce eye strain, making the lights both practical and health conscious.

In terms of usability, the system is designed to be simple and accessible for a wide range of users. The app and remote are straightforward, ensuring that people of all ages and abilities can use them with ease. By giving control back to the user and allowing a variety of experiences, Philips Hue demonstrates how thoughtful design can make everyday living more enjoyable.

---

Personal Shopping Trolley

The personal shopping trolley is a clever design that combines practicality, comfort, and sustainability. Unlike carrying multiple plastic bags, a trolley allows users to transport 20–30 kilograms of shopping in one go, which is roughly three to five bags’ worth. It has a hard board at the bottom provides which strength and stability, so heavy items can be stored securely. The bag’s material is waterproof, washable, and hard tear, making it perfect for everyday use while also reducing reliance on plastic bags which is harmful to the environment.

A key reason for the trolley’s popularity is how it supports users with different levels of strength and mobility. It is particularly most used by the elderly, as it reduces strain on the body, but this also makes it practical for anyone looking for a more comfortable way to transport shopping.

In terms of usability, the design has been carefully thought out. The large wheels make it easy to move across pavements, curbs, or even stairs, without putting pressure on the arms and shoulders. The metal handle is sturdy and fitted with a foam grip, which adds comfort and prevents the discomfort of touching cold or hot metal in different weathers. The fastening string secures items inside the bag, preventing them from falling out, while side pockets provide space for smaller belongings such as keys, wallets, or phones. When not in use, the trolley can be folded flat, making it easy to store in a small space.

By combining strength, ease of movement, and thoughtful features, the personal shopping trolley is a well-designed product that makes everyday life more manageable.