Firstly, I scaled the bakery logo to be a bit more visible and eye catching. I also added some more padding to the CTA button to give it more room for people to recognise that it is a button as opposed to a simple text with a background.
PHP
I used server side includes for the first time on this project, which I think will greatly improve my code modularity. As my navigation is situated within my header, I only needed to create 2 php includes, a header and a footer. Changing around the navigation bar proved to be quite a challenge as I had different folders with each html file for each page. To overcome this I renamed my pages to the corresponding name ie = /about/index.html to about.php and moved all the pages into one folder so the php include could find the pages correctly.
UX
I also created a .htaccess file for the first time for this project, as it is a well established UX consideration. I think that creating this and implementing the process into my standard practice will improve my user experience design greatly. For this I included a button back to the home page with a small message to explain the 404 Error.
Java
I used Javascript and included a greeting based on time of day to let customers know about what time the store is open. I think this script was easy to create and I just needed to specify the right times for it to work. I also included a fallback message in the case that users don’t have or turn off javascript.
SEO
For search engine optimisation I included keywords and meta description to enhance rankings. There is a recommended character limit of 150-180 characters for descriptions as they should only feature key information for the user to briefly read on the search result page.
Accessibility
By habit I optimise all my images and add alt tags for them too, which ensures good accessibility for all users. I also checked my colour contrast and improved any low ratios. For example for text with a low ratio to the background, I added a drop shadow to text so it is more visible, this is the only workaround I found for text on top of an image.
In today’s world, websites are viewed on a plethora of devices ranging from compact mobile screens to large desktops, therefore, it is essential to have responsive images that improve the overall responsiveness of a website. However, simply resizing images to fit different screen sizes is not enough.
Concept review: what is responsiveness?
It’s an approach to web design that aims to make web pages render well on a variety of devices, windows, or screen sizes from minimum to maximum display size to ensure usability and satisfaction.
What are responsive images?
Responsive images are images that can adapt to different screen sizes and resolutions, ensuring that they look great on all devices. There are a set of techniques used to load the right image based on device resolution, orientation, screen size, network connection and page layout. Art direction plays an essential role in creating visually appealing and effective responsive images.
Why is it important?
Render a high-quality image on different devices
Faster loading web pages
User experience friendly
SEO friendly
What exactly is art direction?
Art direction is a method of creating responsive images for a website with a focus on the content of the image. Essentially, the goal of art direction is to keep the emphasis on an image when the screen size changes. This helps web designers avoid certain media elements becoming squashed as the screen size gets smaller. It’s called the art directed method because it’s a way of creating an art (media) focused website, it mainly helps the designer prevent the content of the image being looked over. The key part of the solution to this issue is changing the image that is displayed when accessed on a different display size.
For example, here a web page includes a large landscape shot with a person in the middle when viewed on a desktop browser.
(MDN Web docs, 2023)
When viewed on a mobile browser, that same image is shrunk down, making the person in the image very small and hard to see.
(MDN Web docs, 2023)
It would probably be better to show a smaller, portrait image on mobile, which zooms in and focuses on the person. That way, the unnecessary background is cropped out. The use of the <picture> element in html allows us to implement just this kind of solution.
How does it work?
Firstly, we must identify the screen dimensions at which the layout changes, these are known as breakpoints.
As a standard, breakpoints are often defined based on-screen sizes that are commonly used. For example, mobile breakpoints are usually equal to 360 width x 740 height and high-resolution desktop breakpoints are often anything above 1920w x 1080h. The breakpoints are vital to the mark-up of art direction.
Secondly, we must create or crop different versions of the image we’d like to feature.
Each image produced should be suitably optimized for the different screen sizes and therefore resolutions. This means that image dimensions, file size, and format will vary depending on the device and screen size.
Thirdly, we use only html markup to implement art direction, which is covered in more depth below.
The key HTML element used to implement art direction is the <picture> element. In this case, the picture element acts like a wrapper that contains multiple <source> elements. The source element provides the browser with different images to choose from. Within the source element features the MEDIA attribute, which sets the media condition for the browser, instructing what minimum or maximum size the screen can be for a particular image to be shown. This is an essential part of the art direction method as it allows the designer to explicitly outline the screen size conditions to the browser.
The second attribute of the <source> element is the SRCSET attribute, which is used to provide the path to the different image files.
The last element within the <picture> element must be the <img> element, this provides the browser with a default image file if the conditions set in the <source> element aren’t met. For the img element, it’s really important to remember to provide the SRC and alt attribute because without them, the entire picture element will not work. For CSS styling, you must style the img element as opposed to the source element as the source tag is essentially a void element (web.dev, 2021).
<img src=“girl-800w.jpg” alt= “Father standing holding his daughter”/>
</picture>
(adapted from MDN Web Docs, 2023)
Media conditions
As mentioned earlier, the media attribute allows us to define the critical break points at which the browser should execute the change of image and page layout.
If the screen width is 800px or more, the second source image will show
If the screen width is 799px or less, the first source image will show
Setting the correct media conditions leaves the end user with an enhanced browsing experience, where the content of the image is properly presented. The media conditions can also be set to rules that aren’t related to screen size like the users colour scheme or browser contrast settings (Stoumann, 2021).
Following the demonstration of how to mark this up in html, below is an example of how art direction will look in action;
(MDN Web docs, 2023)
(MDN Web docs, 2023)
Art direction vs resolution switching
In responsive web design, there are actually two methods used to tackle responsive images, one being art direction and the other being resolution switching. Below is a summary of the key difference of the two methods.
Browser compatibility
(W3Schools, 2023)(W3Schools, 2023)
The number in the table shows the first browser version that supports the <picture> element and srcset attribute. Chrome supported from version 38.0 which was released in 2014 and Firefox have supported from version 38.0 which released in 2015. Edge supported <picture> element and scrset attribute from version 13 which was released in 2015 and 2017. Safari supported <picture> element and scrset attribute from version 9.1 released in 2016 and 2015. Opera supported from version 25.0 onwards released in 2014. It shows that most browsers supported <picture> element and srcset attribute from 2015.
Why not use CSS or JavaScript?
As HTML is the first language that the browser loads when a new page is accessed, images are downloaded with HTML before interpreting the CSS and JavaScript documents. This process is great for reducing page load times but proves to be challenging when it comes to responsive images. For context, imagine you load a web page with an <img> and then you wait for the browser to identify the viewport width and adjust the image using the JavaScript document. After several steps of interpreting additional JavaScript and CSS documents, the original and small image would have already loaded as they appear in HTML first. So, it shows that using CSS and JavaScript is very bad in regards of responsive images. Therefore, the technique of art direction which use solutions like srcset are very essential for responsive web design.
Finally, how well does art direction improve the responsiveness of a website?
This method enables us to provide a good user experience on both mobile and desktop screens, improves visual presentations, it controls the issue of having to shrink and image for the screen size and the layout responds naturally. Cropping the image allows the user to focus more on the content of the image. Also, it makes the website more accessible for users using mobiles with slow connection and at the same time for users with fast connection and high resolution it will provide highest quality images.
To conclude, art directed images are an essential aspect of responsive web design, as they ensure that images look great on all devices and screen sizes. Implementing art directed images involves creating multiple image versions optimized for different screen sizes and implementing them using the HTML “picture” element. By following our steps, you can create visually appealing and responsive images for your website, enhancing your users experience.
My major project will be a website service which provides skincare related content with a search functionality to help users narrow down what methods and products are best suited for them. After finalising the concept for my major project, the next step is to define the problem that the website will solve, frame a solution, and outline my target audience. This article will discuss key processes associated with user experience design and will also outline how I will implement them into my own major project. Through research and analysis, I will form my user experience design which will be integrated into my major project as this stage is critical to the development of the project.
My approach to creating this user experience design proposal will follow the Design Council’s double diamond which indicates four parts to the design process: discovery, definition, development and delivery (Design Council, 2019). I believe that following this process will help me plan my user research more effectively, create detailed user profiles and design a good user centred experience.
Design Council, 2019
Part 1 User Research
Research context & objectives
The first part to the double diamond design process is to gather data and to uncover more about existing problems and what variables can affect them in the eyes of the user (Justinmind, 2018). To collect the right information from users, my initial task is to pinpoint my research context and objectives, which will help me define a clear goal for what I want my research aims to be. For stage I will be following the research canvas model.
Research canvas
During the UX research workshops, the importance of setting objectives for research was highlighted as a significant part of the UX design process. In the context of working in the industry, setting research objectives can aid a team of researchers in working together to achieve the same goal. I think that setting clear research objectives will help me to figure out what questions I want to answer (Anderson, 2019) and filter the research methodology. My website will be driven by a balance of both data and content for people who want to browse and understand skincare products available on the market. The impact that I hope to achieve is essentially to provide a straightforward and easy to use glossary for skincare. For this project, conducting research will help me identify what other blogs and websites lack, through understanding pain points, needs, behaviours, motivations, triggers, and barriers.
User experience research objectives can either fall under evaluative, exploratory, or generative research. Generative research includes research conducted to generate more information about users that we did not previously know. Generative or ‘open-ended’ research consists of conducting interviews, diary studies, and ethnographies. On the other hand, evaluative research sets out to find possible gaps or issues in a solution (Rick Dzekman, 2019). Evaluative research, often called ‘close-ended’ activities include usability testing, surveys, focus groups. I think that having a mix of open-ended and closed-ended objectives will be best as I’m at the beginning of my project development so I can conduct some preliminary research (open-ended) to help build a prototype and then conduct user testing (close-ended) at a later stage. Furthermore, for my major project my research objectives may be;
To explore and understand the end-to-end journey of why and how people invest in skincare.
To validate my assumptions regarding how people learn about skin care products using the internet.
To evaluate the ease-of-use of my website, navigation, usability, and pain points.
Methodology
The method of research is another important aspect of the user experience design because it allows a researcher to outline how they approach the research itself. In most cases, the chosen methodology of a project will depend on aspects such as the resources and technologies available to the researcher so these are things to consider over the next 8-9 months (Unger & Chandler, 2012). UX research methods can be split into four categories, which are used to collect different types of information.
Image by Maze, 2023
Behavioural research methods aim to gather information about what people do and how they behave. Behavioural methods include eye tracking where users are monitored on how they visually interact with a product. Another method is usability testing, which aims to put users through as many real-life scenarios as possible. This gives the researcher the opportunity to watch users interact with the website and evaluate how they understand the site, navigate through it and how many errors they pick up.
On the other hand, attitudinal methods are used to find out what people say; therefore research would measure statements reported by users themselves. Examples of attitudinal research methods would include activities such as user interviews, surveys, card sorting and participatory design. These methods are most effective when trying to depict a user’s mental model of your website giving the researcher more insight into what people think about the site (Rohrer, 2022).
Another dimension comes into play when considering the methodology of research, which is whether the method will gather qualitative data or quantitative data (Maze, 2023). Qualitative studies would gather data such as descriptive information including opinions, feelings, behaviours, and other insights which would answer why and how questions. Quantitative research would collect more analytical data which would help answer ‘how many’ questions aimed to generate statistics. This is particularly important when it comes to research because it will help me determine what specific type of data I want to collect. The qualitative vs quantitative dimension interacts well with the behavioural and attitudinal dimension of research because for example, while quantitative research could be collecting attitudinal data like with surveys, it could also collect behavioural data like with eye-tracking and vice versa.
For my project, I aim to start with existing research within the skincare and beauty industry. As I have no prototype at the moment, before I create my own primary research I think that looking at secondary research within the skincare and beauty industry will help me clarify what I need out of the primary research. I will use tools such as Mint, Statistica and even competitor websites. After conducting secondary research, I think that for my primary I will choose attitudinal research methods as my website will be in its ideation stage without a working prototype. This will be most effective given the stage of my projects as I can use unmoderated surveys with google forms and moderated focus groups with friends to collect meaningful qualitative and quantitative data. From this research I can develop an understanding of demographics, lifestyle, online shopping habits and other consumer behaviour insights.
Once I have a working prototype I think that the best course of action would be to conduct behavioural research to determine the usability of the site. This will play a big role in exposing me to critical feedback where I can get an insight into other people’s perspectives who wouldn’t be experts in how to navigate and how to use the site as I would be at that stage. I would most likely conduct usability testing and A/B testing if I had the time and resources but perhaps analytics research if I didn’t. I would conduct usability testing with friends, peers and volunteers who fit the user criteria determined by my surveys. This research would allow me to highlight any usability issues with my site as well as pick up suggestions and design opinions.
As little research has been conducted at this stage I have a good opportunity to state my assumptions regarding skincare shopping and propose some hypothesis which I could test.
Assumptions & hypothesis
Most people who want to take care of their skin struggle to find the right product
People buy the wrong products because of misinformation
People aren’t aware of alternatives to expensive products
Part Two User Insight
The second part to ‘exploring the problem’ in my UXD journey is to outline some user needs statements. This stage of the UXD focuses on capturing and isolating the user’s needs, which almost tells a story to the researcher. This story telling aspect will allow me to gain further insight into my target audience beyond my prejudice and expectations. I think that well written user needs statements will give me a good benchmark for success at the end of my project. A few examples of user needs and job story statements that I may consider for my skincare website include;
User Needs Statement
As a busy working adult,
I want to quickly learn what skincare products I should use,
So that I can develop a good self-care routine after/before work.
Job Story
When browsing the internet for new products,
I want to see personalised products suited for my skin type,
So that I can confidently purchase new products without worrying if they will work for me or not.
User Personas
After collecting information about my potential users or target audience, I should be able to construct some useful materials such as user personas, empathy maps and journey maps. Generating these materials will give me a good visual representation of the website’s potential users, allowing me to put the users at the centre of UX design.
As my user research has not begun yet I believe that creating some user profiles based on my assumptions will be a good place to start. It will also give me materials to adjust once the research has been conducted which will also allow me to retrospectively contrast, highlighting my preconceived ideas about the users.
Example of User Persona
Along with a few detailed user persona’s, I believe that creating some empathy maps will be greatly impactful to my UXD for the skin care website. The empathy map will give me valuable insight to 7 different aspects of what the user considers. There is a more simple template for the empathy map which considers what the user feels, does, says and thinks. However for my project, I would prefer to delve into more depth and uncover the additional areas such as what they hear, see, what they need to do and most importantly who am I trying to empathise with.
I think that by uncovering further information about the user through an empathy map, I can create a detailed journey map. All of these materials combined will help me analyse the current needs of users and highlight potential opportunities that I may not have thought about before the user research stage. Overall these user insights are aimed to isolate the pain points of users which will aid me in creating a refined user experience across my website.
Part 3 Ideation
Following the double diamond design process, after extensive research the proposed next step is to conduction ideation sessions and prototyping. This stage will help me tackle my initial user needs statements and any problem areas picked up through research. It’s a chance for me to sit down and reframe my design focus, to effectively achieve this I might use the ‘frame and re-frame’ technique introduced by Chris. The technique will give me the tools to keep the users main problem in mind whilst designing a refined and specific solution. One example that may come from this is if I find that users feel that too much skincare jargon makes them feel confused, my re-framed solution may be to create two versions of my site, one for beginners and one for those with more knowledge of the subject. This would be eliminated complex jargon for beginners but keep the terms available for regulars.
Prototyping
In the prototyping stage I will have the content ready to be able to try variations of how I would like to present it on my website. The process will entail lots of trial and error, which is why I would like to start with sketching any page designs, user interfaces, user navigation and even with the site identity concepts. Personally this is the stage which I enjoy the most because I can unleash some creativity whilst referring back to the research, enabling me to design for users not just myself. Once I have produced a few detailed sketches, I will move over to using digital prototyping and wireframing tools such as whimsical and figma. I will also start using illustrator to create graphics and branding materials for the aesthetic design of the website. Using collaborative tools like figma can also help me with gathering peer feedback on design, as it allows commenting and notes.
Conclusion
Overall, this planning document has given me the opportunity to delve further into UXD, learn about UX concepts, and begin the preliminary steps for my major project. As I’ve been able to generate some assumptions and hypotheses, I now feel confident that if I stick to this plan, I will be able to conduct effective research to validate my assumptions through the right research methods. I also think that this document will also give me an opportunity to gain a retrospective insight into my project at the end of it in September. Understanding more about UX research and design is an important part of understanding web design as a whole.
Just In Mind. (2018). The Double Diamond model: what is it and should you use it?. Just In Mind. https://www.justinmind.com/blog/double-diamond-model-what-is-should-you-use/
Mentoring. (2023). UX Research 101. Mentoring. Mentoring. (2023). UX Research 101. Mentoring. https://www.mentoring.org/wp-content/uploads/2020/08/UX-Research-101.pdf
Anderson, N. (2019). Elevate your research objectives. UX Design. https://uxdesign.cc/elevate-your-research-objectives-745cf9415d5b
Dzekman, R. (2019). UX Research: Objectives, Assumptions, and Hypothesis. rickdzekman. https://rickdzekman.com/thoughts/ux-research-objectives-assumption-and-hypothesis/
Chandler, C., & Unger, R. (2012). A Project Guide to UX Design: For user experience designers in the field or in the making (2nd ed.). New Riders. https://books.google.co.uk/books?id=dF7li-90OYQC
Rohrer, C. (2022). When to Use Which User-Experience Research Methods. Nielsen Norman Group. https://www.nngroup.com/articles/which-ux-research-methods/
Maze. (2023). Understanding the Top 9 UX Research Methods & Techniques. Maze. https://maze.co/guides/ux-research/ux-research-methods
Dave Grey (2017). Empathy Map Canvas [PNG]. https://gamestorming.com/wp-content/uploads/2017/07/Empathy-Map-006-PNG.png
Starbucks – This colour scheme is very on brand, it features elements of the recognisable forrest green, with white, black and grey for the background and content. This green does well with being associated natual, healthy and fresh ingrediants. The pallete for this website is rather muted as the green is the notably the only pop of colour, this portrays a more sophisticated product ranges allowing the company to set their products at a higher price point, further solidifiying the consumer perception of the brand.
Bunsik – The colour scheme of this website perfectly matches what the business produces, hotdogs. The light red heading, line breaks and links helps the user relate the website back to the warm, spicy yet sweet south-korean streetfood for which the brand is known for. The colour scheme also features another warm colour, a dark yellow which can be linked to the ingrediants and condiments of the snack, mustard, corn, potato and cheese. I think this colour scheme is perfect for the brand as the pallete is warm and reminds visitors of the physical product.
Morgan Lewis – As expected of a global law firm, the chosen colour scheme revoles around one ‘pop’ of colour, purple. As purple is often assosciated with nonility, luxury and power, purple is the perfect colour for a global law firm who only take on clients and cases that will yeild above a certain threshold. The purple pallete can be seen accross their pages with different saturations and hues, only matched with black or white. Like with Starbucks the clean black and white body of the page helps establish the website as sophisticated with the purple adding luxury.
BeautyBay – I like this typography because its bold yet sleek. It’s easy to read and portrays a clean and fresh look, which goes well with the brand being a cosmetic retailer selling the newest and on-trend beauty products. I’m also drawn to this typography because of it’s striking resemblence to bahnschrift, a personal favourite of mine.
Nando’s – I think this is great typography becuase it evokes a sense of exotic culture, remiding you of bursts of spice and flavour as well as rich portugese culture. The design features uneven edges, curls and small lowercase letters which I feel gives off a warm, friendly and makes the reader feel welcome.
Club Penguin – This typography riddles me with nostaglia, hours and hours playing this game now gives me an apprection for the typography used across the site. As modern minimalism takes over companies and brands that stood out in the early 2000’s, club penguin somewhat remains true to it’s milleniall roots. The type features chunky, rounded letters portraying a fun, child-friendly amd exciting aesthetic. The heading also features a both a gradient and two-tone fill colour which streches across the word club, I believe this to be a staple of graphic design 20 years ago and think that it perfectly captures the essence of a childrens game where the more colour, the more engaing the website is.
Good design is more than aesthetics and visuals, good design is a concept that has been forged over a long period of time covering all bases. Good design is achieved with something that not only is innovative but gets the job done in the most effective way. The concept of good design may be considered subjective because what may be functional or innovative to some may not considered as much to others. Below, I have showcased three products which I would consider having been well designed.
Jewellery box
This jewellery box was hand crafted in Morocco by a local skilled woodworker. The entire piece is crafted with wood and features two metal hinges concealed within the centre of the box. This box was designed with a puzzle element to it, which is a popular gimmick in markets in Asia, it opens by twist the lid rather than pulling the lid upwards as you’d expect. Personally, the puzzle element is what drew my attention to this piece as I appreciate the innovation and the geometric shapes it presents once opened. Not only did I like the gimmick, but I also admired the fact that the hinged were concealed and every component fits quite flush, hiding any mechanisms from the user. For me, two small compartments are perfect to fit rings, which I why I needed the box, therefore this jewellery box fulfilled my need as a customer.
Crocs
Crocs, the gen z/ millennial equivalent of marmite, either you love them or hate them. The design is this object seems simple to me, the entire shoe is constructed from CrosliteTM, a resin material that makes you feel like you’re walking on clouds. Personally, crocs are extremely versatile, a few years back you could only get away with wearing them in the house, now that they’re a trending fashion item, you can feel free to wear them at home, to the shops, and even when out with friends without extensive judgment. The croc features a strap which can be moved to suit the position you desire, often referred to as casual mode and sports mode (perfect for driving in). The crocs also feature a number of holes around the front of the shoe, promoting breathability allowing the user to feel comfortable when wearing the shoe. The shape of the croc presents a wide and curvy aesthetic, an iconic design for the brand but more importantly it’s a design that offers good spacing, further making it a comfortable fit. Crocs are available in a wide range of colours and have been known to pick up collaborations with some of the most unexpected brands from McDonalds to Balenciaga.
Car boot storage
This storage box has been designed for use in a car boot, it’s a storage box that I used daily and believe to be a good design. The box arrives flat packed and has Velcro edges which are used to connect to one another in order to build the structure of the box. I think that this feature helps prevent wear and tear, because if the box came ready built, after some usage I think that the edges and corners of the box would probably wear down and ruin the structural integrity of it. The box also features a handle located on the lid, allowing the user to easily move it around the boot and also pick up and take out. The size of the box is ergonomic for me as it fits inside the small space in the boot but can also house plenty of essential items like groceries, sports equipment and even items for a beach trip. The black leather and red stitching works well with the interior of my car which features both red and black on the seating and dashboard.
