As part of a three-month academic project, my team and I developed CRH Studios, a fictional company with an e-commerce portal. The goal was to gain a deeper understanding of user goals and flows within an online service while designing and coding a fully responsive front-end website. We assumed the roles of UX/UI designers, tasked with creating a brand identity for a small studio specializing in handcrafted ceramic goods. We aimed to develop an engaging, user-friendly website that would appeal to potential customers and offer seamless navigation.
Content & Needs
In the early stages, we conducted comparative research across several e-commerce sites to understand the necessary functionality, client goals, and consumer behavior. Our findings highlighted several key priorities: clear navigation, price transparency, brand credibility, and an overall seamless, user-friendly experience.
Using this research, we developed a sitemap early in the process, which provided clarity on our website's objectives and laid the foundation for our design decisions. This process ensured that our goals remained focused and that our project had a clear direction.
Design Considerations
Working collaboratively in Figma, we began by creating low to medium-fidelity wireframes to establish a basic layout. We then progressed to higher-fidelity mockups, incorporating color schemes, content, and images. This was an iterative process, marked by multiple feedback sessions. Throughout, we kept the user’s needs front and center to ensure a functional, intuitive design.
Style Guide
CRH Studios showcases timeless pieces, crafted by featured artists to elevate home aesthetics. Our target audience consists of a mature demographic with an appreciation for the arts or a desire to acquire artisanal ceramic works for themselves or as gifts. The website allows visitors to easily explore curated pieces and make purchases.
Our style guide emphasizes a modern yet timeless aesthetic, with carefully selected fonts, a harmonious color scheme, and strategic use of white space. Earthy tones were chosen to reflect the luxury of handcrafted ceramics, with coral accents used for call-to-action buttons and links to create a balanced, engaging design.
Challenges
I played a key role in designing the initial layouts for several pages, refining them through iterative feedback, class critiques, and collaboration with my team. Once the designs were finalized, I was responsible for bringing them to life using HTML and CSS, focusing on critical pages such as the homepage, product layout, and shopping cart.
One of my biggest challenges was ensuring that the code was perfectly aligned with our designs. To resolve any issues, I utilized platforms like Stack Overflow and Chrome’s built-in inspection tool. As a team, we worked closely together to ensure consistency and responsiveness across all pages, supporting each other throughout the project.
Despite the technical hurdles, this project significantly enhanced my coding skills and my ability to collaborate effectively in a team setting. It reinforced my confidence in using HTML and CSS to build functional web pages.
Reflection
Throughout the project, our team conducted continuous testing to ensure that every element of the website functioned as intended, both on desktop and mobile. Some design choices required iteration—such as the quantity selector on the checkout page, which was initially too small and prone to accidental clicks. To improve usability, we redesigned the buttons with better accessibility and touch targets in mind.
One of the key takeaways from this project was the importance of understanding user expectations in web design. In e-commerce, trust, reliability, and credibility are crucial for building strong relationships between users and the brand. By analyzing user goals and tasks, we were able to develop a front-end website that was not only functional but also visually aligned with the brand’s identity.
This experience reinforced the importance of designing with the user at the forefront—ensuring consistency, intuitive interactions, and a seamless balance of aesthetics and usability across all pages.
