View the live project here.

The image is from Am I responsive?

This is a full-fledge website for an interior designer based in Vancouver, Canada. The website features ‘about the designer’, 'ethos', 'call for action', ‘testimonials’, ‘the designer’s portfolio’, ‘consultation process’, ‘contact form’, 'designer's contact details' and ‘social media links’. The objective of this projects is to generate leads for the business through the contact page.

As interior design is a long and costly process, it will take time for new clients to make informed decisions about the designer they would like to hire. Therefore, the website aims to provide useful information, showcasing the designers’ portfolio, and sharing the previous clients’ testimonials to build trust with potential clients. A realistic project timeline is also communicated with users on the contact page to show various stages of the consultation process from the beginning to the completion of a project.

The business goals of this website are:

• Increase brand awareness.
• Reach wider clients by showcasing the designers’ portfolio.
• Generate leads (via the contact page).
• Simple and straightforward UX design close to the definer’s’ concept i.e. simplicity.
• Create realistic expectations of the design process and establish smooth designer-client relationship.

The customer visit this website to:

• Search for a reliable and skilful interior designer to enhance their living and/or working environments.
• Have enough compelling and convincing evidence that this designer is the right fit for their project.
• Find the contact information effortlessly by filling up a form to hire the designer.
• Understand how the design process works and what the time scale is.

Most designer websites increase the cognitive load on the user which might make the users feel intimidated or overwhelmed. My aim was to create a simple website where the information is accessible effortlessly. Deciding to renovate living or working spaces is a difficult task; it is time-consuming, complex and expensive. Therefore, people might delay it until they can find someone who they can rely on. I want the design and content of the website to make this decision making process easier for potential clients.

The ideal client for this business is:

• English speaking
• Values design
• Located in Vancouver, Canada
• Home or/and business owners
• Willing to spend money on a design or concept to modernize/enhance their domestic or commercial spaces.

The project help clients to:

• navigate easily through the website and reach the information they need easily.
• get to know the designer, previous clients, and her works and to contact her directly.

1. As a new visitor, I want to easily navigate the site to find whether the designer the right fit for my needs.
2. As a business/home owner, I would like to find whether the designer is trustworthy and reputable by seeing what the previous clients say about them.
3. As a new visitor, I would like to learn more about the designer’s vision, so I can get to know their background better. I would also like to know the reasons how this designer stands out of the crowd.
4. As a new visitor, I would like to know the designer’s process and approach to their clients and projects. I would like to work with approachable designers and have a clear picture of what I should expect.
5. As an interested client, I want to be able to contact the designer easily.
6. As a potential client, I would like to learn more about the designers’ works and get validation via their history and presence in the social media. It is more reassuring to trust businesses who have a solid follower base.
7. As a returning visitor to the website, I want to be able to find the contact page easily to reach the designer.

To achieve the strategic goals, I included the following features in the website:

• Header containing designer's logo and the menu bar including Home, Work, and Contact.
• Home page which says about the designer for brand awareness.
• Company ethos detailing the designers’ style.
• Call for action button on every page.
• Portfolio highlighting the projects the designer has completed.
• Testimonials including the name of clients and their experience.
• Consultation process from the initial phone conversation to project completion.
• Consultation Form to allow users contact the designer to request a collaboration.
• Footer containing the designer's address, phone number and links to her social media and email.

The website consists of three pages; Home (introduces the designer and her approach to design), Work (showcasing the designer’s completed and current projects), and Contact (including consultation stages and a consultation form).

• Home
• Work
• Contact

The logo and a collapsing menu bar are centred in the header incorporating black and white colours to represent a sleek and modern feel in keeping with the brand. This colour coordination is seen throughout the body of the website with dark typography to represent a minimalist yet bold styles. The designer has chosen green colour for specific features such as hover over the menu items, call to action buttons, and social media icons to represent the sustainability in her designs. The combination of natural and green colours convey a sense of creativity and confidence which reflects the designer’s personality. I also tried to use bold typography to further promote confidence and creativity as a reflection of the industry.

The website consists of three pages; Home, Work and Contact. The header contains a logo and menu option on the top middle of every page. This will create consistency throughout the page and the user can access the information via the menu bar and move around the site. The links will remain active when in use.

Every page has a footer with designer's address, designer's phone number, social media and email icons and copyright information. The social media icons are linked to the users’ social media accounts. There is also a Top button which with one click it takes the user to the menu bar.

The Home page features an image of the designer to personalise the website and raise brand awareness. To the left side of the image, there is some information about the designer to make the users feel connected to the brand. At the bottom of these, the designer’s’ visions and ethos are presented. This helps the users to be able to make an informed decision whether they share the same values as the designer with regards to design concepts. It will enhance user’s emotional response. Finally, there is an invitation to have a chat about the user’s project via a call to action button: Book your free consultation session now!. The Home page also uses parallax effects to separate each section and create positive user response. These features will turn into images which scroll up and down with the rest of the page for iPads and phones.

