top of page

Vision Ready

Vision Steady

Website Visual Redesign

My Role

Client Coordinator


UI Designer





2x UI Designers


2 weeks

Research 1 week

UI 1 week

My Contributions

Heuristic Evaluation

Competitor Analysis

Concept Ideation

UI Design

Client communication 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?


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.

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

Heuristic Principles
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

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." 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. 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 It also gave our team a better understanding of the website to identify potential user pain points and perform a competitor analysis.


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 to take advantage of the resources you offer but is met with a plethora of information and leaves the website feeling more confused.

Vision ready - proto Persona.png
  • 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.


Adequate font size.
Organized footer.


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:

  1. Communication; regarding the message vision is attempting to convey to users and the small visual cues that allow users to understand where they are on the website.

  2. Accessibility; regarding the contrast between background and foreground colors, as well as the visibility between the text and background colors.

  3. User-friendly design; pertaining to the overall ease the user has navigating through

Competitive Analysis.png

Site Map

After reviewing the navigation bar on, our team restructured the sitemap and made some changes.

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

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

  3. An FAQ tab or frequently asked questions was added as an additional resource for users to learn more about the company.

original sitemap.png

Original Navigation bar for


Restructured Navigation bar for

Ideation process

Initial sketch VR.png

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.

Frame 9.png

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.


The primary color palette consists of the original colors used on 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

Home - VisionReady - FINAL DESIGN.png
VR landing page prototype.gif

Reduced to one line including a search and language icon.

Search Icon

Additional option for user to quickly search for what they need.


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.

  • 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

VR surecertify prototype.gif
SureCertify Page - DESIGN.jpg
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.

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


Group 5361.png



Straight to
the point.

To Recap...

We implemented the following into our design to improve the way communicates with its users:

  1. Clear and concise statements to help express one unified message that correctly informs users of the company’s purpose.

  2. Removal of repetitive information to declutter page and give it that minimal design.

  3. Reduce the amount of content  to avoid overwhelming the user with a plethora of information.

  4. Restructure the navigation bar to create a simple, accessible pathway and help guide users exactly where they need to go.

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

Screen Shot 2022-04-14 at 3.52.39 PM.png

Thank you so much for your hard work!
I love the simplicity of it!

Petula Sankarsingh
CEO & Founder

bottom of page