Sally Chan
I create a fascinating parallel universe with the collective memories from all of us.
UX Home.jpg

UX Journal

This journal is about my UX and project managing experiences from my current online community website project (Sep 2016 - current ), which I have been building from the ground up based on the business case of the organization.

After developed the Request For Proposal (RFP ) and went through the vendor selection process, I have been leading and working with the selected design agency since then. We are currently at phase 3, which we are staging the site for focus group testing before go-live.  During this time, I have flexed the muscle that I gained from my UX courses in 2017 by providing advisories, technical recommendations to enhance the website UX experience.


The initial phase

The ideation phase has its own set of obstacles before the project officially started.
Initially, it was a business idea to develop an elite Disability Communications Hub to provide a centralized stop for users to find accessible phones, devices, apps, and other disability resources in one place.
Some challenges during this phase included an evaluation of the original concept. After assessments, I reported that the concept needed to couple with other resources and services to attract, retain users successfully in the long run.  My purposed services were approved and added to the RFP.
For the next three months after, I had led the vendor selection process and had been defining the project scopes, identifying user groups through collaborations with the selected creative agency to develop the user cases.

The requirements overview from the RFP.

The requirements overview from the RFP.

All the key services which were identified and added to the project framework.

All the key services which were identified and added to the project framework.


The Kick-off phase

After the discovery sections, we had identified the key community users and had kicked off the project. Below are some of the critical technical requirements that I had provided advisories to get them implemented successfully:


1.    Accessibility
For a website that focuses on disabled people and their loved ones, accessibility is our number one priority. The simple design elements, the clean layout, the large and the easy-to-read sans serif font are built for the accessibility purpose.

2.    XML data importing
This is another key area that we had to figure out the solution during the kick-off phase before moving the project forward. We had identified an open-source website that provides detail specifications of all accessible devices with daily XML update. Because the database contains over 400 devices,  it will be impossible to manage if we can’t get this right.

3.    Multi-levels users secured login
Allow users to sign up, log in, and contribute based on their access level.

 

4.    The multiple languages options
It is important for the site to be accessible for non-native English speakers too. For the efficiency and budget purpose, we decided to implement the Google Translate plugin to address that need.

5.    The forum area, nationwide resources library, services directory, and events listing
To attract and retain users to this online community, it is important to offer users ways to be part of it. A system that allows users to make ongoing contributions and participation in the community is very critical.  As a result, we have implemented the submission and approval workflow that allows users with a different access level to contribute to the community.

6.    Analytics, Reporting, SEO and Social Media Readiness
In the digital age today, those are important arsenals to pave the road to success for any digital platform. Hence, those capabilities are necessary to be built in from the start.


The development phase (Phase 1 – 3)

Throughout the development phase, I have been providing high-level technical and UX advisories, overall style recommendations,  functionalities recommendations and QA. I have listed some major implementations as follows:

UX Solutions


UX bite # 1 — Visual & and Layout Improvements

The challenges
The initial design of the home page was designed as a static page with different categories laying across the page. The problem is, this approach is not going to encourage users to revisit the site on a regular basis. I explained that we should take advantage of the landing page and offer users a highlighted section that we can showcase different featured items on a regular basis.  
When building a website focused on the accessibility, many popular options are not suitable for those needs. For example, sliders, rotating banners, text on top of background may be difficult for disabled users to navigate.

The solutions
To maintain the focus on the accessibility, I came up with the highlighted block solution. It is a featured block that displays featured articles in cards, with both images and text displayed clearly, which gives the users a taste of unique aesthetic accents. I also provided UX tips to improve the visual elements on the website drastically.

You can see the differences between the initial design and the modified ones here:

Initial Design 1

Initial Design 1

Modified design 1

Modified design 1


Initial design 2

Initial design 2

Modified design 2

Modified design 2


Initial design 3

Initial design 3

Modified design 3

Modified design 3


Initial design 4

Initial design 4

Modified design 4

Modified design 4


UX bite # 2 — Set up category framework

The challenges
The organization is aiming to serve people with different types of disabilities. Due to the large amount of data the site will generate, we need to figure out a category framework to organize the information in a user-friendly way.

The solutions
After discussion with the organization CEO, with the input with the field experts, I have consolidated different disabilities under seven main categories, with subcategories under each. The service navigation is also interconnected with all categories - It is accessible by filters under each service page.

Devices-Library--r2.jpg

Example 1: The device library landing page

It is accessible from the Services Navigation bar on the top. The disability categories are available as filters on the left.


Others-_-ccaf-category-page_Page_1r.jpg

Example 2: The main category landing page

This is one of the seven main disability categories pages. All the subcategories are accessible from here, along with featured posts under the same category.


UX bite #3 — Implementing the Resource Library Directory Page

The challenges
For this project, we decided to provide a resourceful hub that allows article submissions from our users with the contributor role. We want the Resource Library to be the go-to place for professionals, disabled people, and their loved one.

The solutions
To achieve that, not only we have implemented two views under Resource Library – The card view is more visual with larger text, which is more comfortable to for people with disabilities like the low version to view. The list view is for professionals and researchers to scan through more listings in one view, and to be able to find the information they need quickly. 
Because we also built the capability of tagging article in the Resource Library, I purposed that a Directory Page for Resource Library is necessary for users to look for relevant content. I had provided a freehand wireframe for the creative agency to implement it.
To summarize, the Directory Page shows all categories and tags on one page, with the number of articles listed as well.

This is the freehand wireframe for the modification on the Resource Library Landing Page.

This is the freehand wireframe for the modification on the Resource Library Landing Page.

This is the mock of the actual directory page, which is linked from the Resource Library Landing Page.

This is the mock of the actual directory page, which is linked from the Resource Library Landing Page.


UX bite #4 — Define users role, access level and workflow

The challenges
Because this online community allows users with different access level (Basic User, Contributor, Trusted Contributor, Admins ) to contribute, it is critical to build a clear and precise workflow so that the system runs like a well-oiled machine.

The Solutions
I had provided the creative agency a roles-setting document to show them how it works. It also differentiates the level of access clearly for each role.


Technical Solutions

1.       Batch data/ CVS file upload

The service directory is a nationwide service listing that users can search for professional services, medical services, organizations based on their geolocation.  Because of the amount of data that need to be populated prior going live, the capability of batch upload through CVS files is necessary, and we have been working on mapping fields, plus an uploading tool for this.

2.       Drupal modules research and recommendations

Our community website is built with Drupal. Since there are many options on building out a function, I had worked with the creative agency and led the research to identify the right modules. The implemented modules are:

Module View-
It is for creating the list view of the library, advertisements,  and blocks with most recent posts, etc.

Module Date-
It provides a flexible date/time field, or a range for users to search for relevant content based on the date.

Module External Links-
It allows external websites to be opened in a new window so that the user doesn’t need to leave the community website.

Module Magnific Popup -
It can enlarge the images on the community site, which is very useful for people with low vision.

Module FAQ-
It allows users, with appropriate permissions, to create questions that pairing with answers to display on the 'FAQ' page.

Module Text Resize-
It increases the accessibility of the website by helping visually-impaired users to adjust the text size so that it is most comfortable for their eyesight.


The next step will be launching the focus group testing. I am looking forward to seeing what this project can bring to the disabled community!