Project overview
Brief deliverables
Examine the current UI design
Irishwrecksonline.net is a searchable database of shipwrecks on and off the whole of the Irish coast. This site provides casual and expert maritime researchers as well as wreck divers with the information pertaining to numerous shipwrecks. The aim of the website is to raise knowledge and awareness of the topic through valuable historical and recreational resources.
I was tasked to redesign the user interface of the Irishwrecksonline.net. Although user interview was not mandatory for this design sprint, it was relatively difficult for me to plainly ideate UI design solutions without user insights on the current site shown below. I knew that I needed my design solutions to be underpinned by user insights.
Conduct user interviews
Identify the characteristics of bad UI design of the website
What do you like about this website ?
What don’t you like about this website ?
If you could redesign this website, what would you do ?
When you were on this website, were there any challenges you faced accessing information ?
Do you like the colour palette this website uses and why ?
Is there anything you often look for on a website like this that you have not been able to find yet ?
Interviewees were unable to obtain the information they needed due to the lack of text hierarchy. The website failed to design a system that establishes an order of importance within data, therefore not allowing users to find what they are looking for with ease.
The interviewees were unable to differentiate whether a button was in a static state and pressed state. When pressed, the button displays dotted effect.
The interviewees felt that there was not a cohesive brand identity for this website due to lack of design consistency across the channel.
Having too many font styles on a website disrupts UX by causing cognitive overload, readability issues, and inconsistent hierarchy. It hampers visual harmony, brand identity, and mobile usability. Users may become confused and navigate less effectively. Limiting fonts, ensuring readability, and maintaining consistency improve UX.
Design low-fidelity prototype based on user interview feedback
After conducting extensive research and gathering valuable insights, I proceeded to develop ideas for Irishwreckonline.net. The feedback from user interviews revealed that the current website was perceived as overwhelming and challenging to navigate due to an excessive amount of information. As a result, I recognised the significance of creating a clean and organised layout. Considering the website's focus on historical records and research, the emphasis on simplicity is crucial to ensure it serves as a reliable guide to high-quality information.
Test low-fidelity prototype
Create High-fidelity prototype
Iterate usability testing with a focus group
Implement design changes based on user insights
Logo / Branding design
To guarantee the user-friendliness of my low-fidelity prototype, I conducted remote usability testing through Zoom with six participants. The following highlights emerged from the testing session.
The current header is not sticky, and all six users agreed that a sticky header can help users move to other parts of the website without having to scroll all the way to the very top. The constant presence of the menu bar may also remind users that other pages are also available.
Incorporating a "Sort by" button empowers users to interact with data in a more meaningful and efficient manner, enhancing their ability to analyse, interpret, and make decisions based on the information presented. Also, it allows users to systematically work through the product list in an order they understand.
All six users love this feature. Image previews are favoured in UX as they provide instant visual insight into content, aiding quick evaluation and decision-making. The previews build confidence, reduce uncertainty, and enhance the overall experience.
A "Back" button is crucial in UX design to offer users a familiar and efficient way to navigate back to the previous page or step. It prevents frustration and helps users correct errors or revisit content without relying solely on the browser's back button. This feature enhances user control, reduces confusion, and ensures a seamless, user-friendly experience, promoting engagement and satisfaction.
To ensure that my design solutions were in line with what my users wanted, I conducted remote usability testing via Zoom with six users. The testing was carried out to measure the following aspects:
Readability
Are users able to read the content effortlessly ?
Visuality
Does the UI design make it easy and enjoyable for the users to interact with the website ?
Meaningfulness
Animation is a powerful tool to guide users around the interface and alert them of any changes. I wanted to test the meaningfulness of the animations I created to see if they served a real purpose for the users.
Almost everyone found the location pins confusing; they struggled to distinguish which pin represented places of interest and which one indicated local retailers. Pins are now re-designed with two faces.
Users suggested that they were unable to distinguish between the interactive and non-interactive state of the CTA buttons on the website. I redesigned the buttons and added a micro-interaction on hover state shown below.
The Irishwreck, logo inspired by the camera focus icon, captures the essence of a maritime expedition. It channels the sense of exploration and discovery through the lens of the camera, inviting history enthusiasts to come on a sensory voyage at sea.
Present final website redesign
Create design documentation
Conduct an effective design retrospective
– Logo Structure
– Button Structure
– State: Default
– State: Hover
– Go Back Button Structure
– Go back icon
– Cancel Button Structure
Choosing the right font style in UX design is essential asit significantly impacts user perception and interaction. Font selectionaffects readability, visual hierarchy, brand identity, and emotional resonance.A well-chosen font enhances content legibility, guiding users smoothly through information. It establishes a visual hierarchy, aiding content navigation and comprehension. Fonts contribute to brand identity, conveying the desired tone and personality, bolstering consistency and recognition. Emotional impact is also influenced, as fonts evoke feelings and set the design's mood.Accessibility is key; appropriate font styles improve inclusivity for users with visual impairments. Moreover, responsive design requires fonts that maintain readability across devices. The right font encourages engagement, affecting user actions like clicking on calls to action. Overall, font style selection shapes the entire user experience, impacting usability, aesthetics, brand cohesion, and content engagement.
Interactions in UX and UI design are the bridge between users and digital interfaces. They provide feedback, confirming that user actions have been recognized. Purposeful interactions establish a visual hierarchy, emphasizing important elements, aiding navigation, and enhancing content engagement. They keep users engaged and interested, contributing to an enjoyable experience.
