The Happy Space Co.

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.

Live webpage

Table of contents

1. Project goals
2. User experience
   1. Target audience
   2. User requirements and expectations
   3. User stories
3. Design
   1. Colours
   2. Fonts
   3. Imagery
   4. Structure
   5. Wireframes
4. Features
5. Technologies used
   1. Languages
   2. Frameworks and tools
6. Validation
   1. HTML validation
   2. CSS validation
   3. Accessibility
   4. Performance
   5. Device testing
   6. Browser compatibility
   7. Testing user stories
7. Bugs
8. Deployment
9. Credits
10. Acknowledgements

Project goals

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.

User experience

Target audience

• 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.

User requirements and expectations

• 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.

User stories

First-time visitors

1. As an entrepreneur, I want to know if there are open workspaces, so that I can work alongside others for networking or collaboration opportunities.
2. As an entrepreneur, I want to know if I can have people visit my workspace, so I can continue my in-person meetings.
3. 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.
4. 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.
5. 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.
6. As a local business owner, I want to know the cost of the workspaces, so that I can determine whether it is within budget.
7. 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.
8. 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.
9. 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.
10. As a first time visitor, I want to know how to reserve workspaces, so I can make a booking.
11. 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.

Returning visitors

12. 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.
13. As a returning visitor, I want a reminder of the address/see a map, so that I can plan my route.
14. 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.
15. 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.

Business owner

16. As the business owner, I want more bookings, so that my business can succeed.
17. 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.
18. 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.
19. 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.

Design

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

Colours

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.

Fonts

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.

Imagery

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.

Structure

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.

Wireframes

Home page

Pricing page

Gallery page

Contact page

Features

The page consists of 4 pages and 13 features.

1. Logo and Navigation

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.

2. Hero section

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.

3. Services section

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.

4. Testimonial section

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.

5. FAQ section

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.

6. Call to action

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.

7. Footer

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.

8. Pricing page

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.

9. Gallery page

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.

10. Contact page

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.

11. Thank you page

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.

12. 404 page

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.

13. Fully responsive site

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

Technologies used

Languages

• HTML5
• CSS3
• JavaScript (a tiny bit for the responsive navigation)

Frameworks and tools

Validation

HTML validation

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

CSS validation

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

Accessibility

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

Performance

Google Lighthouse was used to test the performance of the website.

Home page

Pricing page

Gallery page

Contact page

Form submission page

404 page

Performing tests on various devices

The website was tested on the following devices:

• Apple MacBook Pro, Apple MacBook Air
• iPhone X, iPhone 8, iPhone SE
• Huawei P30 Pro

Browser compatability

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.

Testing user stories

1. As an entrepreneur, I want to know if there are open workspaces, so that I can work alongside others for networking or collaboration opportunities.

Screenshots

2. As an entrepreneur, I want to know if I can have people visit my workspace, so I can continue my in-person meetings.

Screenshots

3. 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.

Screenshots

4. 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.

Screenshots

5. 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.

Screenshots

6. As a local business owner, I want to know the cost of the workspaces, so that I can determine whether it is within budget.

Screenshots

7. 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.

Screenshots

8. 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.

Screenshots

9. 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.

Screenshots

10. As a first time visitor, I want to know how to reserve workspaces, so I can make a booking.

Screenshots

11. 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.

Screenshots

12. 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.

Screenshots

13. As a returning visitor, I want a reminder of the address/see a map, so that I can plan my route.

Screenshots

14. 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.

Screenshots

15. 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.

Screenshots

16. As the business owner, I want more bookings, so that my business can succeed.

Screenshots

17. 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.

Screenshots

18. 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.

Screenshots

19. 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.

Screenshots

Bugs

Deployment

The website was deployed using GitHub Pages by following these steps:

1. In the GitHub repository navigate to the Settings tab
2. On the left hand menu select Pages
3. For the source select Branch: master
4. 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:

1. Go to the GitHub repository
2. Click on Fork button in upper right hand corner

You can clone the repository by following these steps:

1. Go to the GitHub repository
2. Locate the Code button above the list of files and click it
3. Select if you prefere to clone using HTTPS, SSH, or Github CLI and click the copy button to copy the URL to your clipboard
4. Open Git Bash
5. Change the current working directory to the one where you want the cloned directory
6. Type git clone and paste the URL from the clipboard ($ git clone https://github.com/YOUR-USERNAME/YOUR-REPOSITORY)
7. Press Enter to create your local clone.

Credits

Media

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:

• Figma Community - Indian Doodle Pack

For the icons:

• Phosphoricons

Code

• 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.

Reference material

• MDN Web Docs - general syntax reference.
• CSS Tricks - flexbox reference.

Other

• Namelix - startup name generator for testimonials
• Testimonial generator - for testimonials

Acknowledgements

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.