Contact Me

Contact Me

VKT Website

VKT Website

Website Development with Universal Design Focus

This bachelor project focused on designing and developing a new website for Viken Kollektivterminaler, with universal design as the main focus.

The project started with UI design and prototyping in Figma before being implemented in WordPress to make the website easier for the organization to maintain after handover. The work included information architecture, responsive page design, terminal pages, navigation, search, contact functionality, accessibility testing and WCAG-based evaluation.

INDUSTRY

Public Transport / Web Design

Public Transport / Web Design

CLIENT

Viken Kollektivterminaler

Viken Kollektivterminaler

SERVICE

UI Design, Figma Prototyping, WordPress Development, Universal Design, Accessibility Testing

UI Design, Figma Prototyping, WordPress Development, Universal Design, Accessibility Testing

UI Design, Figma Prototyping, WordPress Development, Universal Design, Accessibility Testing

DATE

May 2023

May 2023

WEBSITE

GO TO WEBSITE >

GO TO WEBSITE >

⭐️

Connect to Content

Add layers or components to make infinite auto-playing slideshows.

The Problem

The Problem

Viken Kollektivterminaler needed a modern website that could present information about the organization, its responsibilities and its public transport terminals in a clearer and more accessible way.


The website had to serve several different user groups, including travellers, politicians, transport operators, partners, tenants, job seekers and contractors. This meant the solution needed a clear structure, easy navigation and content that was understandable for different types of visitors.


The project also had a strong universal design requirement. The website needed to follow current accessibility standards and be easy for the organization to maintain after handover.

The Goal

The Goal

The goal was to design and develop a new main website for Viken Kollektivterminaler with universal design as a central focus.

The website needed to be modern, responsive and user-friendly, while also making important information easier to find. It also had to support key functions such as terminal information, navigation, search, news, contact forms and travel planning.


Another important goal was to build the website in WordPress, so the organization could update and manage the content without needing advanced technical knowledge.

My Role

My Role

This was a group bachelor project where I contributed to the design and development of the VKT website. The work included UI design, Figma prototyping, WordPress implementation, information structure, accessibility work, user testing and design revision.


The project gave me experience with designing and building a larger multi-page website for a real client, with a strong focus on universal design, usability, responsive layouts and maintainable content management.

Scope of Work

Research

Research

Information Architecture

Information Architecture

UI Design

UI Design

Figma Prototyping

Figma Prototyping

WordPress Development

WordPress Development

Responsive Design

Responsive Design

Accessibility Evaluation

Accessibility Evaluation

User Testing

User Testing

Site Structure

The website was designed as a larger information structure, not just a single landing page. The final solution organized travel information, organizational content, responsibility areas and customer support into clear navigation paths across Norwegian and English pages.

The goal was to make a complex public transport organization easier to understand, while helping different users find relevant information quickly.

The website was designed as a larger information structure, not just a single landing page. The final solution organized travel information, organizational content, responsibility areas and customer support into clear navigation paths across Norwegian and English pages.

The goal was to make a complex public transport organization easier to understand, while helping different users find relevant information quickly.

For Travellers

Travel-focused pages for bus terminals, ferry terminals, routes, tickets, lost property, storage and assistance services.

About VKT

Organizational pages about Viken Kollektivterminaler, responsibility areas, news, sustainability, leadership, reports, press information and available positions.

Terminals & Responsibility Areas

Pages covering bus terminals, ferry terminals, hubs, parking, micromobility, driver facilities and other responsibility areas.

Customer Service

Support pages with contact information and a help center for users who need assistance or want to reach the organization.

Key Pages

The website included several page types designed for different user needs, from travel information to organizational content and customer support.

Instead of showing every page, this section highlights selected screens that represent the main structure and functionality of the website.

Homepage

The homepage introduced the website with clear navigation, direct call-to-action buttons and a travel planning section. The goal was to help users quickly move toward the most relevant travel information.

Terminal Overview

The terminal overview gave users a structured way to browse bus and ferry terminals. Search, categories and visual cards helped users find the right terminal more efficiently.

Terminal Page

Each terminal page presented location-specific information, images and map content. This made it easier for travellers to understand what services and facilities were available at a specific terminal.

Help Center

The help center organized common questions into expandable sections. This helped users find answers without needing to contact the organization directly.

Contact Page

The contact page combined location information, important links and a contact form, giving users a clear way to reach Viken Kollektivterminaler.

Accessibility

Universal design was a central focus throughout the project. The website was designed and evaluated against accessibility principles, WCAG requirements and practical usability needs.

Universal design was a central focus throughout the project. The website was designed and evaluated against accessibility principles, WCAG requirements and practical usability needs.

DESIGN FOR INCLUSION

The website includes a dedicated “Utforming” (Design) menu where users can adjust the appearance to their needs. This supports users with visual impairments, reading difficulties and different preferences.

The website includes a dedicated “Utforming” (Design) menu where users can adjust the appearance to their needs. This supports users with visual impairments, reading difficulties and different preferences.

