Sunne Dogcare is a website created for my growing dog-sitting service in Sunne, Sweden. As the demand for dog-sitting has continued to increase, I decided to turn my passion into a business, and this project was the perfect opportunity to get started on a website for my dog care service.
The goal of the site is to provide potential clients with an easy way to explore the services I offer, get to know me and my dogs, and contact me directly for bookings or questions. I wanted the website to reflect the personal touch I bring to my business, so I chose photos and a warm, inviting design to make dog owners feel comfortable and confident when they leave their pets in my care.
Sunne Dogcare is presented with a modern yet friendly aesthetic, focusing on trust and reliability, while also making sure all necessary information is easily accessible and understood.
The goal of Sunne Dogcare is to offer a warm, welcoming, and trustworthy dog-sitting service for dog owners in Sunne and surrounding areas. The website is aimed not only at current dog owners but also at new or potential dog owners who might be looking for a dog-sitting solution before they commit to getting a dog, especially for times when they’re at work or busy.
- Dogowners in Sunne and surrounding areas
- Soon-to-be dogowners in Sunne and surrounding areas
- Read about services: Visitors should easily find details about the services offered, how the process works, and what it costs.
- Book a service: Provide a simple and straightforward way for users to book dog-sitting for their pets.
- Read about Sunne Dogcare: Let users get to know the dog-sitter, the dogs on the property, and what the environment looks like, helping them feel comfortable before making a booking.
- Provide clear information about services: Clearly and simply communicate the services offered, making it easy for visitors to understand what Sunne Dogcare provides and how it works.
- Enable easy booking: Ensure that visitors can easily book dog-sitting services.
- Attract new customers: Make the website inviting and informative, especially for new dog owners or first-time visitors, as returning customers are likely already convinced.
- Build trust: Create a welcoming and reassuring atmosphere with happy dogs and professional services, so that dog owners feel comfortable and confident leaving their pets with us.
| Feature | Description | Reinforces goal |
|---|---|---|
| Personal touch | Introduce the dog-sitter right away with personal photos, also a personal about page introducing the farm and animals, and social media | Build trust and Read about Sunne Dogcare |
| Gallery of happy dogs | Showcase happy dogs in a gallery to highlight the positive environment | Attract new customers |
| Simplify services | Focus on just three clear, easy-to-book services to avoid overwhelming users | Enable easy booking and Read about services |
| Clear service information | Use bullet points to present services with clear descriptions and pricing. Link to service page reappears in several places | Provide clear information about services and Read about services |
| Visual aids | Use icons to make information easy to understand and visually engaging | Provide clear information about services and Read about Sunne Dogcare |
| Easy booking page | A dedicated booking page with minimal fields makes booking quick and simple. | Enable easy booking and Book a service |
| Light, natural colors | Use warm, natural colors to create a friendly, rural feel, matching the environment | Build trust |
- As a dog owner, I want to easily find information about the different dog-sitting services available, so I can choose the best option for my dog.
- As a potential dog owner, I want to learn about the dog-sitter and see photos of the farm, so I can feel confident that I have a reliable dog-sitting solution in place before deciding to get a dog.
- As a busy dog owner, I want a simple and clear booking process, so I can quickly schedule dog-sitting without filling out unnecessary forms.
- As a first-time visitor to the site, I want to see the happy and welcoming environment through photos and descriptions, so I feel reassured about leaving my dog in good hands.
- As a returning customer, I want easy access to the booking page, so I can quickly schedule a service I already know and trust.
- As a dog owner, I want to clearly see the prices for each service, so I can plan my budget without surprises.
- As a dog owner, I want to follow the dog-sitter’s social media to stay updated on the services and see more of the dogs being cared for, so I can feel connected to the service.
- As a dog owner, I want to feel confident that my dog is in safe hands, so I can relax knowing they are well cared for while I'm away.
Wireframes were created using Adobe XD, with a strong focus on the user goals, business goals, and user stories. These wireframes serve as the foundation for the design and structure of the website.
📱 Click to view Mobile Wireframes
💻 Click to view Tablet Wireframes
🖥️ Click to view Desktop Wireframes
The design, fonts, and media are all focused on creating a warm, trustworthy feel that reflects nature and the calm of the surrounding forest. The goal is to make the user feel secure and confident in the services, while keeping things professional. At the same time, the design ensures that the message is clear and easy to take in quickly, so users can find what they need without any hassle.
- Primary Color: The design primarily uses three shades of green as the main color. Green was chosen for its strong association with nature, conveying a sense of calm and reliability —q ualities that align well with the values of a dog-sitting service in a rural setting. Additionally, green represents safety and harmony, which are qualities that Sunne Dogcare wants to convey to its users.
- Secondary Color: A warm, light color is used as the secondary color to add warmth to the design. This shade leans towards orange, a color often linked with happiness and positivity, which complements the joyful and caring atmosphere of the business.
- Base Colors: Black and white are employed as the base colors. Black adds contrast and elegance, helping to ground the design and highlight key elements, while white brings clarity and simplicity, ensuring that the overall message is clear and easy to read.
Together, these colors create a balanced and professional look, enhancing the user experience without overwhelming the content.
- Lora for headings – a serif font that conveys a professional and trustworthy impression, adding a sense of seriousness and reliability to the site.
- Work Sans for paragraph text – a basic and modern sans-serif font chosen for its readability, particularly on screens and smaller devices.
By combining a serif and a sans-serif font, the design achieves a balanced look that feels both professional and approachable, as well as inviting and personal. These two fonts complement each other well, enhancing the overall user experience.
- Lora for headings (H1, H2)
- Work Sans for paragraphs and H3 (Work Sans used instead of Lora for H3 due to better readability).
- Highlighted text is Work Sans in bold green
- Topic Tag, to help users quickly identify content, has a green background and light, uppercase text in Work Sans.
- Links are underlined in green with arrow icon.
- CTA Buttons come in two styles: Light, with white background and black text, and Dark, with green background and white text. Both light and dark have the same hover style.
The logo for Sunne Dogcare uses the font Hot Mess by Sam Parrett. This slightly messy, handwritten font was chosen to create a contrast with the otherwise clean and polished design of the brand. The playful, informal style of the font reflects the more unpredictable and sometimes chaotic nature of dog-sitting, making it a fitting choice for the brand.
The icons used throughout the design are from Font Awesome in the bold solid style. Icons are an important part of the branding, as they help convey messages in a simpler and more visual way. The icons chosen are closely associated with dogs and nature, such as a bone, paw print, and forest.
The images used on the site will focus on dogs highlighting themes of nature, forest, warmth, and joy. The photos will predominantly feature green and natural bright tones to align with the overall design, avoiding sharp or overly bright colors. Warm, earthy hues will be prioritized to create a welcoming and soothing atmosphere, reinforcing the connection to the countryside and the caring environment that Sunne Dogcare offers. All images will have rounded borders to create a softer and more welcoming feel.
The images are sourced from Unsplash via an Unsplash+ subscription.
Additionally, some background images are used with a subtle green overlay.
The final mockups for the UI were created using Adobe XD. The design focuses on a clean and light aesthetic with a clear information hierarchy. Call-to-Actions (CTAs) are designed to be noticeable, encouraging interaction. The overall design aims to provide an intuitive and positive experience for the users.
📱 Click to view Mobile UI
💻 Click to view Tablet UI
🖥️ Click to view Desktop UI
The website consists of a total of 7 pages using one of three types of page layouts; homepage, subpage or notification page.
| Page | Purpose | Layout | Screenshot |
|---|---|---|---|
| Index | Main landing page | Homepage |  |
| Services | Information about services | Subpage |  |
| Gallery | Display of dog-related images | Subpage |  |
| About | Information about the business | Subpage |  |
| Contact & Booking | Contact form for inquiries | Subpage |  |
| Thank you | Confirmation after form submit | Notification Page |  |
| 404 | Error message for wrong pages | Notification Page |  |
| Device | Description | Screenshot |
|---|---|---|
| Desktop | Full navigation menu with all links visible, including a header notice to highlight important messages |  |
| Mobile | Collapsed navigation, icon for dropdown, header notice still visable |  |
| Mobile Dropdown | Expanded dropdown below header notice with all links visible, right-aligned to facilitate thumb navigation |  |
| Device | Description | Screenshot |
|---|---|---|
| Desktop | Footer with contact information displayed side by side, navigation and social links |  |
| Mobile | Footer with contact information stacked vertically for better readability, navigation and social links |  |
The index page serves as the primary landing page for most visitors. Its main objective is to introduce Sunne Dogcare and immediately engage potential clients with a clear and inviting presentation. The page is designed to guide users seamlessly towards booking services, providing a welcoming first impression of the digsitter, services and gallery.
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| Hero Section | Hero section with a CTA button leading to the booking page. |  |
 |
