_edited.png)
.png)
_edited.png)
My Role: UI Designer - Team of one
Tools Used: Figma - Word
Time On Project: 2 weeks
Problem statement
EdenBox is grappling with inefficiencies in tracking customer orders and providing timely delivery updates, leading to a need for streamlined processes and improved communication mechanisms to enhance overall customer satisfaction.
What are the highlights?
The goal of SearchMe was to speed up the search process across various messaging apps, rather than creating a new messaging app. Through the research conducted, it was discovered that people have multiple messaging apps and were short on time. The design journey that led to the creation of SearchMe is outlined below.
Research summary
Why create deliverables?
To ensure that the primary user was kept in mind during the design process, I created a User Persona named Grace and a Journey Map to identify pain points.
How do deliverables help the team?
If there had been a team involved in the project, these deliverables would have been even more beneficial. A User Persona would have acted as a reference point for the entire team and stakeholders, ensuring that everyone was aligned with the user's needs and goals. These deliverables would create a more collaborative and efficient design process. Overall, User Personas and Journey Maps are essential tools for any team involved in the design process, as they help ensure a user-centred approach and improve collaboration and communication between team members.
.png)
"Overwhelmed, frustrated, and dissatisfied due to time-intensive reporting processes and limited insights."
Why design a SaaS platform?
Thorough research illuminated the critical need for a unified solution to alleviate Grace's challenges at EdenBox. The current pain points, as experienced by our primary user persona, Grace, revolve around managing orders, coordinating with multiple stores, assigning delivery drivers, and overseeing vehicles— all scattered across disparate systems. These fragmented processes led to inefficiencies, hindering real-time tracking, impeding seamless communication, and complicating report generation. The envisioned SaaS platform emerges as a transformative solution tailored to address Grace's frustrations directly. By centralising these functions into a cohesive platform, the SaaS solution promises to enhance efficiency, streamline data integration, and facilitate robust reporting capabilities. This strategic approach not only mitigates the complexities faced by Grace but also amplifies EdenBox's operational effectiveness. In the subsequent sections, I will delve into the UI design process, highlighting the steps taken to craft a user-centric solution that encapsulates pivotal UX principles.
Information architecture
Summary of information structure:
Admin login - a login page with login, button to request permission and testimonials.
Orders – full list of active, open and closed orders.
Nursery locations - map view and card view of nursery locations and option to add more.
Galleries – all our locations, with the ability to add new nurseries to the chain.
Drivers/delivery teams – list and map view of people making the deliveries.
Dashboard – most high level information, statistics – just to show a birds eye view.
Dashboard – most high-level information, statistics – just to show a bird's eye view.
Orders – full list of active, open and closed orders.
What information architecture did I use?
Admin login - a login page with a login, button to request permission and testimonials.
Nursery locations - map view and card view of nursery locations and option to add more.
Products – all our products, with the ability to add new products to the site.
Drivers/delivery teams – list and map view of people making the deliveries.
Wire frames
Why create wire frames?
Wireframes play a crucial role in design, serving as the foundational blueprint for digital interfaces. These low-fidelity representations were instrumental in my process, as they allowed me to map out the structure and content placement of each section before delving into the detailed, high-fidelity design.
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Design system
Why create a design system?
A design system is vital for EdenBox's SaaS project success, offering a structured approach with reusable components and guidelines. Ensuring consistency and efficiency, accelerating development, maintaining visual harmony, and fostering collaboration, ultimately aligning the product seamlessly with project goals.
Summary
How would I summarise this project?
In retrospect, I am pleased with the outcomes of the UI Design project. The implemented features effectively addressed the core problem identified in the initial statement for EdenBox, streamlining the tracking of customer orders and providing timely delivery updates. Looking ahead, potential enhancements could involve incorporating functionalities for adding/editing nursery locations and a dedicated page for managing the vehicle fleet. This addition would not only bolster usability but also contribute to the seamless integration of the SaaS platform into EdenBox, further optimising its overall efficiency and customer satisfaction.
Thank you for taking the time to look at my project. If you would like to know more or if you have a business proposition you would like to discuss please contact me.
Visual Design
Why use consistent spacing?
Consistent spacing is crucial in design for a harmonious and user-friendly experience. Employing an 8-point grid system ensures alignment and visual order. In the EdenBox project I have used a uniform 32-pixel spacing between sections, the design maintains balance and hierarchy, while 24-pixel internal spacing within sections enhances readability (see image). This disciplined approach not only achieved a polished aesthetic but also streamlined the design process, promoting a visually pleasing and organised user experience.
_edited.jpg)
Why create a colour palette?
Carefully selecting a colour palette is fundamental in design, playing a pivotal role in establishing a cohesive and visually harmonious aesthetic. The thoughtful inclusion of green as the primary colour serves to unite the green-fingered essence of the company and aligns with the colour from the leaf logo that I designed. This strategic colour choice enhances not only the visual appeal but also reinforces brand recognition, guides user navigation, and influences emotional responses. The consistency in colour choices maintains a unified and professional look throughout the design, contributing significantly to a positive user experience and reinforcing the intended brand identity and message.
Final Designs
.png)
.png)
.png)
.png)
.png)
.png)
.png)
Final design:
Wireframes are crucial in design, acting as a foundational blueprint for digital interfaces. These low-fidelity representations provide a swift and clear overview of layout, content placement, and user flow, facilitating efficient iteration and early issue identification. Not only do wireframes save time, but in a team setting, they also conserve resources and foster alignment among teams and stakeholders, guaranteeing the development of a user-centric end product.
What is the importance of font choices?
The font Satochi, chosen for its ability to establish brand identity and foster an open, readable interface, plays a central role in elevating the overall user experience. This deliberate approach not only ensures a polished appearance but also fosters brand recognition, enhancing content digestibility for users. Ultimately, font selection serves as a powerful tool in crafting the visual identity and communication strategy of a design.
What does graphic design bring?
Graphics are integral to design, serving as powerful tools to convey information and enhance aesthetics. Techniques such as using masks to modify photo colours and cutting out images contribute significantly to achieving design uniformity.
I used precision in cutting around staff headshots and paired this with a consistent background and shirt colour to establish a cohesive and professional look. This uniformity not only enhanced the visual appeal but also reinforced a consistent brand identity. I then applied masks to images of vans which enabled an adaptable design. This allowed for changes in colour to align with the overall colour scheme and indicating driver availability.
These nuanced graphic strategies not only contribute to the overall polish of the design but also offer practical functionalities, ensuring a harmonious and dynamic visual presentation.
.png)
.png)