An inviting coworking space in the town center of Eastbourne. With modern facilities, cosy and relaxed decor and a cafe on site.
Visitors can reserve desk space, offices or conference rooms on a short or longterm basis.
- Project goals
- User experience
- Design
- Features
- Technologies used
- Validation
- Bugs
- Deployment
- Credits
- Acknowledgements
The user goals
- Find a welcoming coworking space with modern facilities.
- Find information about the facilities and workspaces available.
- Find the pricing and how to book.
- Find the location and contact details for the venue.
The business goals of The Happy Space Co.
- Increase revenue from new and return visitors making reservations.
- Increase awareness of the venue as the best place to go for coworking.
- Provide essential information and photos of the venue to new and returning visitors.
- Provide a way for visitors to contact the venue directly.
- Entrepreneurs, looking for a place to work from or hold meetings. With opportunities for networking and collaboration.
- Remote workers, looking for a workspace alongside others for company, or as a venue for remote teams to come together.
- Side-hustlers, looking for a workspace with access outside of business hours.
- Local business owners, looking for networking or collaboration opportunities.
- A clear navigation that makes it easy to see what information is available on the site.
- A design-led experience that's a delight to see and use.
- A colour palette and typography that considers accessibility and readability.
- Links and functions that work as expected.
- Consistency across pages.
- Fully responsive for viewing on any device.
- As an entrepreneur, I want to know if there are open workspaces, so that I can work alongside others for networking or collaboration opportunities.
- As an entrepreneur, I want to know if I can have people visit my workspace, so I can continue my in-person meetings.
- As a remote worker, I want to know if there are personal workspaces with good desks and chairs available, as I'm fed up of working from my sofa at home.
- As a remote worker, I want to know what rooms are available for workshops, so that I can bring my team together for training once a month.
- As a side-hustler, I want to know when I can use the workspaces, so that I can work in the evenings and weekends on my business.
- As a local business owner, I want to know the cost of the workspaces, so that I can determine whether it is within budget.
- As a non-local visitor, I want to know how close the venue is to the town center, so that I won't get lost in an area I don't know.
- As a first time visitor, I want the site to be responsive, so that I can view information about the venue while on the go.
- As a first time visitor, I want to know how good the internet connection is, so that I can be sure that I can run video calls without a hitch.
- As a first time visitor, I want to know how to reserve workspaces, so I can make a booking.
- As a first time visitor, I want to know where I can ask questions about the venue, so that I can get all the information I need before booking.
- As a returning visitor, I want to be able to submit feedback, so that the business owners can consider my thoughts for future website/venue updates.
- As a returning visitor, I want a reminder of the address/see a map, so that I can plan my route.
- As a returning visitor, I want a reminder of the phone number/email address, so that I can contact the venue directly with any questions.
- As a returning visitor, I want to know the venue's social media accounts, so that I can share my location/experiences with friends/colleagues on social media.
- As the business owner, I want more bookings, so that my business can succeed.
- As the business owner, I want to to show how amazing our service/venue is, so that I can feel proud and that everyone will talk about it.
- As the business owner, I want a way for visitors to be able to contact me directly through the website, so that I can help with special requests.
- As the business owner, I want visitors to never have to use the browser's back button, so that they feel they have control over the site.
Inspired by offices and coworking spaces I've used, as well as online interior design photos, I came up with the following keywords for the brand:
- Welcoming
- Modern
- Creative
- Classy
The site is designed using a modern, bright and clean palette (modern, creative), with a warm and elegant dark green (welcoming, classy) in the footer and text. This is to reflect how the venue would look, carrying the same feel from the website to the coworking space. New visitors would already have a positive emotional response from the design and expect the same from the venue.
The classy font "Playfair Display" is used for the headers, and the modern "Lato" is used for almost everything else. I chose to use "Abril Fatface" for any digits on the site, as this matches the header font well but doesn't drop below the baseline like Playfair does. This makes it easier to read and keeps the space around the pricing even.
All of the photos were selected as complimentary to the design, as well as showing workspaces that fit the brand keywords. The colours within the photos reflect the branding, using dark greens (plants), oranges/pinks (furniture, wood) and whites.
Simple and modern line illustrations are used for the main features of the coworking space, as a creative alternative to using further photos on the home page. The same simple line style is used for the logo and icons.
The website uses a well-known and well-experienced web design pattern, to provide a comforting and predictable experience to users. With the logo in the top left, navigation in the top right. Each page has a large "hero " section displaying the page title and each section is highlighted with a shift in background colour.
The header and footer on each of the longer pages matches, allowing users to quickly find their way around. There's also a call-to-action above the footer to encourage users to get in touch or make a booking.
The one page the does not entirely match is the contact page. As the user would already be contacting the venue or making a booking at this point, the call to action isn't required. As the page is quite short, the contact details are moved up from the footer into a more visible location and the footer links are removed.
Home page
Pricing page
Gallery page
Contact page
The page consists of 4 pages and 13 features.
The logo and navigation are predictably at the top of every page. They're fully responsive, with the navigation menu switching to a "hamburger" on smaller screens. All pages are included, and the currently active page is highlighted.
The hero section welcomes visitors to the page with a headline, a description of what the company does and two call-to-action links for the primary business goals. The company is validated with social proof in the forms of a testimonial with user image, and a Trustpilot score.
The supporting images are inline with the overall brand. The main photo is looking back towards the headline to encourage visitors to return their focus to the left.
- User stories covered: 6, 9, 11, 15, 16.
The services section highlights the two main types of workspaces (private or open) as well as two benefits (common areas and 24/7 access). Each has a line illustration and a short description.
- User stories covered: 1, 3, 4.
Two longer testimonials with supporting images, names and titles that act as additional social proof to reassure new visitors that the company offers an excellent service and experience. This ties into the primary business goal.
The images slightly overlap with the backgrounds of the previous and following sections, as a subtle nudge to encourage scrolling.
- User stories covered: 16.
The FAQ section uses non-obtrusive <details> HTML tags to keep the lengthy answers hidden away unless required. Users can open up whichever question they'd like to know the answer for.
- User stories covered: 1, 2, 3, 4, 5.
The main call to action section is at the bottom of 3 of the pages. The home page and gallery page encourage visitors to make a booking, while the pricing page encourages visitors to get in touch. All link to the contact page. This is another opportunity to fulfill the primary business goal.
- User stories covered: 9, 15.
The footer provides a secondary menu that mirrors the navigation at the top of the page, to allow visitors to quickly find the other pages. It also provides the business address, phone number, email address and social media links. Lastly, there's a copyright statement at the bottom.
- User stories covered: 7, 10, 11, 12, 13, 14, 17.
The pricing page provides more detailed information on the different workspaces available and how much they cost. Each come with their own perks which are listed on each of the workspace cards. Every card has a call-to-action to encourage booking.
At the bottom of this page, the main call-to-action has been tweaked to say "Not sure?" with a link to the saying "Contact us" instead of "Book a session". This is in the hope that if none of the price points suit the needs of the visitor, that they will contact the business instead.
- User stories covered: 1, 3, 4, 5, 6, 8, 9, 10, 15, 16, 17.
The gallery page uses a masonry grid style to display photos of the venue. All images are selected in keeping with the overall brand. They are also styled to match the other images on the site, with curved corners and a subtle shadow.
- User stories covered: 1, 3, 4, 16.
The contact page contains a contact form on the left, and a Google map with contact details below on the right. The form has been styled in keeping with the brand, with lots of space to make it easy to use. It asks for a date and start/finish times for bookings, as well as using radio buttons for contact preference.
The map highlights the location of the venue within the town center. The contact details are the same as what is shown in the footer on the other pages, except brought higher up the page for better visibility. To avoid repeating content, the footer has been removed for this page (though the copyright remains).
- User stories covered: 7, 9, 10, 11, 12, 13, 14, 15, 17.
After submitting the form, visitors are redirected to a form submission page. This page says thank you, with a short explanation of the expected time for a response. There's also a button to return to the home page.
- User stories covered: 19.
If a visitor happens upon a page that doesn't exist on the site, they will be redirected to a 404 page. This explains what it's there for, as well as a button to return back to the home page.
- User stories covered: 19.
The site has been built using the mobile first methodology. This means that the base CSS code is for mobile screens, and the media queries build upon that for the larger screen sizes.
This provides visitors with a consistent experience of the site, no matter the screensize or device. Allowing them to view information no matter where they are.
- User stories covered: 8.
| Home page | Contact page |
|---|---|
 |
 |
- HTML5
- CSS3
- JavaScript (a tiny bit for the responsive navigation)
Research, planning and wireframes
- VSCode (markdown)
- Dribbble, Huemint and SaaSpages for inspiration
- Invisionapp for moodboard
- Figma for wireframes and notes
Branding and design
- Figma
- Google Fonts and Phosphoricons
- Unsplash
- Figma Community's Indian Doodle Illustration Pack
Development
- Git and GitHub
- VSCode
- Figma's Favvy Favicon Exporter plugin
- Figma's TinyImage Compressor plugin
- TinyPNG for extra image compression
- Google maps
Docs
- VSCode (markdown)
- Am I Responsive for the mockup
- CloudApp for screenshots
The W3C Markup Validation Service was used to validate the HTML of the website. All pages pass with 0 errors and 0 warnings.
Home page
Pricing page
Gallery page
Contact page
Form submission page
404 page
The W3C Jigsaw CSS Validation Service was used to validate the CSS of the website. The CSS passes with 0 errors. There are some warnings due to using CSS variables (custom properties), which the validator does not support yet. See the CSS Validator's GitHub for more information.
style.css
The WAVE WebAIM web accessibility evaluation tool was used to ensure the website met high accessibility standards. All pages pass with 0 errors.
Home page
Pricing page
Gallery page
Contact page
Form submission page
404 page
Google Lighthouse was used to test the performance of the website.
Home page
Pricing page
Gallery page
Contact page
Form submission page
404 page
The website was tested on the following devices:
- Apple MacBook Pro, Apple MacBook Air
- iPhone X, iPhone 8, iPhone SE
- Huawei P30 Pro
The website was tested on the following browsers:
- Microsoft Edge
- Google Chrome
- Firefox
- Safari: An odd issue with the first FAQ item where the white background has chunks missing. Also, the map takes up more space on the contact page.
- As an entrepreneur, I want to know if there are open workspaces, so that I can work alongside others for networking or collaboration opportunities.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Services section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| FAQ section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the workspaces | Works as expected |
| Gallery page | Navigate to the Gallery page, scroll down | To find photos of the workspaces | Works as expected |
Screenshots
- As an entrepreneur, I want to know if I can have people visit my workspace, so I can continue my in-person meetings.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| FAQ section on the home page | Scroll down the home page | To find information on visitors to workspaces | Works as expected |
Screenshots
- As a remote worker, I want to know if there are personal workspaces with good desks and chairs available, as I'm fed up of working from my sofa at home.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Services section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| FAQ section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the workspaces | Works as expected |
| Gallery page | Navigate to the Gallery page, scroll down | To find photos of the workspaces | Works as expected |
Screenshots
- As a remote worker, I want to know what rooms are available for workshops, so that I can bring my team together for training once a month.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Services section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| FAQ section on the home page | Scroll down the home page | To find information on the workspaces | Works as expected |
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the workspaces | Works as expected |
| Gallery page | Navigate to the Gallery page, scroll down | To find photos of the workspaces | Works as expected |
Screenshots
- As a side-hustler, I want to know when I can use the workspaces, so that I can work in the evenings and weekends on my business.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| FAQ section on the home page | Scroll down the home page | To find information on the office hours | Works as expected |
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the office hours | Works as expected |
Screenshots
- As a local business owner, I want to know the cost of the workspaces, so that I can determine whether it is within budget.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the pricing | Works as expected |
Screenshots
- As a non-local visitor, I want to know how close the venue is to the town center, so that I won't get lost in an area I don't know.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | To find information on the venue location | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | To find information on the venue location with a map | Works as expected |
Screenshots
- As a first time visitor, I want the site to be responsive, so that I can view information about the venue while on the go.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Any page on a small screen | Navigate to any part of the site | The site to work and look good no matter the screen size | Works as expected |
Screenshots
- As a first time visitor, I want to know how good the internet connection is, so that I can be sure that I can run video calls without a hitch.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Pricing page | Navigate to the Pricing page, scroll down | To find information on the the internet speed | Works as expected |
Screenshots
- As a first time visitor, I want to know how to reserve workspaces, so I can make a booking.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Hero section on the homepage | None - top of home page | Find next steps to book | Works as expected |
| Call to action on any page | Scroll down on home page or gallery page | Find next steps to book | Works as expected |
| Pricing page | Navigate to Pricing page, scroll down | Find next steps to book | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | Make a booking | Works as expected |
Screenshots
- As a first time visitor, I want to know where I can ask questions about the venue, so that I can get all the information I need before booking.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | Find contact information | Works as expected |
| Call to action on Pricing page | Navigate to Pricing page, scroll down | Find where to contact | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | Find contact information | Works as expected |
Screenshots
- As a returning visitor, I want to be able to submit feedback, so that the business owners can consider my thoughts for future website/venue updates.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Hero section on home page | Scroll down home page | Find review information | Works as expected |
| Footer on any page | Scroll down any page | Find contact information | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | Find contact information | Works as expected |
Screenshots
- As a returning visitor, I want a reminder of the address/see a map, so that I can plan my route.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | To find the venue address | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | To find the venue address with a map | Works as expected |
Screenshots
- As a returning visitor, I want a reminder of the phone number/email address, so that I can contact the venue directly with any questions.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | To find the phone number or email address | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | To find the phone number or email address | Works as expected |
Screenshots
- As a returning visitor, I want to know the venue's social media accounts, so that I can share my location/experiences with friends/colleagues on social media.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | To find the social media links | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | To find the the social media links | Works as expected |
Screenshots
- As the business owner, I want more bookings, so that my business can succeed.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Hero section on the homepage | None - top of home page | See booking CTA | Works as expected |
| Call to action on any page | Scroll down on home page or gallery page | See booking CTA | Works as expected |
| Pricing page | Navigate to Pricing page, scroll down | See booking CTA | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | See form for booking | Works as expected |
Screenshots
- As the business owner, I want to to show how amazing our service/venue is, so that I can feel proud and that everyone will talk about it.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Hero section on home page | None - top of home page | See social proof | Works as expected |
| Testimonial section on home page | Scroll down home page | See testimonials | Works as expected |
| Pricing page | Navigate to Pricing page, scroll down | See detailed information on services | Works as expected |
| Gallery page | Navigate to Gallery page, scroll down | See photography of venue | Works as expected |
Screenshots
- As the business owner, I want a way for visitors to be able to contact me directly through the website, so that I can help with special requests.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Footer on any page | Scroll down any page | See contact information | Works as expected |
| Call to action on Pricing page | Navigate to Pricing page, scroll down | See CTA | Works as expected |
| Contact page | Navigate to the Contact page, scroll down | See contact information | Works as expected |
Screenshots
- As the business owner, I want visitors to never have to use the browser's back button, so that they feel they have control over the site.
| Feature | Action | Expected Result | Actual Result |
|---|---|---|---|
| Thank you page | Navigate to the contact page, complete the form | To receive a success message | Works as expected |
| 404 page | Navigate to a non-existent page | To not get lost | Works as expected |
Screenshots
| Bug | Fix |
|---|---|
| Button hover states aren't working correctly | Move .button class from the <li> to the <a> element |
| Logo image sits above logo after adding mobile navigation | Move it to inside the logo's <li> element. |
| Logo breaks into two lines on smaller screens | Reduce the font size for smaller screens |
| FAQ items are not using the full width available | Remove width restriction from FAQ answer <p> elements |
| Pricing cards are not spaced correctly | Reduce padding on the cards and add a width of 32% |
| Map is not responsive | Remove width and height from the iframe and add extra CSS |
Safari shows triangles for <summary> tag, even though it's hidden in the CSS |
Set summary::-webkit-details-marker to display: none; |
| Mobile menu toggle causes accessibility checker to fail | Give the link an aria-label |
The website was deployed using GitHub Pages by following these steps:
- In the GitHub repository navigate to the Settings tab
- On the left hand menu select Pages
- For the source select Branch: master
- After the webpage refreshes automaticaly you will se a ribbon on the top saying: "Your site is published at..."
You can for fork the repository by following these steps:
- Go to the GitHub repository
- Click on Fork button in upper right hand corner
You can clone the repository by following these steps:
- Go to the GitHub repository
- Locate the Code button above the list of files and click it
- Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
- Open Git Bash
- Change the current working directory to the one where you want the cloned directory
- Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
- Press Enter to create your local clone.
Unsplash was used for all photos throughout the site. The license is copyright-free. In order of apearance:
- Woman sitting by a window (hero) - Brooke Cagle
- Smiling man (hero testimonial) - Ben Parker
- Female software engineer (first testimonial) - ThisisEngineering
- Person holding phone (second testimonial) - Austin Distel
- Woman using laptop (gallery) - Brooke Cagle
- Coworking office space (gallery) - Andrea Davis
- Home interior design (gallery) - Andrea Davis
- Coworking office space (gallery) - CoWomen
- People standing on grey tiles (gallery) - Ian Schneider
- Empty restaurant (gallery) - Mengyi
- Three people around a table (gallery) - Brooke Cagle
- Office desk space (gallery) - Andrea Davis
- WeWork Richmond (gallery) - Eloise Ambursley
For the illustrations:
For the icons:
- techbriefers.com - a blog post about a fixed width border. For the mini dividers throughout the site.
- webdesign.tutsplus.com - a blog post on how to build a mobile navigation. For the site's mobile navigation.
- morioh.com - a tutorial for a FAQ accordion. For the site's FAQ section on the home page.
- GitHub Gist - responsive Google Map embedding. For the site's contact page.
- GitHub Docs - for how to set up a 404 page in GitHub pages.
- MDN Web Docs - general syntax reference.
- CSS Tricks - flexbox reference.
- Namelix - startup name generator for testimonials
- Testimonial generator - for testimonials
I would like to take the opportunity to thank:
- My family, friends and colleagues for their advice, support and help with testing.
- My mentor Mo Shami for their feedback, advice and support.
- Code Institute Slack for peer reviews and advice.