| About Me Section | Section introducing the dog sitter. |  |
 |
| Services Section | Section describing the services offered. |  |
 |
| Gallery Section | Photo gallery showcasing images of dogs. |  |
 |
| CTA Box | Call-to-action box with a link to the services page. |  |
 |
Each subpage follows a consistent layout with a hero section that includes a prominent heading and a descriptive topic tag. Below the hero section, each subpage contains a short description of the content. To guide users towards further action, a CTA box is included at all subpages.
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| Hero Section | Hero section features a descriptive title and a clear topic tag |  |
 |
| Intro Section | Introductory section with description of the page’s content |  |
 |
| CTA Box | Call-to-action box with a link to the services page. | |
|
The notification page does not include a hero section; instead, you are presented with the relevant information immediately. This page is designed to deliver messages without the need for persuasive content or elaborate design elements. The text is written in a playful, dog-themed tone to stay true to the brand and maintain a fun, engaging connection to the dog care business.
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| Main Section | Heading, paragraph and button to homepage. Image to make the design more visually engaging |  |
 |
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| Services | Section describing our 3 services, including a title, descriptive subtitle, description, price, and a list of key details such as drop-off/pick-up, activities, meals, and location. |  |
 |
| CTA | The Services page includes a dedicated CTA box that directs users straight to the booking page. |  |
 |
