Embedded Files
Project Overview
Project Overview
Timeline
Jan - Mar 2023
Tools: Figma
My Roles & Responsibilities
As a student of the Google UX Design course, I was responsible for all parts of the project and my roles included:
UX Researcher
Interaction Designer
Graphic/Visual Designer
Writer
Table of Contents
Table of Contents
The Challenge
The Challenge
Currently, many employees (in this case, of the State of Alaska) need to learn how to create Web Accessible documents Many employees, however, don’t know where to look for resources to learn, feel they are too busy to learn, or need resources in plain language. What they need is a tool to help tutor themselves in using Web Accessibility best practices in various software programs.
The Goal
The Goal
The goal is to create a resource that an employee can access, either via their mobile phone, tablet, or desktop computer with which they can quickly locate the information they need, in an understandable manner, that will aid them in creating a fully Web Accessible document.
The secondary goal is help more end users be able to access the information they need from better state-produced documents & web pages.
Constraints
Constraints
The constraints on this project are due to the amount of time & funds I have to put into it as a certificate student (As the certificate program is about $40/month, the longer I take to complete the certificate, the more I pay.).
Research: Understanding the User & Competitive Audit
Research: Understanding the User & Competitive Audit
User Research: Pain Points
User Research: Pain Points
In my current professional position, as a Publications & Web Accessibility specialist, I often must remind employees that all documents and web pages must be Web Accessible according to law. I spend a lot of time teaching coworkers how to create Web Accessible documents and web pages. While some employees are resistant to learning how, some are interested in learning but don’t know where to start. These are all excuses or struggles I have heard from clients and coworkers when discussing learning how to include Web Accessibility best practices in the document or web page creation process.
1
“I don’t know where to find resources.”
The design will not only be a resource, but it will contain links to other resources so it will be one-stop-shop for a number of resources.
2
“I don’t have time to learn.”
The design will provide the needed information in quick, easily digestible bits with photos so that users don’t have to spend long using the tool before getting back to the task at hand.
3
“The resources available have too much jargon I don’t understand.”
The design will use plain language rather than Web Accessible jargon.
4
“I don’t understand why we have to do this.”
The design will include information on why Web Accessibility is important to take into consideration.
User Research: Personas
User Research: Personas
Based on my daily interactions with clients, I created two personas which represent two types of clients I encounter most often. The first is “Karen”, an older user in a supervisory position that feels she has little time to learn new technological techniques. The second is “Kevin” who is young and ambitious and wants a resource that will quickly aid him in appearing competent in the work he produces.
Karen User Story
As a busy high-level employee, I want a Web Accessibility document creation resource I can access and understand quickly so that I don’t feel like trying to learn Web Accessibility takes time out of my schedule.
Karen Problem Statement
Karen is a busy manager who needs a tool to help her create web accessible documents quickly because she is required by law to put certain information on the website and it must be web accessible.
Karen Journey Map
Kevin User Story
As a young, ambitious employee, I want a resource that will teach me how to create documents with Web Accessibility in mind so that I will become the go-to person in my section for this knowledge.
Kevin Problem Statement
Kevin is an ambitious manager’s assistant who needs a tool to help him quickly and easily remediate documents created by the manager or other employees because his job is to make updates to and ensure documents are ready to be uploaded to the webpages.
Kevin Journey Map
Research: Competitive Audit
Research: Competitive Audit
I looked at several Web Accessibility resources from web sites, to apps to web browser extensions including:
WAVE browser extension
Web Accessibility Initiative Web Content Accessibility Guidelines
Accessibility Hero (an app for developers to test colors and fonts and accessibility of elements)
a11yTools (A Web Accessibility App & WCAG Accessibility Checker)
While all are good resources, none but the NCDAE cheatsheets provide the kind of aid Alaska State Users need. However, these cheatsheets are only in PDF form. There does not currently appear to be an app or website that provides the type of information in a format I believe would be most helpful for the clients I work with daily.
Dedicated App
Dedicated App
Ideation
Ideation
Based on the positive feedback I have received about PowerPoint slides I created and often share with clients in PDF form as a resource for creating Web Accessible documents, I believe the document, with some additional information, would be more useful as an app or web resources which clients could easily find via a bookmark or an icon on their mobile screen rather than having to remember where in their files they placed the PDF document. I decided to use this content as a starting place for my designs.
I began by hand sketching screen design ideas and a drafting information architecture of the app.
Crazy 8's Exercise
I based the 8 ideas on the PowerPoint tips presentation I created and ideas I gained from the competitive audit, such as the color contrast page and the Elements Explanation pages.
Information Architecture
I think the home page will contain images of software programs grouped by creator then a link to Accessibility element explanations (these will also have links from within the app content), and finally a More Resources page (which will also be linked to from inside the app content).
Wireframes: Paper & Digital
Wireframes: Paper & Digital
The assignment is to design for mobile first. Many younger workers will turn to their mobile phone first for information. Even older workers will have their phone with them at work. Thus, this may be the first way users interact with the product anyway. Considering many of the users may be older in age, the interface should have large buttons, easily adjustable text, and an intuitive flow.
I realized while drawing the Accessibility element page that it would be better to have a checklist page and a separate page for each element so that those could be linked to from the software pages as well.
Digital Wireframes: Home Page & Menu
The app will function as a resource which will provide tips on the tools which should be used to create a web accessible document within different software programs.
The Home page will have logo images of various software a user might choose to create a document that act as buttons.
A user’s first step in the app will be to tap the logo of the program they will work in to create a document.
After they create their document they can return to the Home page and go through the checklist and/or see more resources.
The user can also navigate to the Home, Checklist, or More Resources page from anywhere in the app via a menu that will slide in from the left by tapping the hamburger menu in the upper left corner of any page.
Digital Wireframes: Microsoft Word Pages
Each software (in this example, I've used Microsoft Word) will have its own pages with an image of a document and a way to go through the different Accessibility elements a user may encounter while creating a document.
The document image will have number bubbles which are tappable buttons that will open the corresponding accordion found below the image of the Word page.
The accordions can also be manipulated with the arrows on the right. Each accordion will reveal information about an Accessibility element and how to do it in the software.
Digital Wireframes: Checklist Pages
The pages linked to by this checklist will also be linked to from the software pages. These pages will give the “why” and more information about correctly implementing these elements.
The user can work through a checklist to learn more about why these elements are important and discover if they’ve done these things correctly.
After a user has worked through the checklist, a “Good Job!” will appear at the bottom.
Low-Fidelity Prototype & Usability Testing
Low-Fidelity Prototype & Usability Testing
Low-Fidelity Prototype
For the low-fidelity prototype I only created enough screens to test the functionality of my design. Both the accordion set of pages and checklist set of pages will all act similarly, so I felt I could test the functionality of both by only creating the pages necessary to test the first two items in the list (Properties and Headings). Once I have tested the functionality with a usability test of the lo-fi prototype, I will make any necessary updates and include the rest of the pages for both sections in the high-fidelity designs.
Usability Testing
I conducted 4 usability studies, two via Zoom and two in person. Over Zoom, the users tested the app by accessing it on their home computers via a link I sent and they screen-shared with me so I could see how they interacted with the prototype. In person, the users accessed the app via the mobile Figma app and I watched their fingers to see how they interacted with the prototype.
Affinity diagram made in Google Jamboard to synthesize testing results.
Prioritized Usability Test Findings
Priority 0
Navigation buttons need to be more readable and noticeable.
Change the checklist flow so that upon return to the list from a details page, a list item is checked and the next list item is available to the user.
The Word to Adobe transition button needs to be larger and include an icon and the user needs to know that PDF is related to Adobe Acrobat.
Priority 1
To open an accordion, the whole box should be clickable and the “Read More” button needs to be button-like. Users did not use number bubbles for navigation, these buttons can be removed.
Mockups & High-Fidelity Prototype
Mockups & High-Fidelity Prototype
Figma Sticker Sheet & Mockups
I chose to keep my design simple with just one font.
For color, I chose blue as my main color for the app because the intended audience of the app in Alaska State Workers and blue is the main color of the Alaska state flag. I chose to stick with a blue/white color palate for Accessible color contrast sake.
I copied and modified an item from the Figma Material 2 Design Kit for the list item I have used on the Home page, the Accordion pages, and the Checklist pages.
Home Page
I added icons for the software most often used by AK State workers to create documents for the State web pages.
Microsoft Word Page
I removed the image and number bubbles above the accordion list because these were ignored by all users in the usability test.
I used the color of the software icon for the corresponding accordion list. For Microsoft Word the color is a shade of blue. For Adobe Acrobat the color is a shade of orange. This will help users that can see color know where in the app they are, but for Accessibility purposes for those that have trouble with color, the app section is written at the top of the page.
Checklist Page
For the checklist pages I use a component I had created on the Sticker Sheet.
High-Fidelity Prototype
For this high-fidelity design I only created the set of pages for the Microsoft Word section of the app. The other software page sets will function similarly and the flow through them will be the same as through the Word section, only the contents of the page will differ. As this is only a course project, I only design enough pages for one flow through the app.
DedicatedAppHiFiPrototype.movWatch the dedicated app high-fidelity prototype in action!
Complimentary Responsive Website (in Three Sizes: Mobile, Tablet, Desktop)
Complimentary Responsive Website (in Three Sizes: Mobile, Tablet, Desktop)
Ideation
Ideation
How Might We... Exercise
How might we build a website with software web accessibility cheat sheet tips?
How might we help users learn web accessibility best practices in a fun way that aids in information retention?
How might we put all the information users need in one place to digest quickly?
Crazy 8s Exercise
The website will have more features than the app. Some of my ideas include adding:
Quizzes
Example documents
Videos of alt-tech in use
Free templates & instructions for setting up a document for use
Sitemap
The sitemap for the website is similar to the information architecture drafting I did for the dedicated app.
Wireframes: Paper & Digital
Wireframes: Paper & Digital
Paper Wireframing: Desktop & Mobile Sizes
I combined some ideas from the Crazy 8s exercise with the content I created for the dedicated mobile app. The responsive website will contain more content than the dedicated mobile app which is purely a pocket tool.
For this project I found it easier to design the desktop screens first then design for the smaller screens.
Digital Wireframes: Home Page in Three Sizes (Mobile, Tablet, Desktop
The flow of this site is similar to the dedicated app, except extra content has been added to the site. This includes an About section for users unfamiliar with the concept of Web Accessibility, quizzes for users to test their knowledge of Accessibility and help them cement their learning, and accessible templates have been added to the extra resources area. The Home page of the responsive site will show these extra features.
Low-Fidelity Prototypes
Low-Fidelity Prototypes
For the responsive website low-fidelity prototypes I again only designed enough page wireframes to test the functionality and flow.
I designed the pages that will be changed and the pages that will be added compared to those already designed for the dedicated app and I only included a couple of the accordion and checklist page sets.
Usability Study
At this point I would conduct a low-fidelity prototype usability study of the three designs of the web site, however, as this is a course project and the testing is optional, and the functionality has not changed significantly from the Dedicated App, which was tested, I moved on to the mockup stage.
Mockups & High-Fidelity Prototypes
Mockups & High-Fidelity Prototypes
Mockups: Home Page in Three Sizes (Mobile, Tablet, Desktop)
Mockups: Differences from the Dedicated App
The three major differences the responsive site has compared to the dedicated app are
Quizzes for testing your knowledge of Web Accessibility concepts
An about section that contains information about Web Accessibility and videos of alternate tech in action.
Downloadable Accessible templates
Desktop Quiz Page
Videos of Alternate Tech in Action on About Page
Downloadable Templates on Resource Page
Also, while the mobile design contains a Hamburger icon and fly-in menu, the tablet and desktop designs have top navigation bars. This meant that for the high-fidelity prototypes to work, each mockup page had to be duplicated except the duplicate mockup contains the drop down navigation items.
High-Fidelity Prototypes
Watch the High-Fidelity Prototypes in Action
Mobile
MobileWebsiteHiFiPrototype.movTablet
TabletWebsiteHiFiPrototype.movDesktop
DesktopWebsiteHiFiPrototype.movAccessibility Considerations
Accessibility Considerations
Image Alt-Text: If this project were given to developers, I would ensure that all images in the design were annotated with Alt-Text.
Font Size: I made sure the font size is large enough to be read or can be expanded. I have based my font size on the suggested standard for apps. According to sources I found via Google, standard body font size for apps should be no less than 16pt.
Target Sizes: I made sure button areas are large enough for fat fingers to tap without hitting an unintended target.
Color Contrast: I have made sure that any text complies with WCAG color contrast ratios.
Going Forward
Going Forward
Takeaways
Takeaways
Impact
I believe if these designs were actually developed they would benefit the clients I work with in my professional work. Most of the employees of the State of Alaska need a good resource for learning/reviewing how to create documents that comply with WCAG.
What I Learned
During this project, I learned the difference between a dedicated app and a responsive website app. I also learned how to design for 3 different screen sizes.
Next Steps
Next Steps
If I were to continue this project, I would do usability studies of the high-fidelity designs then iterate on them. For the studies I would interview State of AK employees.
If I were to continue the project, I would build out the other software sections of the apps & web pages. This includes the Excel, PowerPoint, and PDF sections of the site & dedicated app.
If I were to continue the project, I would revise the navigation of the tablet and desktop designs. I believe it could be better.
Page updated
Google Sites
Report abuse