Design for Others — Redesigning the Lewisburg Website for Elderly Adults
by Rafe Batchelor, Devyn Myers, Mike Kozelsky, Bill Chen
The principles of quality interface design are heightened when designing for particular groups that might face some kind of difficulty when interacting with “typical” UI’s. In this particular instance, our team has been tasked with redesigning the city of Lewisburg’s mobile website specifically with elderly adults in mind. This presents the challenge of creating a user experience that is both overwhelmingly intuitive to navigate and clearly readable; the website must deliver the desired information without requiring the user to click through multiple pages or scroll through many screens. Reaching and ingesting such information must be effortless.
No better of a time do the words of Michael Scott, “Keep It Simple Stupid,” apply.
We began our design process by generating an idea of what factors might hinder an elderly adult’s mobile experience — factors such as visual/hearing impairments, discomfort with navigating through complex webs of information, and a general aversion to relying on a mobile website for information (perhaps based on previous experiences). Following this initial phase of brainstorming the potential user needs, we then began to investigate UIs that are largely populated by our target demographic. This included scanning over mobile sites for banking, insurance, and even a few casinos [1,2,3]. Applying our knowledge of UI design principles to the task of creating a highly accessible site, we have created a site that we feel captures the principles of hyper-usability. The output of our efforts are shown in the gif below.
Early Prototyping and Sketches
One might expect the incipient stages of any design process to be riddled with available avenues to travel in the journey to an eventual, deployed model. Early into our sketching and design process, we became fixated more so on the constraints an elderly individual might face, rather than the actual solution of such constraints, leading us to create a user experience that was largely clunky and almost more challenging to use than one might expect. We had done too much in some regards and too little in many more to create a comforting user experience. The importance of user and professional feedback cannot be overstated, especially early into the design process; not just iteration, but thoughtful iteration is key to perceptible improvements [4].
Our initial prototype was founded upon the idea of a scrollable home page encompassing all information the site possessed, providing a description of each page. However, this presented a overwhelming user experience lacking in nuance and detail.
Time for Business
After a review of this initial design, we then shifted our focus towards how we can build upon primary design principles in a fashion that is more accessible to our target audience, rather than attempting to rebuild the wheel with only their limitations in mind. The following iteration of our design was founded upon the idea that our home screen must be a refreshing blast of simplicity for the user.
Home Page
To set the stage for the following iteration, we began with a redesign of the home page — the most critical element in a navigable experience. Elements on the home page must be succinct, easily recognizable, and uniform — if something looks like a button, it should be a button. To summarize the key principles included in the homepage, notice: clear separation of boxes containing text with sharp, contrasting borders around unique elements [5]. This includes different colors for different regions, as well as differing descriptors with text centered within each region.
Additionally, we placed emphasis on the idea of uniformity and redundancy; as our experiences with the world around us are purely based on our previous experiences, expectations play an enormous role in navigation. Thus, we hope to present a layout that is consistent throughout our entire site; notice how all text regions exhibit curvature on edges for a “smooth” experience [6]. Also, notice how elements on the home page under “popular pages” are mostly repeated in the menu, creating a redundant presence of important information. Lastly, we focused in large part on the idea of only including content where content matters. In other words, why overwhelm the user with information irrelevant to the page they’re on? We have made the navigational experience simple enough such that the desired information can be reached immediately from the homepage, free from the burden of overflowing descriptions. When clicking on the menu, the user is constrained to only interacting with the menu, such that it is clear what the “next steps” of their navigation are [7].
Site in General
If you notice, there are several concrete and abstract features shared across all web pages we have redesigned, tying into the idea of how expectations play a role in user experience. A few concrete features include the size of text, the menu/search/home button bar, and a patriotic themed background (with our target demographic and local population in mind).
However, it is the shared abstract design implementations that really create a user-friendly interface. In our case, this is built upon minimalism and simplicity. As previously mentioned, pay attention to the uniformity of both information itself and the presentation of such information (size of text, bounding boxes, alignment of text and boxes), the clarity of when it is necessary for one to scroll (some pages are oriented “more vertically” in content than others), and the general emphasis on accessibility in navigation/readability. These features can be recognized in the figure in the section below.
Additional Pages
For the additional site pages, we continued to emphasize the primary ideas discussed above. This includes uniform separation amongst different groups of information, as well as clearly indicating what is being observed with the use of icons, photos, and succinct descriptors. However, we also felt that informative visual cues could be of great use in conveying the motive for each page. Take for example, Bressler’s Music N’ More; through the associated imagery, the user is certain that it is a shop where they may purchase musical instruments, rather than solely a place to receive lessons.
Conclusion
The features included within our website prototype are not unique to this design approach. Uniformity, concision, and consistency in features are fundamental to the design of any “usable” UI. However, it is the amplification of such features in our instance that make our site uniquely designed for our target demographic. Our design relies upon simplicity, clarity, and navigability in attempts to capture an effortless user experience. If you’d like to give our prototype a whirl, click here.
For those who wish to create web UI prototypes like the one featured here, Adobe XD provides an extremely intuitive interface for quick and clean design.
References
- https://www.bankofamerica.com/
- https://www.geico.com/
- https://www.seminolehardrockhollywood.com/
- https://www.nngroup.com/articles/design-thinking/
- https://www.kixlab.org/courses/cs374-spring-2018/classes/17-Visual-Design/
- https://www.kixlab.org/courses/cs374-spring-2018/classes/17-Layout/
- https://faculty.washington.edu/ajko/books/design-methods/#/interfaces