The Work page features images in thumbnails in 4 columns wide for laptop and desktop devices, 2 for iPads and 1 column wide for mobile devices. Each image can be clicked to open a fancybox window to view further images/details of each project. The testimonials are placed below the project works to build trust and credibility and accountability of the designer. At the bottom of the page, there is an invitation to have a chat about the user’s project via a call to action button: Book your free consultation session now!. The Work page also uses parallax effects to separate each section and create positive user response. These features will turn into images which scroll up and down with the rest of the page for iPads and phones.

The contact page features the consultation stages. Each stage is warped in a box with a large icon and some description to inform the users of collaboration process. Then, there will be a Consultation Form which the user can fill up to reach the designer laying over a promotional image. The bottom of the form contains a Book your free consultation now! button.

• Header Logo – Exists on every page aiming to promote brand awareness. Clicking on the logo will return the users to the Home page as they expect.
• Header Navigation Bar – Exists on every page to allow users to navigate the website and move from one page to another for access to more information.
• Home Page – Is a short introduction of the designer using visuals, a short biography of the designer and her ethos.
• Designer Photo – Exists on the Home page accompanied by a short biography of the designer.
• Work Page – It showcases the designers works and allows the visitors to view the thumbnail images of the designer’s works. Each image is clickable and can be viewed in a new page.
• Fancybox Viewer – Allows potential clients to view the designer’s works in more details. It opens in the photos in a bigger scale and users can move to the next of previous images and/or close them to return to the website.
• Footer – Exists on every page and contains copyright to protect the content of the website; the social media and icons which link the users to the designer’s social media platforms; and the business address, phone number and email. For a better user-experience I put the link to the menu at the bottom of the page so the users do not need to scroll all the way up to access the menu.
• Designer’s Ethos – Exist on the Home page to familiarise the visitors with the designer’s style and vision.
• Testimonials – Exist in the Home page in a form of Carousel slides to confirm the designer’s credibility and build trust amongst users.
• Call to Action Buttons – Exist on every page and invites potential clients to make the first contact with the designer.
• Consultation Stages – Exist on the Contact page aiming to familiarise the users with the designer’s method of working and the stages involved in a project work.
• Contact Page – Provides consultation stages and a consultation form. It allows the clients to send their request for a free consultation session.

Due to time restraints, I was unable to include the following features but hope to implement them in a future release:

• Embed up-to-date social media feeds - To showcase promotional activity and create buzz for the client base.
• Promotional video on the homepage – To make the homepage more appealing and engaging and create a more positive emotional response to the user. There was no promotional video available as this stage.
• Designer’s blog to share educational articles and guides for added value. The designer has not had time to create a blog yet.
• Live Chat app - To provide an instant connection between the user and company with high visibility on the site. I do not have the skills yet.
• Add CAPTCHA to contact form – Allows business to protect the contact form from spam. – JavaScript Needed.
• FAQ page, table with FAQs and dropdown buttons to view answers - Helps potential clients find answers to their common questions. (The designer has to compile and provide a list in the future.)
• Option to choose the language of the website - As the artist's second language is Farsi, this would allow Farsi speaking visitors to the website who form a big population in Vancouver, to view it in their native language. The content was not ready at this stage.
• Add a download button for a white paper for digital marketing purposes and building an email list in the future. The content was not ready at this stage.

This project uses HTML and CSS programming languages.

• Balsamiq I used Balsamiq, the rapid low-fidelity UI wireframing tool to sketch the structure of the website layout and its pages following best UX practices.
• Gitpod- The developer used Gitpod to write the code to builds the website.
• GitHub - The project used GitHub to host my code that was created and pushed from GitPod.
• Bootstarp5 - The project uses Bootstrap5 (BootstrapCDN and components) to simplify the structure of the website and make the website responsive across various platforms.
• FontAwesome - The projects uses a few icons from FontAwesome to make the websites less wordy and more visually appealing.
• Fancybox The project uses Fancybox for a gallery modal popup to slideshow gallery images.
• jQuery The project used jQuery to supply to JavaScript linked needed to the Fancybox gallery.
• Google Fonts The project uses Google fonts to style the website fonts.
• Tiny-PNG I used tinypng for big images up to 5M needed to be compressed to improve the website's loading time.
• CompressJPEG The big images bigger than 5M needed to be compressed to improve the website's loading time.
• Webaim.org The Webaim was used to test colour contrast on the project.
• W3C Markup Validation Service The W3C Markup Validation Service checked the markup validity of Web documents in HTML.
• W3C CSS Validation Service W3C CSS Validation Service was used to check the validity of my CSS in the project.
• WAVE Web Accessibility Evaluation ToolI used WAVE to make my site more accessible to individuals with disabilities by detecting any potential issues.