| FAQ | Frequently asked questions and answers, especially relevant for those booking for the first time. |  |
 |
| Section | Description | Mobile | Tablet | Desktop |
|---|---|---|---|---|
| Gallery | Gallery section featuring images of happy dogs being cared for, designed to build trust and add a personal touch. | |
 |
|
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| About Dogsitter | Section introducing the dog sitter to create a personal and trustworthy connection, including a list of experience details to build trust and confidence. |  |
 |
| About Dogs/Farm | Section describing the property and the resident dogs, giving owners a glimpse of who their dog will interact with and the environment where their dog will stay. |  |
 |
| Section | Description | Mobile | Desktop |
|---|---|---|---|
| Booking form | Booking form for easily scheduling dog care, with required fields for name, email, service, drop-off, and pick-up. The message field is optional. Upon submission, users are redirected to a thank you page confirming their booking. |  |
 |
Throughout the development process, changes were made to the design, content, sections, and features to enhance usability and clarity. These adjustments were necessary to ensure a better user experience. The changes are listed below.
| Action | Section | Reason | Before | After |
|---|---|---|---|---|
| 🗑️Removal | Contact form | Having two contact forms was unnecessary and caused confusion. The contact form was removed and replaced with a CTA box. Now, only one form remains: the booking form. |  |
|
| 🎨Design Change | Service Page | The service section felt cluttered with too many boxes. The large yellow box was removed, and instead, individual boxes were used for the list, resulting in a cleaner and lighter design. On desktop, a thin grey border was added to better separate the different sections. |  |
|
| 🗑️Removal | Service Button | Having a separate CTA button for booking each service was unnecessary, as the same booking form applies to all services. | |
|
| ✅Addition | List | The section about the dog sitter felt dull with only paragraph text. A list was added to clearly highlight the sitter's experience, making the information more engaging and easier to absorb. |  |
|
| 🎨Design Change | Gallery | The original plan was to display two columns for gallery on the homepage for mobile devices. However, the images appeared too small, so I adjusted the layout to a single-column. |  |
 |
| ✅Addition | Contact | Realized that adding contact information to the contact page was essential, of course. |  |
 |
| 🎨Design Change | Navigation | Navigation dropdown changed fron left aligned text to right aligned text for easier thumb use on mobile |  |
|
| ✅Addition | Gallery | Added a link to see more images below the gallery on homepage | |
|
Here are some ideas for expanding the website in future development phases.
-
Booking calendar: Implement a calendar system to allow users to select dates and times more intuitively, while also viewing availability. For example, fully booked days could be marked in red and nearly full days in orange. Additionally, a feature to search for availability on specific dates would enhance the booking process.
-
Review system: Introduce a review system where dog owners can leave feedback after using the service. This could include star ratings and written reviews displayed on the website. An automated email could be sent to clients after they pick up their dog, encouraging them to submit a review.
-
Live chat/Customer support: Add a chat feature or support system, allowing users to ask quick questions or get in touch directly from the website, ensuring faster communication and customer service.
-
Owner updates and reports: Develop a system for sending updates, pictures, and reports directly to dog owners. This would allow tracking of activities like walks and feeding, keeping owners informed about their dog’s care in real-time.
-
Online payment integration: Enable users to complete payments directly through the website during the booking process, offering a seamless and convenient checkout experience.
-
Booking calendar for new clients: Allowing new clients to schedule an initial one-hour meeting. This meeting gives new dog owners the chance to meet me, interact with my dogs, and get a sense of how the service operates.
This project is built using HTML and CSS.
-
Google Fonts
Used for the fonts Work Sans and Lora. -
Font Awesome
Used for icons.
-
Favicon Generator
Used for generating favicon versions. -
Google Developer Tools
Used for testing and identifying my code -
Browserling
Used for testing the website in different browsers -
WAVE
Used to test accessibility in design and website.
I have validated my HTML code using HTML W3C Validator and CSS code using CSS Jigsaw Validator
| Page | Status | Screenshot |
|---|---|---|
| Homepage | ✅ Pass |  |
| Services | ✅ Pass |  |
| Gallery | ✅ Pass |  |
| About | ✅ Pass |  |
| Contact | ✅ Pass |  |
| Thank you | ✅ Pass |  |
| 404 | ✅ Pass |  |
| File | Status | Screenshot |
|---|---|---|
| style.css | ✅ Pass |  |
The website has been tested using Browserling to ensure functionality across a variety of web browsers. It has been confirmed to work on the following browsers:
- ✅ Chrome
- ✅ Safari
- ✅ Opera
- ✅ Firefox
- ✅ Brave
- ✅ Edge
Throughout the project, I prioritized responsive design by continuously testing with Google Developer Tools. Each new feature was tested on both small and large screen sizes to ensure optimal performance. I followed a mobile-first approach, carefully considering both extra-large and extra-small screens. I tested all available screen sizes in Google Developer Tools, and the website displays correctly across all devices.
There are some performance issues across all pages, some of them are due to the large size of images. Future development of the site should focus on optimizing images for the web.
| Page | Mobile | Desktop |
|---|---|---|
| Homepage |  |
 |
| Services |  |
 |
| Gallery |  |
 |
| About |  |
 |
| Contact |  |
 |
| Thank you |  |
 |
| 404 |  |
 |
