Background story
I started Orange Hills after a simple yet impactful moment at my local Spar. While shopping, I noticed a woman struggling to load heavy bottles of water onto her trolley. That moment sparked an idea: what if there was a convenient way to deliver fresh, clean water directly to people’s doorsteps, especially for those who find it challenging to carry heavy loads?
Orange Hills was born from my desire to solve a real-life problem I observed—seeing a woman struggle to carry heavy water bottles sparked an idea. As a UX/UI designer, I had been looking for a project I could document in my portfolio, but due to non-disclosure agreements (NDAs) with my freelance clients, I was unable to showcase much of my work publicly.
I never aimed to run a large corporation, but this idea seemed simple and manageable, something I could pursue as a side hustle. I structured the delivery schedule to fit my availability and focused on serving residents within my suburb. Orange Hills not only allowed me to build a project from the ground up but also provided an opportunity to immerse myself in the web design and development process, learning every step of the way.

Roles and Responsibilities
This project allowed me to wear multiple hats, allowing me to gain a comprehensive understanding of the entire project lifecycle—from initial concept to final implementation. As both the founder and lead UX/UI designer, I was deeply involved in every stage of the process. I collaborated closely with my mentor, who played a crucial role as the design director and developer, guiding me through the intricacies of both design strategy and technical development. Below is a breakdown of my roles and responsibilities throughout the project:
| Role | Responsibilities |
|---|---|
| Nthabiseng – UX/UI Designer | – Conducted extensive user research to understand the needs and pain points of target customers and delivery drivers. |
| – Conducted customer interviews and used the data to define personas. | |
| – Created user journeys for the customer and the delivery driver. | |
| – Created wireframes and high-fidelity mockups to visualize the user journey and interface design | |
| – Conducted usability testing and iterated on designs based on user feedback and usability testing results. | |
| Nthabiseng – Founder | – Conceived the idea for Orange Hills based on a real-life observation of a user struggle. |
| – Led the project from conception to execution, including defining the service model and customer experience. | |
| Mentor – Design Director and Developer | – Provided guidance on design strategy and implementation. |
| – Collaborated on refining design concepts to align with business goals and user needs. | |
| -Developed the Orange Hills website. |
Project tasks tracking on Trello
I used Trello to organize and manage my daily tasks for the Orange Hills project. Its visual layout allowed me to create task lists, set due dates, and track progress easily. This helped me prioritise work, stay on track, and collaborate effectively.

Phase 1: Empathise
To validate my idea, I spoke with people in my neighborhood to gauge interest in a convenient water delivery service. I discovered a need among specific groups:
- Mothers who didn’t have the time to buy water themselves.
- Young couples who found it inconvenient to go to the store just to refill water.
Although the demand was small, this suited my goal of using Orange Hills as a learning project rather than a high-profit venture. My focus was on designing a service from the ground up, gaining practical experience in creating and implementing a business solution.
Interview Process: I interviewed eight people and used their responses to create personas, which helped me understand my target audience and their needs. This initial research formed the foundation for my design approach.


Phase 2: Define
Problems and Value Propositions
The user interviews provided valuable insights into why people choose not to use water delivery services. Using these learnings, I conducted a problem analysis to identify the value my business could offer.
| Problem Scenarios | Existing Alternatives | Value Propositions |
|---|---|---|
| People find it hard to locate a reliable and user-friendly online water delivery service. | Driving to water refill stations, which is time-consuming and inconvenient. | A platform that is easy to find and use, saving time and effort. |
| People are not confident using online services due to lack of familiarity or complexity. | Relying on physical stores or refill stations, avoiding online platforms. | A simple, intuitive platform that makes ordering water effortless, even for those unfamiliar with technology. |
| People are frustrated by poor communication and unreliable service from delivery providers. | Calling local delivery services, which may be inconsistent or unreliable. | Reliable, real-time order tracking and clear updates for peace of mind. |
| People feel hesitant about the cost or doubt the value of online delivery services. | Continuing to use tap water or purchasing bottled water in bulk from supermarkets. | Transparent pricing with options for subscriptions or discounts, providing value and affordability. |
| People dislike the physical effort and time spent on refilling and transporting heavy water containers. | Carrying heavy water bottles from refill stations or stores, which is inconvenient and exhausting. | Doorstep delivery of water, reducing physical strain and saving time. |
Phase 3: Design
Customer Journey Map
I created a Customer Journey Map to outline how customers purchase water from Orange Hills, covering every stage from discovering the service to completing their order and delivery. This map clarified user interactions, needs, frustrations, and goals, helping me identify pain points like unclear navigation or delivery delays. It guided the design toward a seamless experience focused on ease of use.

Stylescape
I created a Stylescape to help generate ideas around the type of iconography, imagery, colours and typography that I would like to use for the brand design.

Style Guide
I created a style guide to ensure consistency and alignment with the Orange Hills brand. It outlined colours, fonts, button styles, and other visual elements, maintaining a cohesive and professional look across the website. The guide streamlined the design process by providing reusable elements, simplifying collaboration with my developer.

High-Fidelity Design
I used my style guide and a lot of references to create the high-fidelity designs. Visit the online solution here: https://orangehills.co.za/


Phase 4: Testing
During this phase, I wrote a test script and conducted face-to-face usability tests with three participants. The tests were conducted on my Mac Mini desktop, where I observed users from the side as they navigated the prototype. Using QuickTime Player, I recorded their on-screen actions and our conversations during the sessions.
The primary goal was to ensure the website was user-friendly, addressed user needs, and identified areas for improvement before development.
Usability testing helped me:
- Understand user needs and behaviors.
- Identify and address design issues early.
- Improve the user experience for smoother interactions.
- Save time and costs by resolving issues pre-development.
This process was essential for creating a functional, intuitive, and enjoyable platform.


Phase 5: Development
The website was developed on WordPress and our hosting provider is Domains.co.za. In upcoming blog posts, with the help of my developer, I’ll dive deeper into the development process, exploring technical constraints, plugins, code, and the iterative design-development cycle. There’s a lot to cover, so I’ll need more than just a case study to tackle these topics.

Conclusion

Designing Orange Hills was a rewarding journey that illustrated the value of a structured design process. Here’s what I learned:
- Understanding the Problem
I identified the core issue: people find it inconvenient to travel to water refill stations. Research revealed that users prioritise simplicity, reliability, and flexibility, which shaped the project direction. - User-Centered Design
Empathy mapping and persona creation helped pinpoint user pain points, motivations, and preferences. Focusing on ease of use, clear navigation, and trust ensured the design addressed real needs. - Consistency Through a Style Guide
A style guide ensured a cohesive design with consistent colors, typography, and components. This enhanced both visual appeal and usability. - Prototyping and Testing
Prototypes brought ideas to life. Usability tests, recorded using QuickTime Player, identified areas for improvement, such as simplifying navigation and clarifying product details. - Iterative Improvements
Never Design Alone! Testing and feedback drove iterative enhancements, making the ordering process smoother and improving product information clarity.
This project demonstrated the power of empathy, structure, and iteration in creating meaningful solutions to real-world problems. It deepened my skills as a designer and reinforced the importance of a user-focused approach.


Let’s connect on LinkedIn