Design for Others: Lewisburg Children’s Museum
By Brian Gourd, Ethan Dunne, Justin Kahr & Corey Scamman
Our design project aimed to recreate the mobile interface of the Lewisburg Children’s Hospital Museum’s hospital with users with disabilities in mind. When tasked with this project, our team decided on two main goals we wanted to implement. First, we wanted to create an interface that was easier for users with disabilities to interact with, and we also wanted to make information relevant to users with easier to get to and understand. In a brief overview of our design, we added information for visitors with disabilities to the main “Visit” page so that accessibility options and guidelines were clear and easy to find, and we simplified many of the pages and navigation tools to make it easier for people with disabilities to navigate the website. This came down to creating a simpler “Menu” page with fewer, larger buttons, and condensed pages with lots of information to make everything easier for the user.
Needsfinding
The first step in the process of designing our web interface was understanding the needs that users with disabilities had when it came to interfacing with a website. This came down to researching online the guidelines and resources that were out there for adding accessibility features to a website.
Based on the research we conducted, the main needs that we aimed to implement in our design are listed above. It is broken down into different forms of disabilities and the accessibility features that can help each one. For blind users, descriptive alt tags should be used on images so that screen readers can describe to the user the contents of the image. Additionally, simplifying the design makes it easier for users with a screen reader to navigate. For deaf users, adding closed captioning to videos was is the normal thing to do (though our website features no videos). One group that we focused in on was people with physical disabilities, like missing limbs and fingers. For these users, we wanted to increase the size of menu buttons and simplify the interface so that it was easier for them to navigate the site. Additionally, we wanted to make sure that we implemented a color scheme into our design that was soothing and high contrast for users that may be color blind or have a mental handicap. Some of the other ideas that are in that list couldn’t really be implemented in Adobe XD, but would be useful in a final product.
Sketching
The next step in our design process was sketching out potential solutions to our problem. This is was a quick way for us to hash out new ideas and see what worked and what didn’t.
In our sketching phase, we began to come up with ideas for solutions to the problems that our user group faced. Some of these ideas included creating the larger buttons on the menu page so that they were easier to press, and simplifying the text on many of the web pages. We also thought of the idea to implement search boxes for events and FAQs, so that this information could be better accessed. What we decided on implementing on our design and not implementing mainly came down to the limitations of Adobe XD. For example, we wanted to have alt text for users with screen readers, and while this would be implemented in the final product, it cannot be done in Adobe XD as far as we know. However, what we mainly came down to all agreeing on was creating a design that was simple so that it could be navigated by almost anyone.
Prototyping
The final step of our process was to create the prototype in Adobe XD. We took the ideas that we agreed were best for us to implement, and started adding them to our design. This was our first time using Adobe XD, so we were figuring out the possibilities of its features as we went along, and this learning process guided what our final product became.
We decided on which pages were most important to redesign based on our users, and started creating our final design. When we look back at our final prototype, one of its main strengths is the menu page. Its large buttons and simple design mane it much easier to navigate than the original and really caters to our user group. One weakness of our final design is that the safety page and visit page still contain a lot of text which isn’t as simple as we were going for. This is definitely something that we would improve upon if we had more time designing our prototype.
Overall, our design goals were to create an interface that was easier for disabled users to interface with and provide information that would be useful to these users. Our final design achieved this goal by simplifying the overall design of the web interface and making a website that is easier to navigate. We took into mind the accessibility features that we learned about in class, such as contrast for color blind users and alt text for blind users, and while some of these features couldn’t be implemented in Adobe XD, the idea is that they would make their way into the final product.
