Ability Central Portal
A digital transformation and an online resource community project for a non-profit organization.
What delights you in your life? While we all have things and people that we value and give us joy, it is vital to feel satisfaction in our professional life as it is also an inseparable part of our reality. I also believe that the key to this satisfaction is to be aware of our strengths and what we genuinely enjoy doing.
For me, that lies in creating, building things, and solving problems.
With this project, I was able to flex my muscles in those areas and helped a nonprofit organization to adapt to the rapid change and continue its mission in servicing the disabled community in the age of digital transformation.
The goal is to build a product that can help disabled people, their loved ones, specialized researchers, medical professionals to build a community, to access knowledge and resources about disabilities in one place.
How Did It Start ?
It started with an identified service gap in the disabled community with the organization leader. However, at that time, it was a brief concept without any plan on how to get there.
When the organization approached me and asked if I would like to apply my design and consulting skills for this voluntary project, I had gladly accepted!
Starting by building a business case and a project proposal to address the what and how, it was taking off from there and has grown into a ready-to-launch SaaS product.
During this journey, I had advanced my skills in UX/ UI designs ( UX research and survey, prototyping, user usability test, UX and UI refinements) and I had led the project development with the project internal and external teams through challenging situations and eventually successfully implemented a SaaS platform.
P.S. - While my focus for this project experience was mainly on Users Research, Information Architecture, UX/UI refinement, product development and management, I think I should showcase my own UI design ability too! Thus, I had given this product a new visual look in this product journey, while the layout and the information architecture remain the same as the live one.
You can see the product live here:
Here is how the team and I had come together to overcome the obstacles and what we had learned along the way.
My role for this project was divided into UX/UI design and product management.
As the Product Designer, I designed the UX and the visuals with a focus on accessibility. I started by reviewing related laws, such as Americans with Disabilities Act (ADA) and compliance guidelines (Section 508, WCAG), and researching from well-reputation and trustworthiness resources like material.io, and other organizations, services, and products that focus on serving people with disabilities.
During this research process, I was able to understand better the needs and the challenges that people with disabilities are facing, and later designed and refined UX/UI better based on those findings!
As the PM, my role for this project was to review all the proposals, estimates and scopes throughout the development. I approved, reduced or refined the scopes; researched the technical solutions, and made suggestions to the external design team, and did QA and testing prior to deliverables approval. Additionally, led project meetings by setting meeting agendas for discussions and managing time in the meetings.
Design Process
As an analytical person, I like to use Design Thinking as my design process.
The project developments had 4 phases. When all 4 phases went through the Empathise, Define, Ideation, and Prototype process, we mostly performed our testings during Phase 3 and 4.
Empathize
Brainstorm Sessions & more!
During the first development phase of the project, it is important for a digital product to address the users’ needs and figure out solutions for them. With this project, it had lots of unknown pieces that we needed to sort out.
The Problems
◐ While a brief business case was developed for this project, most parts were still in the dark.
◐ The What and How were completely missing from the puzzle. At that time, the existing business brief only suggested adapting an existing accessible device database (under the permitted license from the database website, gari.info) and pairing it with some disability services directory.
◐ From my marketing and consulting experience, I recognized that in order to make this a successful digital transformation step for the organization, it will require much more to turn this into a viable, marketable product that can attract users and be impactful in the long run.
This was when the User Research and Competitive Advantages analysis came into place.
The Approaches
◑ First, we have to understand our role, services, and the needs of the disabled community.
To get better clarity on ensuring the product can reach its potential, I dived into a series of research on available disability resources and services in the United States and California State and identified the disabled needs through multichannel resources including user interviews and paid demographic data from the past.
◑ Second, what makes a good product?
To found out, I had buried myself into the market and competitive advantages research, academic UX design courses, analysis, the UX trend, and other components that will be critical for the product success, such as:
✣ Assessed a list of leading disability focus websites, identified their strength and weakness.
✣ Researched implementation and framework options for both open source and subscriptions platforms.
◑ Third, what do the users like?
To make sure we are building a conducive platform that can have a long-lasting impact on the disability community, I went on a hunt on disability-related resources, news, and service directory database, and also ensured that they are reliable and sustainable sources.
Through these secondary researches, I had learned so much about our users and it had a profound effect on how I designed the UX and improved the UI later on.
During the Empathize phase, I had developed the business and use cases, and later the RFP for the project.
Based on the research and evaluation, I had created an assessment report that addressed we will need to expand the initial database-only idea to pair with other engaging components like articles, events, and forum sections that allow community contributions.
The report was reviewed and approved by the executive team, I later developed the Request For Proposal (RFP) and identified project and technical scopes.
After going through the vendor selection process along with the executive teams including the CEO and the Director of technology, the development had officially begun!
From there, I had start my journey of a long-term collaboration with the organization- selected design partner.
First, we started by empathizing with the users. We needed to understand what the users need and how they think to get a clear picture of who they are, and the pain points they are facing, whether it is the people with disabilities and their loved ones, or professionals and researchers.
User Interviews
Working with the design partner, we kicked off the project with a series of brainstorming sections, internal and external interviews. Through the collaborations with our design partner, we had defined the product from the user personas and use cases that were developed from the interviews with the stakeholders.
The UX researches during this phase were intermixed with qualitative and quantitative, primary research. It was the first time I worked with industry experts ( Creative Direction team) in this area so I had taken the observer role, assisted and communicated with the team on the items that were required to complete the user interviews successfully.
I also handled most secondary researches to identify the possible users and their pain points.
Define
Strategizing and defining solutions.
During the define process of project phase 1, we were trying to figure out the how, and define the product design goals. As challenges happen as the normal of any product development, we had started facing some unexpected hiccups already.
The Problems
◐ Only a high-level technical brief was developed at that time. Thus, we had to deal with lots of uncertainty and worked hard on both strategic planning and tactical solutions along the way.
◐ During phase 1 of the project, we got some miscommunications and misunderstandings of the scopes on both external and internal teams.
◐ Changes in both the external and internal teams also brought uncertainty.
So how did I handle these changes? Here were the approaches I took for the challenges we faced:
The Approaches
On facilitating the team and communications
◐ When the Director of Technology teams rolled out from the development due to other commitments, without guidance, I took on the responsibility to work hand in hand with the design partner.
◐ When facing the developer and PM changes in the external team, I adapt to those changes and put it extra effort to fill the new team members in.
◐ Besides pointing out the issue, I also communicated with them about why that requirement is important for the staff users and organization.
On defining the project’s scopes and implementations
◑ Identified, designed the framework and features of the product through extensive research on the availability CMS frameworks on the market. For example, Wordpress, Drupal, and their API compatibility with marketing and CRM tools such as Salesforce, MailChimp, Google Analytics.
◑ I worked with the design partner closely to develop implementation plans (on Drupal) to build out on the technical components defined in the RFP, including the accessible devices database, which will update automatically through XML mapping with the database source.
◑ I also took on the product and project management role and become the key liaison to communicate the ideas and feedback between the organization and our design partner.
Ideation
Structural & Information Architecture.
Once the team selected and decided to build upon Drupal, I started working on the Information Architecture.
First, we started by defining the information Architecture and then rolled into building out the detail scopes for each technical feature. I had designed the information architecture and user experience by keeping in mind that this platform is to serve people with disabilities and their loved ones, professionals, and researchers.
Essential considerations when designing the Information Architecture
◐ The Accessibility functions and making them feasible for the product.
◐ As a product that will deal with lots of data, we have to figure out ways to categorize disability in a way that is easy to understand and update.
◐ We need to create a system that encourages community and resource building, therefore a mature multi-level users access system is important.
◐ A user-friendly interface for technical and non-technical users, general users, editors and admins. For example, to define fields for screen readers, and add alt text field right next to the image once it is uploaded.
Key Features
Site Navigation
Sitewide Search
Categories Structure
Specified Disability Main Pages
Assistive Tools Page
Build for Accessibility
Community-oriented features ( Forum, Contributors-build resources & more.)
Data-mapping workflow
User Access Level Design
The Navigation
This product is to serve people with different types of disabilities so a user-friendly category infrastructure for easy content navigation is critical. With so many disabilities out there, I have consolidated different disabilities under main categories defined by industry professionals, with subcategories under each.
The navigation design for the platform.
The New UI Design ( Personal Touch )
The new navigation design
In the original design, a secondary navigation menu was listed right under the main one. In the latest UI design, I have moved the secondary navigation menu into a floating icon that the user can expand at any time.
The icon of the topic of interest navigation
It is a floating icon that will change color when active.
The icon in the expanded mode
The icon will expand and show the navigation of the disability topic when clicked on.
You can explore the comprehensive style guide here.
Search & Categories structure
As a platform with a large database, we have to ensure that the users can access the information they are looking for easily.
We have the search box accessible from the navigation bar on the top, and also at the end of the page.
On the Service Directory and Events pages, we also implemented a Geolocation search.
We implemented filters for disabilities and other properties on all landing pages for devices, resources, events, and services directory.
After learning from the feedback from our first round of User Testing, we enhanced the User Experiences by linking the checked/ unchecked in between the main and sub-categories.
As the platform and the data keep growing, we will need to organize all the articles and resources and make them easily accessible to the users.
My solution to this is to add a Resource Directory page, and refined the Resource Library’s information architecture to include the capability of custom tagging and autogenerate Tags Index.
Disability Main Pages
From the home page, visitors can access a specific disability main page easily. Each disability main page contains relevant information, articles, and events based on the user’s interest.
Assistive Tools
Built upon the concept of the accessible device database, we expanded the Device Library (now renamed to Assistive Tools) to include not only just the mobiles but also an application library and a category of equipments for assistive living and the disabled.
Community-Oriented Features
The platform allows registered users to leave comments, rate products and services, join the forum discussion, bookmark, and share the page they like at ease.
Moreover, I took on the idea that we should of the community give users ways to engage in this online community in addition to offering devices information and service directory. As a result, we have implemented a system that allows users to participate and make ongoing contributions by adding community-oriented features like the resource library, the discussion board, and the events listing.
Build for Accessibility
For an inclusive platform that focuses on disabled people and their loved ones, accessibility is the main project priority and the platform is built based on WCAG Guidelines. Some implementations are:
Overall site accessibility
To implement the alt text field, screen-reader and audio description readiness, and more. Below is the original accessibility implementation during the development.
Color accessibility
Color and layout choice based on the right contrast level. beautiful and accessible color palettes based on WCAG Guidelines of text and background contrast ratios.
Magnify Glass
for enlarging images on the site, which is very useful for people with low vision.
Text Resize
to help visually-impaired users to adjust the text size for the most comfort for their eyesight.
The Google multiple languages tool
makes the platform accessible for non-native English speakers too.
Back to the top button
a neat tool that greatly enhances the user experience.
Accessibility ( A Personal Touch )
Soon after I completed this project, I came across a third-party tool accessiBe and have decided to integrate that in the new UI design as it is more much powerful and competent. It also helps me realize that how the technology of accessibility is changing at lightning speed today!
Data Mapping Workflow
XML data importing
One of the project scopes is to import an open-source data set and product specifications for over 400 devices through daily XML updates. Because of the data size and complexity, it will be impossible to manage if we can’t get this right.
Batch data/ CVS file upload
The batch upload function through CVS files is necessary as the service directory is a nationwide service listing that users can search for professional services, medical services, organizations based on their geolocation.
You can view my low-fidelity wireframe set here.
Users Access Level Design
Because this online community allows users with different access levels (Basic User, Contributor, Trusted Contributor, Admins ) to contribute, it is critical to building a workflow process correctly.
The scopes are focus on:
✤ Users secured login for Multi-levels access.
✤ Allow users to sign up, log in, and contribute based on their access level.
✤ Define Users-role, Submission Workflow, and Sign Up Process.
Besides working on the technical solutions, I learned through this journey that active listening, transparent communications, focus on working for solutions together (especially when it comes to addressing issues) are essential elements to drive the project forward during this phase.
Protoyping
UX Design, Layouts & UI
Throughout the product development, I had been collaborating closely with our design partner. I communicated the product design from the wireframe to the prototype and refined the UX and UI based on the usability tests.
Essential considerations for the UX & UI designs
◐ Learning from the users through users interviews, surveys and usability tests.
◐ Understanding what inconvenience and challenges for people with different types of disabilities are facing, and what they need as well.
◐ Understanding how to implement accessibility into the product by reviewing guidelines and related resources.
◐ Observe other great and user-friendly websites and interface designs.
Layouts Design
Initially, they were all designed as static pages, which would be a colossal waste and discourage visitors to re-visit again. We want the site visitors can make their time worthwhile using our platform. With a user-first mindset, I had re-designed the home page and all the main landing pages from a static to a dashboard-style with the latest updates and featured articles accessible on one page.
Initial Design
The updated design after two round of usability testing
A New UI Design ( Personal Touch)
After the completion of the project, I had added a personal touch to it by creating a new UI with the same layouts and information architecture.
You can find my new high-fidelity UI design set
Overall UX Refinement
Built with dual views
Built with inclusions in mind, we want to give all types of users to have a pleasant experience here. Therefore, we decide to create Dual views for those critical community-oriented data libraries:
The grid view is styled for better accessibility.
The list view is more compact and similar to the standard search result style in everyday life.
Added a tags & categories directory
As the platform and the data keep growing, we will need to organize all the articles and resources and make them easily accessible to the users.
My solution to this was to include the capability of custom tagging and autogenerate tags index, and to add a tags & categories directory which can be accessed from the library page.
Sign-Up Design
I designed the user signup experience starting from the wireframe to prototype and later simplified it. After the result of two user testings, we refined the registration pages to be more compact vertically.
One of the key strategies is to give the users an option to signup for a contributor account right after registration.
The registered users now only need to answer a few questionnaires about their professional background and what interested them in joining as a contributor. To ensure safety, submissions review and approval are required.
Testing
Usability Tests
We have 3 round of Usability Tests in total.
1st round of Usability Test with internal staffs.
2nd round of Usability Test with users with disability, organization staffs, program grantees, and more.
3rd round of Usability Test with the organization’s advisory board members
1st Usability Test
Refined UX and UI after Usability Tests
After the first round of user testing, I re-designed the individual template for mobile devices, applications, assistive devices, member account, and the service directory pages and provided a revised prototype. This version was created based on the feedback that the pages are too lengthy - some users felt that it involved too much finger motions (scrolling), and the information displaying format is not well-organized.
For example, in the first design for the mobile device template, all the information was displayed in a stack style only using 50% of the page (in the right column), while all the comments were listed out roll by roll with no pagination. You can imagine how long one page could become over time.
Thus in the revised version, I redesigned the layout by refining the spacings, grouping relevant information together, changing the information display from the one stack style column to the multi-columns, and rearranging the rating and comment sections.
For the redesign, I had:
Refined the spacings, grouping relevant information together.
Changed the information display from the one stack style column to the multi-columns.
Rearranged the rating and comment sections.
Added the pagination system to the design!
Re-design all disability main pages
Initially, all disability main pages were all static pages. After the 1st round of user testing, one main feedback we received was they were repetitive and not very useful.
I re-designed the information architecture and improved the UX of the disability main pages by simply adding the card blocks for related articles and events under the same category.
By providing an updated prototype and implementing those changes, not only that we were able to utilize the budget more efficiently and also able to give our users a more profound user experience!
2rd Usability Test
The improved design drastically reduced the templates’ length and the overall user experience. We had received very positive feedback on the new design in the second round of the usability test.
3rd Usability Test
Third Time Is A Charm
The purpose of the first two rounds of user testing is to observe the realistic user experience with real prospect users, get feedback, and improve the design through testing and iterate. The users’ size for these testings was around 20, including people with disabilities, program grantees, organizations, staff, and professionals.
At the beginning of the project, we validated our ideas through market and competitive analysis, interviews, scenario writing, and user personas. To understand what truly works well, we had to validate the UX and get feedback from real users. During this phase, we used usability tests to validate UX and design after the first prototype is completed.
As we were working as a team, I helped to draft the User testing survey questionnaires while another team member created the survey, collected the results and feedback. Additionally, We had held and organized the testing orientations.
Based on the feedback and analysis reports from the two rounds of useability tests, we had fine-tuned the product UX and design one more time before the 3rd round of testing with the committee and board members.
Overall Product Strategies
Built For Growth
During the project, one of the main challenges was to figure ways to update the site regularly in a flexible and economical way. Some examples of how I tackled this are:
Minimize Operationals Cost
Depending on developers to build out additional features and make changes for us regularly in long run won’t be a feasible plan.
As a result, I dived into researching some third-party tools that will work for us. After a series of research, testing, and exploring, I identified Cincopa, an award-winning platform that provides marketing, communications media, and video hosting solutions. With their powerful support on media accessibility like screen reader readiness, auto/ manual captions, custom code implementations, and plenty of analytics reporting options – not only that it fits our needs, it is also a great tool to help the platform reach its potential. I was able to custom code for a series of featured slideshows on all main pages.
Go-to Market Readiness
Marketing Analytics & Reporting, SEO, Social Media and CRM Readiness
In the digital age today, those are great arsenals to pave the road to success for any digital platform. Hence, the capabilities of marketing analytics, reporting, SEO, Social Media, and CRM readiness are built in from the start.
Website Flexibility
I spent lots of time exploring the requirements for website accessibility and identify the approach that fits the platform. For example, the video/ photos displayer can’t do autoplay, and it’ll need the captions/ paragraph display at the right contrast ratio, etc.
I also implemented a CSS/ HTML flex container on each main page, so that we can add new features like the multimedia player seamlessly into the site.
Here is an example of my custom code for all the headline sections of all the main pages.
The mobile view of the custom CSS/HTML section on the device main page.
Art Direction
A picture is more than a thousand words.
The visual theme and expression are how others can relate to us, instantly and intuitively. For this, I have chosen a mission-driven brand identity that presents the resilience of the disabled community and the ways for disabled people and their loved ones to live a quality life.
What I learned
Despite that we went through a series of resources and technical challenges, especially the on-boarding and off-boarding of project managers and developers, plus the transition hiccups during the early development phases, we chose to communicate with our design partner honestly and understanding.
By facilitating authentic and friendly communications between teams, working on the solutions together along the way, finding out and addressing the root causes of problems and issues but not placing blames, we were able to complete the technical development of the product.
Impact
Passed three rounds of user testing.
Successfully went through the product development cycle for the brainstorm, define, design, test phase, with the technical development completed and is ready to launch!
Approved by the advisory board of the organization and became an official program to go live.