1. As a new visitor, I want to easily navigate the site to find whether the designer the right fit for my needs.

   • The user can navigate through the website using the navbar menu on top of the page.
   • The logo links the user back to the Home Page.

   

   • The 4 reasons on Home Page provide more information about the designer to the users.

   

   • The call to action button takes the users to the Contact Page where they can get more information on how to contact the designer.

   

2. As a business/home owner, I would like to find whether the designer is trustworthy and reputable by seeing what the previous clients say about them.

   • On the Work Page, below the gallery the users can see the previous clients’ testimonials.

   

3. As a new visitor, I would like to learn more about the designer’s vision, so I can get to know their background better. I would also like to know the reasons how this designer stands out of the crowd.

   • The 4 reasons on Home Page provide more information about the designer to the users.
   • The gallery on Work Page will show the designer’s range of skills.

   

4. As a new visitor, I would like to know the designer’s process and approach to their clients and projects. I would like to work with approachable designers and have a clear picture of what I should expect.

   • In Contact Page, users can review the consultations process and have a realistic idea of a Project Timeline.

   

5. As an interested client, I want to be able to contact the designer easily.

   • In Contact Page, users can fill up the Consultation Form.

   

   • Each page, has a call to action button which takes users to the Contact Page to view the relevant information.

6. As a potential client, I would like to learn more about the designers’ works and get validation via their history and presence in the social media. It is more reassuring to trust businesses who have a solid follower base.

   • The galley on Work Page showcases the designer’s range of skills and projects.
   • The footer provides links to the designer's social media platforms.

   

7. As a returning visitor to the website, I want to be able to find the contact page easily to reach the designer.

   • The phone number and address of the designer has been shared in the footer on every page.

I used W3C CSS validation and W3C Markup Validation to check the validity of the website code.

Several issues were identified on W3C Markup Validation.

After I rectified the issue, no further errors were picked.

No errors were identified in the CSS code by W3C CSS validation.

The initial color: ##81b214; had Contrast Ratio of 2.52:1 with the white background. So I changed it to a darker green. The Color Contrast Accessibility Validator was used to test for colour contrast on the project.

.

To ensure a broad range of users can successfully view/use the site, I tested it across all major browsers in both desktop and mobile configuration.

• Chrome
• Edge
• Firefox
• Safari
• Internet Explorer

The link on Internet Explorer does not recognise font-antonio. It displays the web using San-sarif.

I asked my friends and family to click on the deployed link on their devices especially iPads and 17" and bigger laptops which I do not personally own. I added further bootstrap padding and margin and CSS media queries to make the website responsive on all devices.

This project was developed using Gitpod, committed to git and pushed to GitHub using git commands.

To deploy this page to GitHub Pages from its GitHub repository, the following steps were taken:

1. Log into GitHub.
2. From the list of repositories on the screen, select saranamdarian.
3. From the menu items near the top of the page, select Settings.
4. Scroll down to the GitHub Pages section.
5. Under Source click the drop-down menu labelled None and select Master Branch. Then Save it.
6. Wait for a few minutes of the website to be deployed.
7. Scroll back down to the GitHub Pages section to access the link to the deployed website.

• Select the Repository from the GitHub Dashboard.
• Click the green button labelled 'Code'.
• Click 'Download ZIP'.
• Extract ZIP file on your computer.
• Open folder and open index.html in web browser.

• Select the Repository from the GitHub Dashboard.
• Click the green button labelled 'Code'.
• To clone the repository using:
  • HTTPS: under "Clone with HTTPS", click checklist icon.
  • SSH: click Use SSH, then click checklist icon.
• Open Git Bash.
• Change the current working directory to the location where you want the cloned directory.
• Type 'git clone', and then paste the URL you copied earlier.
• Press Enter to create your local clone.

The texts for all the pages have been created by the designer.

• The images were taken by and obtained from the designer – Sara Namdarian.
• Testimonial logos are from Google Images.

• CSS code for shadows and hover responsiveness of gallery images and ptoject timeline boxes was originally taken from Portrait Artist by A Greaves.

I decided to develop this website for my sister as she wanted to have a brand new website which has a more modern feel to it and it also reflected her own style and character. I took aspiration for this site from the following websites in terms of design:

• Karimrashid.com
• Avissa Design
• sokruta.com.ua/en
• I also received inspirations for the content of the website for personal branding via Interior Design Business: How To Build a Personal Brand.
• Huge thanks to my mentor Guido Cecilio Garcia Bernal guided me throughout this project.
• I would like to also thank Tim Nelson, a great tutor at Code Institute, who helped me with problem solving.