Project Overview
Individuals in the domain of UI/UX have a common tendency to rigorously stick to set guidelines and information. However, there is a growing interest in understanding the fundamental concepts and reasons underlying these recommendations. As part of my responsibilities, I was entrusted with designing, developing, and administering an application to meet this demand. Its goal is to give consumers insights into the thinking behind UI/UX approaches and to empower them to design their own solutions based on these ideas.
Process
- Define objectives
- Gather requirements
- Design the concept
- Develop a minimum viable product (MVP)
- Test and validate the concept
Define objectives
The website should be created as an SEO-friendly blog with the ability to incorporate custom features. It must be responsive to ensure an ideal user experience across all devices. The design must prioritize usability by offering a simple and straightforward navigation system that allows quick access to content.
Gather requirements
The website uses a blog format, and a separate “Resource” page has custom tools. A single page application wasn’t the best option because a strong SEO score was a crucial factor to take into account. The rare updates and additions to articles also contributed to choosing the best strategy for content management.
I made the decision to use the Astro Framework after taking all of the above into account. The fact that Astro is a static site generator, which means that in final form, it would provide html files for every page, including the articles, with minimal js, was the key factor in this selection. Additionally, it has the ability of a single-page application, allowing you to design components to avoid repetition. The ability to include different frameworks into this was another feature that assisted in taking this into consideration.
Design the concept
I began by conducting research on websites that provide the similar function and looking at blog designs.
To understand the layout and how the content will interact, the first step was to design a wireframe.
Wireframes Component UI
The last step was to import these wireframes into Figma and begin applying the style (color, typeface, images, etc.). I began by initially making the elements I needed, such as a design system (buttons, text size, color palette, padding, border styles, and layout). I choose not to create a design prototype due to the short amount of time available, and instead utilize it to develop and fix bugs.
Some components from the design system
Layout System
Develop a minimum viable product (MVP)
I began developing the essential functionality from the requirements I gathered for the MVP. Building the most important pages—those that are often used—was the main goal, along with determining how the application and workflow would function for both content creators and end users. The homepage, the form (which is a disguised Google form because the application doesn’t need to do anything with the data), the articles page (called guides), and the article itself (named guide) have all been implemented.
The utilization of custom functionalities was another important aspect of the MVP, therefore I tested two different kinds of custom tools on the Resource Page.
Test and validate the concept
To assess the concept’s potential, I conducted extensive user testing with individuals representing three unique user groups. These visitors used a variety of devices to engage with the website, including desktop computers, phones, and tablets. I obtained significant insights into the usability and operation of the website by monitoring their experiences and receiving comments.
I am regularly evaluating the website’s performance under various traffic situations now that it has been released and made available to the public. This testing step allows me to evaluate how the website responds and works under various levels of engagement from users. I can discover and fix any possible performance bottlenecks or difficulties by evaluating server response times, page load speeds, and overall user experience.