What is Georgia Library Service?
Tools:
GLS (Georgia Library Service) is a library for the people who are unable to read standard print due to a visual, physical, or reading disability.
Problem
GLS was built with WordPress and designed by a graphic designer, which together made UX cumbersome, slow, and somewhat limited. GLS members reached out to us to see if we could help to redesign their website as they felt their website is not visually appealing, tech-sufficient and not fully 508 compliant.
PROJECT OVERVIEW
My Role
As a UX Designer and Researcher, I redesigned the website which included gathered business requirements, identified clear problem statement, shared possible solutions, competitor analysis, user interviews, create proto-personas, user flows, site structure, wireframing, prototyping, addressed usability issues based on accessibility guidelines checklist(WCAG), and implement new designs with minimalist design approach.
Software
Figma, Photoshop, WordPress
Duration
3 months
Team
Tanu Seth - UX Designer and Researcher
Hari Merugu - UI Designer
Redesign Goals
Getting on the same page:
I conducted the meeting with the main library staff on Google meet to better understand their business goals, users needs, pain points, and the overall site structure. I took notes about the main changes that specifically I need to highlight in the website and try to understand what other competitor libraries were offering which they were not able to, along with what made the GLS stand out
Align Goals:
-
Create a visually appealing website design with fully WCAG compliance
-
Create Navigation structure in the more user friendly way
-
Made the important information easily accessible
THE PROCESS
Discover
Define
Problem & Hypothesis
Affinity Mapping
Competitive Analysis
Create User Personas
User Research
Ideate
Site Map
Sketching
Wireframing
Implement
Visual Design
Clickable Prototype
Iteration(s)
Deliver Final Prototype
DISCOVER
Problem & Hypothesis
Problems to overcome
We saw the immediate issues regarding the information architecture, Header, usability, visibility, accessibility feature, content, and links etc.
1
2
3
4
5
6
7
Previous website
Heuristic Analysis
Observations:
-
The header is not looking presentable
-
Information architecture is not user-focused.
-
Accessibility feature were missing which user generally find at the top of the page.
-
No clear hierarchy of information links
-
Textual content is not clearly defined that how the user will get their service.
-
The site is not visually presentable.
-
Footer is also not looking presentable.
My Hypothesis
After analyzing the site, my hypothesis were:
-
It’s hard to find the useful information for users
-
Disability feature were broken
-
Resources are mixed up with other links and difficult to identify
-
Application/Sign-up process not easily accessible
-
Need to make the site visually presentable
Competitive & Comparative Analysis
Mylamp.org
Wtbbl.org
Sctakingbook.org
I conducted thorough research of potential competitor libraries that is comparable to our goals. Mylamp.org, Wtbbl.org, and Sctalkingbook.org is their biggest competitor.
Obviously, we knew our website lacks many features, but, we learned what features our potential competitors are providing on their website.
I discovered following key friction points which we can addressed in our app:
● Accessible features - contrast and text size buttons large and easy to find
● Context text size
● Apply button to application is front and center
● Apply for services feature easy to find and see
● Events section in the center and easy to navigate
● News and Events page populates on front page
●Populate training videos on the front page
User Research
To get the clear understanding of the user’s needs, motivation, and pain points, I conducted some user interviews, and before that I asked some questions from stakeholders too. These questions helped me to know about the issues which the users face while going through the site and also prioritize the layout for our new content and new navigation menu.
Stakeholders and Users Interview Questions:
-
When users come to GLS website what are the top few things they generally do?
-
What is that they usually like to search in the website?
-
What is the primary motivation for them to visit our site? so that, we can prioritize that information and keep it up in the priority list or Front Page.
-
Whether they use this site on a desktop computer or on a mobile device. What %?
-
What is the missing information on this website they are looking for which they can find elsewhere?
-
What are the difficulties they face while navigating through this website?
-
What are the few things which you feel that are important which they are not able to find ?
-
In navigation menu, is there anything which you want to add or remove? As an Admin, what challenges and pain points you have? (Last time we discussed, need new functionality to add an image with event, what are other improvements required?)
-
Which videos you want to add under newsletter? Refer “Websites we like” document
DEFINE
Affinity Mapping
Needs
Information should be visually Presented
Pain Points
pdf's are not open in new tab
Goals
See
Catalog
Motivation
Training Videos
Calender events in main focus
Can't see eligibility and services
Check and download Books
Easily accessible
important links
Training Videos
Not able to find current event easily
Check Resourses
Visually
appealing information
Disability
feature
noticeable
Page title missing
To get to know the eligibility
The Outcome for Affinity Mapping
-
We found out: Need to make easily accessible the important information such as calendar events, main resources, training videos etc.
-
Eligibility and benefits should be in main focus.
-
Check and download books should be in main focus.
-
Information should be visually presentable.
User Personas
After getting the clear understanding of business goals, user’s needs, motivation, and pain points, I worked with the main library members to create a target personas to better ground my work.
IDEATE
Information Architecture / Site Map
After creating the user personas, we roughed out a site map to help us focus on the user's mental model of the site.
The frame of reference is always "what does the user need? what will make this process easier and more pleasurable for them?"
Sketching
At this stage, I have clear understanding of the navigation structure and the most important feature of the website. So now I spent 1 hour of sketching to create 2 versions of the home page to portray interactivity between the functional element.
Then we check-in with the owners in our weekly meetings. So that, we could not go far into the design without the owners ensured.
Home Page V1
Home Page V2
Low-Fidelity Wires
Wireframing
As it was a redesigning project, I need get the clear understanding of which type of main changes the owners required. I did some weekly meetings and get the meeting notes as a base reference. After that, I spend 4-5 hours to create a mid-fidelity wireframe and discuss in our weekly meeting because we need the owner's seal approval at every stage. Then I gradually moved to the high fidelity prototype.
Home Page Grid Layout
Home Page V1
Home Page V2
Mid-Fidelity Wireframe
Refinement based on owner's review
-
Change helpline number in the middle
-
Apply now and donate buttons in the left
-
Change button name learn more to About GLS
-
Prefer to see Museum of Library service logo and description at the right
IMPLEMENT
High-Fidelity Prototype
For the hi-fid prototype, we designed 3 versions of Home page to choose the best one, and secondary page which will be used across the site for all the content pages.
I used their style guide and branding guidelines which were already defined that very well complimented with my visual design work.
Home Page V1
Home Page V2
Home Page V3
High-Fidelity Prototype
RETROSPECTIVE
Result:
The design solutions resolve many of the heuristic problems we initially found, so the website is measurably more usable!
What did I learn?
I was able to apply user experience design thinking and marketing methods across the site to create a site that is useful to users. I learned that how the visually appealing website and intuitiveness are important in a content-heavy website, especially for our users who needed as less distraction as possible while they were using the website to be able to focus on the data they were getting.
Projects you may also like:
