Introduction
I undertook the role of a UXUI designer and developer for a client venturing into the world of cocoa ceremonies and natural cocoa products. The client approached with specific requirements and personas in mind for the website, seeking to create a platform that not only showcased products but also conveyed the essence of the cocoa experience.
Role
As the UXUI designer and developer, my responsibilities included characterizing the client’s needs, conducting competitor research, creating user flows, designing wireframes, and ultimately developing the website using WordPress with Elementor. The emphasis was on meeting the client’s unique wishes, particularly regarding the prominent display of photos to convey the experiential nature of the offered products.
Tools and Technologies Used
The design and development processes were executed using a combination of research tools, Figma for wireframes and UI design, and WordPress with Elementor for website development.
The Challenge
The primary challenge was to create a website that met the client’s specific requirements, emphasized an experiential display of photos, and empowered the client to manage and modify the site independently.
User Story
The journey began with a comprehensive conversation to characterize the client’s vision, needs, and desired personas for the website. After this initial understanding, I embarked on an exploration of existing materials, conducting competitor research to glean insights into industry strengths and weaknesses.
Competitor Research
Explored competitors in the cocoa ceremonies and natural products domain, identifying strengths and weaknesses to inform our approach.
User Flow Architecture
Created a detailed user flow architecture, defining the screens and their flow within the site, ensuring a seamless and engaging user experience.
Wireframing and UI Design
Presented wireframes to illustrate the composition of the site, engaging in discussions and brainstorming sessions with the client to strike a balance between her desires and user needs. Moved on to the challenging UI design phase, emphasizing the client’s wish for abundant photo displays to convey the product “experience.”
Mobile Screen Design
Extended the design to mobile screens, ensuring a consistent and user-friendly experience across different devices.
Prototype Creation
Developed a prototype to showcase the site to the client, gaining approval before moving on to the development phase. This step minimized changes during the critical development stage.
Development with WordPress - Elementor
Utilized WordPress with Elementor to bring the design to life, incorporating the desired functionality defined by the client, such as automated email responses for newsletter registrations.
Client Training
Conducted training sessions to empower the client in the independent operation and modification of specific aspects of the site, ensuring alignment with the design principles and preventing critical errors.
Results
The website successfully translated the client’s vision into a visually engaging and experiential platform for cocoa ceremonies and natural products. The client’s emphasis on photos as a key element of the “experience” was effectively incorporated.
Key Takeaways
This project highlighted the importance of understanding the client’s vision, iterative design processes, and empowering clients for independent website management. The emphasis on experiential photo displays added a unique touch to the overall design.
