Vision Ready
Vision Steady
Website Visual Redesign
My Role
Client Coordinator
Researcher
UI Designer
Tools
Figma
FigJam
Team
2x UI Designers
Duration
2 weeks
Research 1 week
UI 1 week
My Contributions
Heuristic Evaluation
Competitor Analysis
Concept Ideation
UI Design
Client communication
Visionready.org is a digital transformation marketplace. They provide women-owned, minority-owned, LGBTQ, and Veteran businesses with resources, thought leadership, and networking opportunities to thrive and succeed.
My team and I redesigned two pages of their website with the goal of driving customers to get certified.
The problem
The Vision Ready website does not clearly deliver their message fast enough for their viewers to understand, causing users to leave the site as fast as they arrived.
How might we clearly inform users about the company’s vision, demonstrate the value of SureCertify, and direct users to acquire certification from VisionReady?
Research
At first glance, a few key opportunities for improvement were identified. The performance and accessibility of the website was measured and we discovered that we needed to:
-
Simplify the design to minimize loading time. The website performance is very low with a specific Speed index 26.5 s.
-
Discard unnecessary elements that could distract the user. There is a lot of repetitive and confusing content.
-
Adjust the color palette to accessibility standards. Contrast, typography and elements are not consistent.
UX
Deliverables
-
Heuristic evaluation of the pages,
-
Proto-persona,
-
Competitor analysis,
-
and a Sitemap.
Areas for improvement
-
Communication
-
Accessibility,
-
and User friendly design.
Heuristic Evaluation
There are ten heuristic principles, and out of the 10, 4 were relevant to the pages we chose to redesign. We evaluated each page based on these four guidelines and rated them on a scale of 1 to 5.
Applied
Heuristic Principles
#4
Consistency and standards
"Users should not have to wonder whether different words, situations, or actions mean the same thing. Follow platform and industry conventions."
1. Visibility of Systems Status
2. Match Between System and the real world
4. Consistency and Standards
8. Aesthetic and minimalist design
#8
Aesthetic and minimalist design
"Interfaces should not contain information which is irrelevant or rarely needed. Every extra unit of information in an interface competes with the relevant units of information and diminishes their relative visibility."
Visionready.org was rated a 2/5 for principle 4 because:
-
It lacks consistency with their call to action buttons,
-
The toggles and shopping cart micro-interactions are unnecessary,
-
The typeface and sizing is inconsistent,
-
and there is no clear hierarchy.
Visionready.org was rated a 2/5 for principle 8 due to:
-
Repetitive content that can be condensed and placed in relevant pages found in the navigation bar, instead of taking up space on landing page.
-
The content needing to be synthesized and prioritized.
-
Competing elements.
-
The title looks like a button and the use of a rectangle distracts the user, it doesn't serve any purpose.
Completing a Heuristic Evaluation provided insight into how UI elements were being used and applied on visionready.org. It also gave our team a better understanding of the website to identify potential user pain points and perform a competitor analysis.
Persona
Due to time constraints, our team was unable to conduct formal user interviews, however, we created a proto - persona to help empathize with users and the issues they may face.
For example, our persona, Diane Roe is a first-time small business owner. She's determined to validate her business and connect with experts, leaders, and developed companies. However, she struggles to understand the certification process due to a large amount of information and legal terms she doesn’t comprehend.
She visits VisionReady.org to take advantage of the resources you offer but is met with a plethora of information and leaves the website feeling more confused.
Pain
Points
-
Frustration.
-
Overwhelmed by too much information.
-
Confusing language (ie; legal jargon.
Competitor Analysis
A competitive analysis was used to identify Vision Ready's strengths, weaknesses, opportunities, and threats compared to its competitors.
Strengths
Adequate font size.
Organized footer.
Weaknesses
Too much text.
Cluttered Appearance.
Lack of relevant information.
The competitive analysis provided insight into three problem areas that needed a little more love to improve the users' experience:
-
Communication; regarding the message vision ready.org is attempting to convey to users and the small visual cues that allow users to understand where they are on the website.
-
Accessibility; regarding the contrast between background and foreground colors, as well as the visibility between the text and background colors.
-
User-friendly design; pertaining to the overall ease the user has navigating through visionready.org.
Site Map
After reviewing the navigation bar on visionready.org, our team restructured the sitemap and made some changes.
-
The home option was removed and replaced by the “About Us” page to provide users with a quick and direct path to learn more about Vision Ready.
-
To help simplify the navigation, we removed duplicate pages under the "Business Mastery" tab and grouped it under one section, "Business incubator" tab, based on similar data.
-
An FAQ tab or frequently asked questions was added as an additional resource for users to learn more about the company.
Original Navigation bar for Visionready.org
Restructured Navigation bar for Visionready.org
Ideation process
A Free-form sketch was used to restructure the existent elements of the homepage. Exploring such things as the site architecture, the functionality, the organization, etc.
Inter
Inter is a variable font designed for computer screens.
Inter features a tall x-height to aid in readability of mixed-case and lower-case text. This choice was simple given the characteristics of the product.
Power.
Worldly.
The primary color palette consists of the original colors used on visionready.org in order to convey strength and trust to the user. Red stands for power and teal represents the world. Colors from the primary palette were reserved for actionable elements such call to action buttons, titles, and visual cues.
The secondary color palette was created to add contrast, depth and derived from the primary palette.
High Fidelity Designs
Landing page
Header
Reduced to one line including a search and language icon.
Search Icon
Additional option for user to quickly search for what they need.
Hero
Description
A brief description of the company added to immediately inform the user of the company's mission in those first few seconds of visiting the site.
Call to action Button
Unnecessary call to action buttons have been removed and replaced with one strategically placed captivating call to action button.
Other
Changes
-
Relevant images that reflect the message
-
More use of white space
-
A carousel to display info one at a time
-
Cards to help condense information
-
Use of icons as visual cues.
SureCertify Page
Use of Color
The color red is used in the header as a visual cue to signify to users where they are. The color gradient on the title is also consistent with the Landing page.
Layout
-
3 columns are used to demonstrate the differences between each type of certification.
-
Information is condensed and illustrated as a timeline.
-
The layout of content cards are consistent with the landing page.
Simple.
Clean.
Straight to
the point.
To Recap...
We implemented the following into our design to improve the way visionready.org communicates with its users:
-
Clear and concise statements to help express one unified message that correctly informs users of the company’s purpose.
-
Removal of repetitive information to declutter page and give it that minimal design.
-
Reduce the amount of content to avoid overwhelming the user with a plethora of information.
-
Restructure the navigation bar to create a simple, accessible pathway and help guide users exactly where they need to go.
-
We made changes to elements that communicated a different message than intended. i.e., call to action buttons
We adjusted a few essential aspects, including the color palette, the hierarchy of text, and typography, to make our designs more accessible. We reorganized the text of the site to keep the user engaged. This helps the reader quickly understand what to read and in what order. We also used icons, written content, and other visual elements to reinforce clear communication.
To make sure our redesigned pages were user friendly, we:
-
Simplified the page layouts to aim for a more minimal design.
-
We reduced the amount of redundant text which created space for relevant information with more breathing room, allowing it to be the focus of their corresponding section. Simple layouts are easier to read, navigate through, and less demanding of the user.
-
Removed unnecessary content that contributed to the cluttered appearance of the site including duplicate pages in the navigation bar and illustrations/elements that distracted the user.
In conclusion, as a result of the collaborative aspect of this project, I had the opportunity to work along fellow designers, sharpen my communication skills, and increase my creativity by listening to my colleagues ideas and observing their thought processes.
There is more work that can be done, however, with the implemented techniques and recommendations, we believe it’s heading in a more user-centered and reliable direction.
The purpose of this project was to provide solutions that tackle user pain points, tend to user needs, and follow the company's vision.
