Pre-existing home page of Smiles To Your Door
Smiles To Your Door
An online e-commerce store that creates unique handmade picture gifts for all occasions.
Smiles to Your Door is an online e-commerce store that sells unique & customizable gifts for all types of occasions. Our team took on the challenge of redesigning the online e-commerce store. The objective was to enhance the user interface and overall shopping experience for customers. We accomplished this task by utilizing an existing audit report to guide our efforts.
Our team identified several usability issues on the client's e-commerce website that required UX/UI design solutions. One of the primary concerns was the lack of an effective information architecture, leading to confusing product pages and ineffective use of white space. Improving the information hierarchy was critical to addressing this issue and creating a more organized and user-friendly website.
Our team employed a user-centered design approach based on the audit report, research, and client input to create a new website. We aimed to establish a strong information hierarchy that emphasized the client's products while ensuring cohesive spacing, colors, and typography throughout the site. By implementing UX/UI design principles, we sought to improve the overall user experience and create a visually appealing website that effectively showcased the client's products.
UX/UI Designer on a team of 5
As part of our UX/UI design process for Smiles To Your Door's website redesign, we reviewed the detailed audit and brief provided by the client and conducted a comprehensive review of each page on their existing website. This allowed us to gain a better understanding of the current user interface and experience, and to identify areas that needed improvement. We collaborated as a team to compile a list of issues and divided the areas requiring redesign amongst ourselves. We also engaged with the client to discuss their requirements and preferences and integrated them into our site redesign plan.
Critical design considerations:
Information hierarchy and flow on the website require reworking to better organize the content and improve user comprehension.
To provide a more cohesive and visually pleasing experience for users, the spacing throughout the website needed to be made more consistent.
The homepage of the website was not effective and needed to be replaced with a more user-friendly design.
The client expressed the importance of using gender-neutral colors in the website's design to promote inclusivity and improve user engagement.
As part of our research, we conducted a competitive analysis of Make It Mine, the top competitor of Smiles To Your Door, to gain insight into their design aesthetic and practices.
Key takeaways from the competitive analysis:
Modern, intuitive, and playful design, featuring a simple and cohesive color palette.
Maintain a consistent and clean look throughout all pages.
Easy and clear navigation that is user-friendly.
Medium Fidelity Wireframes
As a UX/UI designer, I was assigned the task of revamping the Home and Contact Us pages in collaboration with a team member. During the discovery phase, we identified the pain points in the existing pages and brainstormed solutions to enhance the user experience. Additionally, we created a new FAQ page to address common user queries.
After conducting a thorough audit and analyzing the competition, we decided to replace the original two-column scroll design of the home page with a single scroll layout that emphasized key information and product sections. The wireframes we developed in collaboration with the team were instrumental in the iterative process and formed the basis for the final designs.
To ensure our design adhered to industry standards, we researched other B2C home pages and leveraged their organizational strategies to create a user-friendly and intuitive layout.
As I moved forward in the redesigning process, it was essential to organize the functionality and the different components within each page.
The key points that needed to be addressed are as followed:
Establish a clear hierarchy and utilize visual design to enhance functionality.
Utilize gender-neutral color palettes to promote inclusivity and enhance user engagement.
Ensure consistency in typography and text styles throughout the design.
Develop reusable components to facilitate efficient and scalable design.
Update icons to ensure consistency with the overall design language.
My team and I collaborated on enhancing the user experience and user interface design of our website by developing an updated style guide and creating a component library. We worked together to add and organize all the colors from the style guide into our local Figma styles.
I also assisted in developing a cohesive icon library and updated the style guide and local colors throughout the design process to ensure consistency. Based on client feedback, we aligned the style guide with their vision, especially in terms of color usage.
To enhance the visual appeal of the new design, we made the switch to Poppins font. Additionally, I contributed to creating components for the home page, contact us page, and FAQ page.
As we progressed through the design process, we modified the style guide by adding new colors, adjusting previous colors slightly, and incorporating finalized button styles and icons.
After receiving feedback from the client on four design iterations, our team took the opportunity to refine and improve our approach. Although the client was generally satisfied with all of the iterations, they ultimately chose to proceed with the first design which me and another designer collaborated on, while requesting the removal of specific elements and the incorporation of features from the other methods. The feedback emphasized the importance of designing a gender-neutral site to meet the target audience's needs.
Taking into consideration the client's preferred design elements, we decided to pursue a scrapbook-inspired aesthetic that aligns with the personalized and intimate nature of the scrapbooking process. The design elements that informed this decision included tape pieces, hearts, and information cards, further enhancing the scrapbook-inspired look and feel.
Overall, I was delighted with the outcome of this iteration, particularly in terms of how the design elements came together to create a cohesive and visually appealing user experience.
High Fidelity Wireframes
During our UX/UI design process, our team worked collaboratively to review and assess each page, ensuring that we integrated the client's requirements while balancing them with our own design decisions. We incorporated feedback from the team and adhered to best practices for each page to create optimal user experiences.
To optimize the user experience and ensure alignment with the client's objectives, the team employed a task-based approach by segmenting the workload per page. I collaborated with another designer to create wireframes and prototypes for the home, contact, and FAQ pages, while the remaining pages were assigned to the other members of the design team.
As part of our UX/UI design process, we created a prototype to facilitate our understanding of the navigational pathways, from the homepage to product purchase, contact page, and learning about the company. Information hierarchy was crucial to the design, and prototyping validated our design decisions. It allowed us to test and refine the sort options on the search and shop pages and create components and pages to demonstrate how they would function. The prototype also enabled us to collaborate effectively with the client, providing them with an interactive representation of our proposed design solutions. Ultimately, creating a prototype benefited our team by enabling us to iterate and refine our designs efficiently while providing clarity to stakeholders.
The team collaborated to deliver a comprehensive UX/UI document that outlined proposed design changes for the client's development team. Detailed annotations were included to enhance comprehension, and specific design elements were annotated for export. The team's dedication to enhancing the user experience resulted in a successful deliverable that met the client's needs.
I am delighted with the result of our UX/UI design project and the collective effort made by my team members. The expressive and minimalistic elements of the final site redesign were balanced harmoniously, leading to a positive user experience. Through our use of Figma's component library and local styles, we were able to incorporate color palettes and text hierarchy efficiently, ultimately reducing errors and optimizing the design process for multiple screens with shared elements. This approach also saved us time when making team-wide stylistic changes.
Effective communication was a vital aspect of our design process, particularly in grasping the client's requirements and vision. Throughout the project, I realized the significance of consistency, time management, discussing design decisions with the team, and collaborating effectively. I am proud of the final design and grateful for my team's diverse perspectives and approaches to the project. The weekly meetings and discussions throughout each phase of the project were instrumental in achieving the client's objectives while providing valuable learning experiences for all involved.
To continue improving in the future, I recognize the importance of continuous feedback gathering and user testing to ensure that designs are meeting user needs and preferences. Exploring new design tools and techniques can also help keep designs fresh and innovative.
Thank you for reading my case study!
Want to share ideas & discuss ways to collaborate? Send me a message!