VA Dundee

VA Dundee is a personal web design and development project based around a virtual assistant service for small businesses in Dundee. It was not created for a real client. I used the idea as a way to practise designing and building a realistic small-business website from the initial concept through to a working front-end demo.

I wanted the website to explain the service clearly, make it easy for someone to find the information they need and give them an obvious way to get in contact. I also wanted the design to work properly across desktop and mobile rather than treating the mobile version as an afterthought.

Main Goals

• •
  Keep the service easy to understand: Make the purpose of the business and the services offered clear without making the page feel overloaded.
• •
  Make contact straightforward: Give potential customers clear routes towards making an enquiry.
• •
  Build responsively: Make sure the design works across different screen sizes and remains usable on mobile.
• •
  Consider accessibility from the start: Use readable content, clear structure and accessible design guidance while developing the page.

Before designing the website, I looked at secondary research around small businesses in Dundee, digital presence, administrative pressure and the way people access services online. I wanted the project to have a realistic business context rather than designing a fictional service without looking at the wider market first.

How This Influenced the Website

• •
  Local focus: I kept the concept aimed at Dundee small businesses rather than trying to design a service for every type of customer.
• •
  Clear service information: The research around administrative pressure reinforced the need for the website to explain what help the virtual assistant could provide without unnecessary complexity.
• •
  Responsive design: The amount of personal online time spent on smartphones made mobile usability an important part of the design.
• •
  Accessibility: I used WCAG guidance as a reference while considering contrast, semantic structure and readable content. I would not describe the website as fully WCAG compliant without a proper accessibility audit and testing.

I started by designing the page structure and visual direction in Figma before moving into the front-end build. Keeping the project to a single-page website helped me focus on the order of the information and how someone would move from learning about the service to making contact.

What I Focused On

• •
  Information hierarchy: I arranged the content so the main service, supporting information and contact options could be understood without requiring a large amount of navigation.
• •
  Responsive front-end: I built the demo using HTML, CSS and JavaScript and adjusted the layout for desktop and smaller screens.
• •
  Basic search structure: I included descriptive page metadata and semantic HTML to give the website a clearer structure for users and search engines. This supports SEO, but does not guarantee search rankings.
• •
  Accessibility considerations: I considered readable text, contrast, headings and semantic structure while building the page. A full accessibility audit would still be needed before making a formal compliance claim.

Changing the Colour Palette

One of the first things I had to change during development was the colour palette. The original colours looked good while I was designing the website in Figma, but they did not translate as well once I started building the actual website.

Rather than forcing the original palette to work, I went back and changed the colours while developing the site. This was a useful reminder that something can look right inside a design tool but feel quite different once it is being viewed and used in the browser.

Designs Changing During Development

Some parts of the design also changed once I started developing them. A few ideas that worked in the Figma prototype either did not work as well in the browser or did not feel right once the page was responsive. Instead of trying to copy the prototype exactly, I changed those parts as I built the site.

Because I was responsible for both the design and development, I could make those changes as I went rather than treating the Figma file as something that could not be changed.

Finding the Right Amount of Content

The biggest difficulty was actually the content. Because VA Dundee is not a real business, I did not have genuine services, customer information or business content to work from.

I found it difficult to get the balance right. Too little content made the website feel unfinished, but adding too much just to fill space made it feel overloaded and unrealistic. I ended up reducing and changing some of the content so the website had enough information to demonstrate the idea without pretending the fictional business was more developed than it actually was.

The finished project is a working single-page website demo based on the original Figma prototype. It gave me a chance to take a small business concept through research, interface design and front-end development rather than stopping at a static design.