WCAG-based evaluation

Checked the website against relevant accessibility requirements.

Contrast and readability

Tested color contrast, text sizing and spacing to support readable content.

Keyboard navigation

Considered keyboard access and focus order for users who do not rely on a mouse.

Alternative text and structure

Used text alternatives, headings and meaningful content order to support assistive technology.

Responsive design

Designed the website to work across desktop, tablet and mobile layouts.

Design Improvements

User testing revealed that some users needed clearer guidance and navigation. Based on these findings, the prototype was revised to make the experience easier to understand, easier to navigate and more supportive for older adults.

User testing revealed that some users needed clearer guidance and navigation. Based on these findings, the prototype was revised to make the experience easier to understand, easier to navigate and more supportive for older adults.

Guidance Tutorial

Before

Before

Several users were unsure what to do when they first reached the main chat screen.

After

After

A five-step tutorial was added to explain the chat screen, input field, menu and navigation options.

Clearer Menu Buttons

Before

Before

Some users did not realize that the menu tabs were clickable.

After

After

The menu was redesigned so the tabs looked more like clear interactive buttons.

Back to Chat

Before

Before

Some users had trouble returning to the main chat after entering menus.

After

After

A direct “Back to chat” option was added to make navigation easier.

Combined Settings

Before

Before

Settings and accessibility were separated, which made some options harder to find.

After

After

Settings and accessibility were combined into one clearer section.

Final Outcome

The final result was a functional high-fidelity prototype of NutriBot, an accessible chatbot concept for older adults seeking nutrition guidance.


The prototype included onboarding, personalized chatbot responses, preference editing, settings, accessibility options and a main chat interface. It was tested with users in the target group and improved based on the findings.

The final result was a functional high-fidelity prototype of NutriBot, an accessible chatbot concept for older adults seeking nutrition guidance.


The prototype included onboarding, personalized chatbot responses, preference editing, settings, accessibility options and a main chat interface. It was tested with users in the target group and improved based on the findings.

The final result was a functional high-fidelity prototype of NutriBot, an accessible chatbot concept for older adults seeking nutrition guidance.


The prototype included onboarding, personalized chatbot responses, preference editing, settings, accessibility options and a main chat interface. It was tested with users in the target group and improved based on the findings.

⭐️

Connect to Content

Add layers or components to make infinite auto-playing slideshows.

Reflection

This section reflects on what I learned through the project, the current limitations of the prototype, and opportunities for future improvements.

What I Learned

What I Learned

This project strengthened my understanding of how UI/UX design, accessibility and technical implementation work together in a real interactive system.

I learned that even when an interface looks simple, users may still need clearer guidance, especially if they are unfamiliar with the type of technology. The testing showed the importance of onboarding, visible navigation, readable content and clear feedback.

The project also showed how valuable user testing is. Several important improvements, such as the tutorial, clearer menu buttons and “Back to chat” option, came directly from observing how users interacted with the prototype.

This project strengthened my understanding of how UI/UX design, accessibility and technical implementation work together in a real interactive system.

I learned that even when an interface looks simple, users may still need clearer guidance, especially if they are unfamiliar with the type of technology. The testing showed the importance of onboarding, visible navigation, readable content and clear feedback.

The project also showed how valuable user testing is. Several important improvements, such as the tutorial, clearer menu buttons and “Back to chat” option, came directly from observing how users interacted with the prototype.

This project strengthened my understanding of how UI/UX design, accessibility and technical implementation work together in a real interactive system.

I learned that even when an interface looks simple, users may still need clearer guidance, especially if they are unfamiliar with the type of technology. The testing showed the importance of onboarding, visible navigation, readable content and clear feedback.

The project also showed how valuable user testing is. Several important improvements, such as the tutorial, clearer menu buttons and “Back to chat” option, came directly from observing how users interacted with the prototype.

Limitations & Future Work

Limitations & Future Work

The prototype had some limitations. Some accessibility features were only partially implemented, the interface was not fully responsive for mobile and tablet, and chatbot responses sometimes displayed formatting symbols that affected readability.

Future work could include a more complete accessibility evaluation, improved response formatting, responsive design for tablets and mobile devices, printable meal plans and longer-term testing to understand how older adults would use the chatbot over time.

The prototype had some limitations. Some accessibility features were only partially implemented, the interface was not fully responsive for mobile and tablet, and chatbot responses sometimes displayed formatting symbols that affected readability.

Future work could include a more complete accessibility evaluation, improved response formatting, responsive design for tablets and mobile devices, printable meal plans and longer-term testing to understand how older adults would use the chatbot over time.

The prototype had some limitations. Some accessibility features were only partially implemented, the interface was not fully responsive for mobile and tablet, and chatbot responses sometimes displayed formatting symbols that affected readability.

Future work could include a more complete accessibility evaluation, improved response formatting, responsive design for tablets and mobile devices, printable meal plans and longer-term testing to understand how older adults would use the chatbot over time.