Precision Accessibility

Details

Problem: Outdated website did not accomplish business goals
Solution: Website redesign focusing on branding and visual design, increasing conversions, and marketing content.
Tools: Miro, Figma, Balsamiq
Client: Precision Accessibility
Date: Fall 2020
Deliverable: Wireframes and High-fidelity Mockups

Summary

Precision Accessibility has grown a lot over the past few years, but their website did not grow with them. Emerging accessibility consultants, hoping to keep expanding in the future, wanted a new website with a thoughtful design to help them reach new people and drive conversions. This year, Precision Accessibility also started a blog as a content marketing strategy. Their new website design can accommodate a growing blog.

Precision accessibility in a macbook pro

1.

Research

1.1

Competitive Analysis

The first step I took to get visitors to ask for a quote is to make the call-to-action more inviting. 

I started with mobile wireframes and placed an obvious call-to-action button that’s easy for a user’s thumb to reach. 

2.

Wireframes

2.1

Call-to-Action

The first step I took to get visitors to ask for a quote is to make the call-to-action more inviting. 

I started with mobile wireframes and placed an obvious call-to-action button that’s easy for a user’s thumb to reach. 

Precision Accessibility - Brandon Hills (1)
Precision Accessibility - Brandon Hills (1) 3

2.2

Transparency

Visitors coming to this site looking for web accessibility services are trying to get a lot of questions answered:

  • How much will it cost?
  • Is my project elegible?
  • What do I have to do?

 

In the cost section, I can’t say exactly how much a client will have to pay. But the user will feel in control if they understand how the cost is determined. If a user believes the final cost will be in their price range, they will be encouraged to ask for a quote. I added a graph to this section for the user to be able to quickly glance at the pricing structure and see where they land. 

Precision Accessibility - Brandon Hills (1)-2

I included a section that explains the accessibility process so a user can know what to expect. I suggested explaining how services work and show that Precision Accessibility’s services can help a website at any stage in it’s development process. This reasoning also helps drive conversions because if freelancers or organizations realize they can hire their services at any point, then it is always a good time to ask for a quote.

Precision Accessibility - Brandon Hills (1) 2

3.

Mockups

1.1

Logo

The full logo was just the company name, Precision Accessibility in italicized green letters. However, the icon version didn’t visually match the full logo. I created a new icon that matches the text to form a new full logo.

The new icon has a more contempotary and minimal design than the previous version, and it can be easily scaled up or down while remaining recognizable. 

logo (1)

1.2

Illustrations

I found free illustrations at undraw.co, then added the brand colors pink and green. I choose these because they are simple, fun, and light-hearted. Web accessibility can seem dull and complicated, but these illustrations help Precision Accessibility seem like they make the process interesting and easy.

 

1.2

Homepage

Web Developer wants to hard code the site. To make things easier to build and manage, I kept resonsiveness in mind. The desktop version 

1.2

Content Marketing

What’s the best way to structure a developing blog? Currently, there are only A search bar would provide a poor experience if a user searches for something that returns no result. Instead, I decided to direct users to choose from what is available. A tag cloud is best to show all the topics that are currently mentioned in the articles section. As more articles are added, the tag cloud can grow larger. When the articles section becomes too dense with content, a search bar, or another form of navigation, can be added.

What’s the best way to structure a developing blog? A search bar would provide a poor experience if a user searches for something that returns no result. Instead, I decided to direct users to choose from what is available. A tag cloud is best to show all the topics that are currently mentioned in the articles section. As more articles are added, the tag cloud can grow larger. When the articles section becomes too dense with content, a search bar, or another form of navigation, can be added.

Social Share

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email

Keep Reading

Arts Raiser

Website application where artists can raise money, and other types of support, directly from fans

'GalleryPal'
Design Sprint Challenge

App to improve art exhibition experiences without distraction

WordCamp Philly 2020 Digital Workbook

All-encompassing resource for WordCamp Philly 2020 Virtual Conference