Healthy Food Hertfordshire App & Responsive Website
Healthy Food Hertfordshire App & Responsive Website
Healthy Living at Your Fingertips
Healthy Living at Your Fingertips
Embedded Files
Design a way for neighbourhoods/communities to ensure that everyone has access to Healthy Food.
Design a way for neighbourhoods/communities to ensure that everyone has access to Healthy Food.
JANUARY TO ARPIL 2024 | FIGMA & ADOBE ILLUSTRATOR | UX LEAD KATTY RODRIGUES
... and this is what I call "Fresh Connections"
... and this is what I call "Fresh Connections"
Bridging the Gap Between Local Produce and Community Needs
Bridging the Gap Between Local Produce and Community Needs
Healthy Food Hertfordshire is an App and Responsive Website designed with social good at its core. It brings fresh, locally sourced products to every table in Hertfordshire, supporting the community and promoting healthier daily living.
Residents of Hertfordshire often need to travel to large supermarkets or rely on online orders, waiting for available delivery slots. Meanwhile, local farms and small producers frequently face the challenge of managing waste from fresh, organic products that go unsold.
The Goal
The Goal
Healthy Food Hertfordshire is a web app designed to provide users with a seamless experience for ordering fresh food in their local area. I worked on this project from Watford, with the concept developed to showcase innovative food delivery solutions across Hertfordshire.
Responsibilities
Responsibilities
Organising interviews, creating and refining paper and digital wireframes, developing low and high-fidelity prototypes, conducting usability studies, ensuring accessibility considerations, and continuously iterating on designs.
User Research
User Research
Summary
Summary
To gain a deeper understanding of the target user and their needs, I conducted User Interviews, which I later translated into Empathy Maps. This has generated suggestions on how the product could be produced, and we've seen that they all have a few things in common, including a difficulty to order, small window of time, little knowledge of app websites.
Furthermore, the results of the user study indicate that in order to create a smooth, efficient, and delightful experience, we must apply and concentrate on that crucial point almost effortlessly. adjusting the cost of each product to meet their needs.
Pain Points
Pain Points
1
1
Websites can often feel overwhelming, whether due to complex navigation or an overload of products.
2
2
Significant effort is often required to navigate and understand the layout of the App or Website.
3
3
Delivery time slots are often scheduled far in advance.
Personas
Personas
Problem Statement
Problem Statement
Erika, a busy single mother and assistant accountant living in Hertfordshire, needs a convenient way to access healthy food without having to leave home. Her demanding schedule and constant on-the-go lifestyle leave her with little time to shop for groceries.
— Erika Cavenaghi
Age 40 Years Old
Education Bookkeeper
Hometown Watford
Family Young child
Occupation Assistant Account
Goals
1. Find a website/app where I can order and get delivery same day
2. In addition to get fresh and organic and local produce
Frustration
1. Finding the right product
2. A huge selection of products, leaving no time
3. Waiting for a long time to get the/various products
Erika is a Full time assistant account with many years of experience and a single mum, she needs to program every day of her schedule, living very little time for error, so she can benefit from Web apps like Health Food Hertfordshire where she can get fresh local produce same day delivery
User Journey Map
User Journey Map
I mapped out Erika's user journey to address potential pain points and identify areas for improvement and development.
ERIKA CAVENAGHI | USER JOURNEY MAP
Sitemap
Sitemap
My primary focus was addressing difficulties with website navigation while keeping inclusivity and accessibility in mind. I aimed to create a smart, user-centered information architecture to enhance the overall browsing experience. The structure I designed was intentionally straightforward and easy to navigate.
ERIKA CAVENAGHI | SITE MAP
.
.
1
1
Paper Wireframes
Paper Wireframes
Using a Progressive Enhancement Process, I created paper wireframes for every screen of the web app, addressing user pain points related to navigation, browsing, and time slot flow.
2
2
The Home Screen wireframe variants on the right are designed to improve and streamline the user's browsing experience.
The components of each sketch that would be included in the preliminary digital wireframes were indicated by stars.
PRELIMINARY WIREFRAME
Screen size variations
Screen size variations
Paper Wireframe
Paper Wireframe
I started designing for additional screen sizes to ensure the Healthy Food Hertfordshire Web App is fully responsive, providing an optimal experience for all users regardless of the device they use.
Digital Wireframes
Digital Wireframes
Transitioning from paper to digital wireframes made it clear how the redesign could address user pain points and significantly improve the overall user experience.
A key focus of my approach was prioritizing the placement of functional buttons and visual elements on the home page to enhance usability and navigation.
COMBINE ELEMENTS REFINE WIREFRAME DESIGN
1
1
A series of images presented as a carousel will make the interaction engaging and easy to utilise.
2
2
From here you can access few important buttons, as well as the Social Media Links.
3
3
Hamburger Menu: Simple Navigation via those buttons to every page.
Paper & Digital Wireframes
Paper & Digital Wireframes
PAPER & DIGITAL WIREFRAME
Low-fidelity Prototype
Low-fidelity Prototype
I combined all the screens involved in the main user flow (designed to navigate the page using all available buttons) to create a low-fidelity prototype.
At this stage, team members provided valuable feedback on aspects such as page organization and button placement. I carefully considered their input and implemented several recommendations that would enhance the user experience.
Usability Study Parameters
Usability Study Parameters
1
1
Study type
Study type
Unmoderated
Usability study
2
2
Location
Location
United Kingdom
Remote
3
3
Participants
Participants
5 participants
4
4
Length
Length
10 - 20 minutes
Findings
Findings
These were the primary conclusions that the usability study came to.
1
1
Buttons
Buttons
They found the Profile button difficult to locate, so they suggested making it more prominent for easier navigation.
2
2
Aesthetic
Aesthetic
The top navigation bar felt cluttered, so increasing the spacing between elements would improve the layout and enhance usability.
3
3
Payments
Payments
The Payment screen displayed an option to make a payment, but there was no section to enter payment details or save them for future purchases.
4
4
Delivery
Delivery
Offer the option of:
Click & Collect or Delivery from the beginning will simplify the process, also it would show items available in store
USABILITY STUDY - HEALTHY FOOD HERTFORDSHIRE
AFFINITY DIAGRAM - HEALTHY FOOD HERTFORDSHIRE
Mock-ups
Mock-ups
To improve the site's navigation, I implemented changes based on the findings from the usability study.
One key modification was extending the top navigation bar and increasing the spacing between elements for better clarity and ease of use.
BEFORE USABILITY STUDY
AFTER USABILITY STUDY
BEFORE USABILITY STUDY
AFTER USABILITY STUDY
Other improvements included adding imagery and buttons to better showcase the services offered.
The web app was designed with simplicity in mind, using clear icons, imagery, and titles to reflect the user flow.
These updates collectively provide a more intuitive and streamlined experience, making it easier and faster for users to find the services they need.
HEALTHY FOOD HERTFORDSHIRE WEBSITE FULL SCREEN
Original screen size
Original screen size
Screen size variations
Screen size variations
Building on my previous wireframes, I ensured that my mock-ups were optimized for a range of screen sizes. Recognizing the importance of delivering a seamless browsing experience across various devices, including mobile and tablet, I aimed to provide users with the best possible experience, regardless of the device they use.
High-fidelity Prototype
High-fidelity Prototype
The Hi-Fi Prototype adhered to the same user flow as the Lo-Fi prototype and incorporated many modifications recommended by my team members in addition to the design adjustments made during the usability study.
Accessibility considerations
Accessibility considerations
Inclusivity was at the heart of this project. I took intentional steps to ensure the app would be usable and accessible to a wide range of users, including those relying on assistive technologies:
1
1
Clear Visual Hierarchy
Buttons were paired with relevant icons and imagery to enhance clarity and aid quick recognition. Visual hierarchy was carefully applied to guide users through the interface effortlessly.
2
2
Use of Landmarks
I implemented navigational landmarks across the design to support structured browsing and improve accessibility for users of screen readers and other assistive tools.
3
3
Alt Text Integration
All imagery included descriptive alt text to enable a smooth experience for users relying on screen readers, ensuring no information is lost.
Takeaways
Takeaways
Impact
Impact
The final design resonated strongly with our target audience. Users appreciated the clear visual hierarchy, intuitive navigation, and engaging use of graphics, all of which contributed to a more enjoyable and accessible user experience. Feedback confirmed that the app aligned with users’ real-world needs—particularly for those seeking a streamlined shopping journey with inclusive design features.
What I learnt
What I learnt
This project reinforced the importance of user-centred design. I learned that even small adjustments in layout or interaction can have a significant impact on usability. The biggest takeaway was the value of continually returning to the user’s perspective—their challenges, behaviours, and goals—when making design decisions to create effective and meaningful solutions.
Next Steps
Next Steps
1
1
Conduct Further Usability Testing
Conduct Further Usability Testing
Continue testing the web app to uncover any gaps in functionality, improve user flow, and identify opportunities for feature enhancements.
2
2
Explore and Prioritise New Features
Explore and Prioritise New Features
Evaluate additional areas where the app can grow based on user feedback and business goals, then brainstorm and plan upcoming features accordingly.
3
3
Enhance Content and Expand Pages
Enhance Content and Expand Pages
Strategically update pages by adding relevant images, detailed information, and additional services to ensure scalability and long-term user engagement.
Healthy Food Hertfordshire Responsive Website & App Project
Healthy Food Hertfordshire Responsive Website & App Project
“Thank you for taking the time to explore my work on the Healthy Food Hertfordshire Web App Case Study.
I truly enjoyed working on this project and look forward to expanding it's features and learning more along the way.
I’m always open to feedback, collaboration, or simply a creative chat—feel free to drop me a message!
— Katty Rodrigues, Creative - Designer.
Let’s connect!
Let’s connect!
Interested in working together or seeing more of my projects?
Interested in working together or seeing more of my projects?
Page updated
Google Sites
Report abuse