top of page

Redesign of website for accessability

A university group project to rework the design and usability to improve accessibility within certain parameters given by the projects parameters. Done as a school project at Mälardalen University.

image.png

MIssIOn defInItIOn:

Our task was to pick a swedish government organs website and redesign it with accessibility. We were asked to focus on key-terms/phrases during the process. We decided to redesign the website www.polar.se[LINK], the website of the swedish polar research secretariat which hosts information about swedens current expeditions, opportunities and research regarding the arctic and antarctica. Our key words were:

​

  • CoRD (Convention on the Rights of Persons with Disabilities)

  • Perceptible information

  • Simple and intuitive use

  • Designing for inclusivity

  • Color blindness

  • Pop Ups


Target group: Disabled people, adults, academics, students (university level).

image.png

Research & analysis - What Is the prOblem?:

We identified many issues during a analysis of the current (early 2023) website. We summarized the issues as such:
 

  • Mixing languages (swedish and english)

  • No or insufficient image descriptions

  • Links were not obvious/consistant in their look

  • Images and videos took up too much space

  • Not enough margin between buttons

  • Text size too small

  • Not a lot of language options available (only swedish, english and nationally recognized languages)

  • Screen reader doesn’t pick up the text in the slideshow

  • Color contrast not sufficient

  • Text-to-speech function completely missing

  • The pop-up for cookies is too small

image.png
image.png

User persOna & scenarIO:

Here is the persona and scenario we produced to get a better vision of who we are designing for. This person is studying robotics engineering and has blurry vision, so while he can read big texts on screen but prefers to use screen readers and other technical assistance tools. He is also interested in researching antarctica. In our scenario he is studying his last year and is looking at jobs on LinkedIn and he found a position at the swedish polar research secretariat. When he gets home he decides to go to their website to find the position on there. We follow his navigation from the landing page to the careers page on the secretariats website in our prototype and test.

image.png

PrOtOtypes, testing & sOlutiOn:

We started out with creating a mood board for the project. This was mostly to figure out what elements we wanted to include in our design, and what colors might bring a accurate representation of the content of the website while also matching nicely with the current logo for the secretariat.

Conclusions we drew from this mood board was that using a bright yellow or green as a highlight color would be very functional, as well as a deep blue or navy color would also work for contrast purposes next to a white or off-white.

​

Afterwards we created rough sketches of our ideas. Experimenting with rough placements of titles, images, graphics, menus and options. We also did a few iterations of wireframes.

image (2).png
image.png
image.png
image.png

We did 2 types of tests on 2 people, one type each. The tests were recorded as the participants did the tests. For privacy reasons the videos will not be shared in this public portfolio.
In the first one we simulated visual disability (in this case, we covered the participants eyes with a blindfold to force them to rely on their other senses to guide through the website and it’s features) and utilizing a screenreader to navigate around the website. The tests revealed several useful things based on comments:
 

  • Sometimes the descriptions weren’t helpful

  • Can be more effective if the “back” button is read up last in order.


The second test we used a digital simulation of poor vision, where the screen is blacked out completely except for a small circular area around the cursor. This is a more common form of vision disability that is not commonly overlooked. We learned that it was easy and smooth to navigate through to planned location on the website.

Results & cOnclusIOns:

Here are a few selected screenshots from our finished solution to the inaccessibility of the website!
Each image is a step-by-step for our persona looking to apply for work for the secretariat, starting with the landing page. Let’s navigate to the job application page:

image.png
image.png
image.png
image.png

SO why Is the new versIOn mOre accessIble?

  • The system shows available options of action.

  • It responds to user interaction.

  • The response and overall design is consistent over the whole website.

  • It is flexible in that information is accessible in multiple ways.

  • Removed redundancy and repetitive information.

  • The new version improved perceptibility with increased margins and hierarchy.

  • The design is inclusive with screen reading, has large text and good margins.

  • It is easy and intuitive to use with good informational hierarchy.

bottom of page