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.
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.
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.
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.
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.
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.
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
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