| User Story | User path | Screenshot |
|---|---|---|
| As a dog owner, I want to easily find information about the different dog-sitting services available, so I can choose the best option for my dog. | Homepage > Services |  |
| As a potential dog owner, I want to learn about the dog-sitter and see photos of the farm, so I can feel confident that I have a reliable dog-sitting solution in place before deciding to get a dog. | Homepage > About |  |
| As a busy dog owner, I want a simple and clear booking process, so I can quickly schedule dog-sitting without filling out unnecessary forms. | Homepage > Contact & Booking |  |
| As a first-time visitor to the site, I want to see the happy and welcoming environment through photos and descriptions, so I feel reassured about leaving my dog in good hands. | Homepage > Gallery |  |
| As a returning customer, I want easy access to the booking page, so I can quickly schedule a service I already know and trust. | Homepage > Contact & Booking | |
| As a dog owner, I want to clearly see the prices for each service, so I can plan my budget without surprises. | Homepage > Services | |
| As a dog owner, I want to follow the dog-sitter’s social media to stay updated on the services and see more of the dogs being cared for, so I can feel connected to the service. | Homepage (footer) |  |
| As a dog owner, I want to feel confident that my dog is in safe hands, so I can relax knowing they are well cared for while I'm away. | Homepage > About | |
| Bug | Screenshot | Description | Solution |
|---|---|---|---|
| Contrast Issue |  |
Low contrast on the active navigation link in the header resulted in poor accessibility. Found by testing site in WAVE. | Improved accessibility by changing the active link color to a darker green and adding an underline. |
| Contrast Issue |  |
Low contrast on the topic tag caused poor accessibility, making the text hard to read, especially for users with visual impairments. Found by testing site in WAVE. | Changed the tag’s background color to a darker green. |
| Contrast Issue |  |
Low contrast between white text and image background when testing site in WAVE. | Applied a dark overlay with CSS instead of manually darkening the background in Photoshop, improving text visibility and accessibility. |
| Responsive Issue |  |
The booking form displayed incorrectly on smaller screens, losing padding and causing a horizontal scroll due to oversized input fields. | Added responsive CSS for smaller screens, reducing padding and font size for form inputs. Also adjusted padding on the form container for better layout on mobile devices. |
| Responsive Issue |  |
The CTA button was getting cut off on smaller screens, resulting in awkward line breaks and poor user experience. | Reduced the button size and adjusted padding within the CTA box for smaller screens to prevent the cutoff and ensure proper alignment. |
| Responsive Issue |  |
On screens smaller than 350px, the body content shrank, but an overflow issue caused the content to not align properly on the right side. | Identified the footer logo as the cause. Applied a max-width and width:100% to correct this. |
Let’s test if the website meets the goals we set at the beginning, both the user’s goals and the business objectives.
| Goal | Result | Notes |
|---|---|---|
| User Goals: Read about services | ✅ Pass | Clear information about services, process and cost |
| User Goals: Book a service | ✅ Pass | Simple booking form thats easy to find due to CTAs on almost all pages |
| User Goals: Read about Sunne Dogcare | ✅ Pass | Clear navigation to about page with information about dogsitter etc. |
| Business Goals: Provide clear information about services | ✅ Pass | Narrowed down to three clear and easy-to-understad services |
| Business Goals: Enable easy booking | ✅ Pass | Booking form with easy navigation and easy to fill out form |
| Attract new customers Attract new customers | The website does attract new customers, but the content could be more directly aimed at new customers than it currently is, with special offer or something like that | |
| Business Goals: Build trust | ✅ Pass | Lots of happy photos and personal information that builds trust |
| Test | Notes | Screenshot |
|---|---|---|
| Form submission testing | Tested the booking form with method="POST" and sent correct data. Changed it to a thank you page later on. |  |
None that I know of - feel free to tell me if you find any!
To run this project locally, follow these basic steps:
Requirements:
- An IDE of your choice
- Git
- A web browser
Local Instructions:
- Clone the repository by running the following command in your terminal
git clone https://github.com/YOUR-USERNAME/your-repository.git- Navigate to the folder where the repository was cloned.
cd your-repository-
Open the folder in your IDE.
-
Launch the project by opening the index.html file in your preferred web browser.
The project is deployed on GitHub Pages. To deploy your own version, follow these steps:
- Log in to your GitHub account. navigate to https://github.com/fridalannerstrom/dogsitter
- You can set up your own repository and copy or clone it, or you fork the repository.
- GitHub pages will update from the master branch by default.
- Go to the Settings page of the repository.
- Scroll down to the Github Pages section.
- Select the Master Branch as the source and Confirm the selection.
- Wait a minute or two and it should be live for viewing.
| Source | Notes |
|---|---|
| Unsplash | Photos used throughout the website (except for my own) |
| ChatGPT | Assisted with content creation and providing English wording for the README documentation |
| Hot Mess by Sam Parrett | A fantastic font used for branding my Dog Care business |
| Mockup Generator | Used for generating mockup image in this README |
| Source | Notes |
|---|---|
| CloudConvert | Converted PNG images to WebP format |
| Convertio | Converted PNG images to WebP format |
| Xconvert | Resize and optimize webp images |
| W3Schools | Helped refresh my memory on CSS attributes and syntax when needed |
| Conventional Commits | Introduced me to a structured and meaningful way of writing commit messages, which I adopted halfway through the project |
- A huge thank you to my mentor, Rory Patrick, for providing invaluable guidance throughout this project.
- Special thanks to Code Institute, particularly the "Love Runners" project, for helping me get started with GitHub and guiding me through the project process.