R E S P O N S I V E   R E D E S I G N :

ui/ux • designing for accessibility • front-end development


In my User Interfaces & User Experience class, we were tasked with redesigning a public website to improve a user’s interaction with the interface.

For my project, I chose the Providence Children’s Museum website.

The children’s museum in Providence has a special place in my heart; upon visiting it last year , I was struck by the sense of wonder and playfulness it represented, as well as its power to spread joy and creativity across the local community.

Especially during the COVID-19 era, maintaining an online presence is important--since they are now hosting virtual programming, website use and accessibility has become increasingly important and beneficial to bringing people together during this strange time.

P A R T   1  :  I D E N T I F Y I N G   U S A B I L I T Y   P R O B L E M S


Upon first visiting the page, I noticed that there were efforts to make the website more accessible.

After conducting analysis with webAIM Wave (an accessibility evaluation tool), some positive elements I noticed were that there were some images with alternative text, as well as ARIA (Accessible Rich Internet Applications ) included in the website design.

Most elements on the website are recognizable by a screen reader, and there was an accessibility widget that could aid in screen reading/change the font & other visual components of the website to make it more readable.

However, even though there was all this effort towards designing for accessibility, there were some major basic design flaws within the website that would affect accessibility, such as text size+color, as well as link redundancy.

Thus, seemed like the widget made accessibility more of a binary:

either a normally abled user would navigate the normal interface

or someone who was differently abled would have to rely on the widget to change their website experience because of the existing design flaws :(

I believe that accessibility shouldn’t have to be something a user has to opt into; it should be the status quo. Aesthetics shouldn’t need to be sacrificed to make a page more accessible, intuitive, and inclusive!

How can we design a visually pleasing, intuitive website interface with accessibility and inclusivity as a core value, and not a side option?

P A R T   2  :  V I S U A L   R E D E S I G N

L O - F I   W I R E F R A M E :   B A L S A M I Q

From the insights I found in Part 1, I first made a low-fidelity wireframe to envision how my redesign could address the issues with the original website.

H I - F I   P R O T O T Y P E :   F I G M A

Then, I went on to make a more accurate, annotated redesign in Figma to narrow down the specifics of the design.

V I S U A L   R E D E S I G N   S T Y L E   G U I D E

From these prototypes, I was able to condense the style of interface interaction and visual element design into a style guide.

P A R T   3  :  R E S P O N S I V E   R E D E S I G N

Lastly, using the prototypes as a template, I constructed a responsive website utilizing the new design.

✧ view below! ✧