A redesign of the Blue Ashva Capital website, and an accessibility audit of the site after launch.
Blue Ashva Capital is an Indian investment firm that works in venture capital and private credit. The work covered an audit of the existing site, a written set of recommendations, the content for ten pages, the redesign and the build, and an accessibility audit carried out with a screen reader once the site was live.
Visit blueashvacapital.com
- Status
- Live client website
- Role
- Design lead
- Scope
- Audit, IA, content, UI
- Build
- Framer with CMS
- Evidence
- Live site + WCAG audit
01The existing site
The site already contained the firm’s position. The page gave every element the same weight, so it was difficult to read.
Blue Ashva Capital works in venture capital and private credit. The firm's position, which is that it backs deep technology companies through the stage at which most capital stops, was already written on the site, but it was difficult to find. The navigation held eight links of equal weight, so the pitch action had no more prominence than any other item. The portfolio was shown as a grid of logos with a single category label and no description. Seventeen sector tags ran in one row and overflowed the page on both sides. Section headings were all set at weight 700, body text was about 15px at a line height of 1.4 to 1.5, and capitals were used in the navigation, the labels and the buttons at the same time. The work required was structural and typographic rather than editorial.
- ·Eight top level navigation links, with the pitch action given no more prominence than any other item
- ·A portfolio shown as logos with a category label and no description
- ·Seventeen sector tags in one flat row, overflowing the page on both sides
- ·Every section heading set at weight 700
- ·Body text at about 15px on a line height of 1.4 to 1.5
- ·Capitals used in the navigation, the labels and the buttons at the same time
02Before and after
Each pair below holds one complete section of the site, before and after, at its full height. Nothing is cropped.
03Navigation
With every item weighted equally, the pitch action competed with seven others, and the bar wrapped onto a second line on smaller screens.
- Invest
- Venture Capital, Private Credit
- Company
- Our Story, Team, Portfolio, Insights
04Type and spacing
The recommendations were written as values rather than as descriptions, so that the build did not have to interpret them.
| Property | Before | After |
|---|---|---|
| Section heading weight | 700 | 500 |
| H1 size | 64 to 80px | 52 to 56px |
| H2 size | competing with H1 | 36 to 40px |
| Body size | about 15px | 16 to 17px |
| Body line height | 1.4 to 1.5 | 1.7 to 1.8 |
| Capitals | navigation, labels and buttons | section labels only |
| Section padding | uneven | 100 to 120px |
05Key decisions
Reduce the navigation from eight links to five
Venture Capital and Private Credit were grouped under an Invest menu. Our Story, Team, Portfolio and Insights were grouped under a Company menu. Home, Contact and Pitch to Us remained at the top level. This leaves the pitch action as the only coloured item in the bar, and the navigation no longer wraps onto a second line on smaller screens.
Add a description to every portfolio company
A logo identifies a company only to a reader who already recognises it. Each card now carries a short description of what the company does, such as space hardware, phase change materials or second generation biofuels, so that a founder can understand the type of business the firm backs.
Move the sector tags into a section that explains them
The seventeen tags were taken out of the general page flow and placed in a separate section with an overline, a heading and two sentences describing the areas the firm invests in. The tags are grouped rather than run together in a single row.
Reduce the heading weights and open the spacing
Section heading weight was reduced from 700 to 500, and the H1 was reduced from a range of 64 to 80px down to 52 to 56px. Body text was set at 16 to 17px with a line height of 1.7 to 1.8. Capitals were limited to section labels only. Section padding was standardised at 100 to 120px at the top and bottom of each section.
Specify the motion, and allow it to be turned off
Sections fade in over about 0.4 seconds with a short upward movement as they enter the viewport, with a stagger of about 0.1 seconds within a group. Content above the fold does not animate, nothing loops, and the data visuals are left static. All animation is disabled when the reduced motion setting is enabled in the operating system.
Write the page content before designing the pages
A content reference was written for all ten pages, including a new Group page that sits above the Capital site. Deciding what each page had to say first made the layouts easier to settle. Once each portfolio company had a description, the structure of the card followed from it.
Test the site with a screen reader after launch
The live site was tested with NVDA in Chrome against WCAG 2.1 Level AA. Each finding was recorded with the page, the success criterion, the user groups affected, a screenshot and the markup required to fix it.
06The accessibility audit
Once the site was live it was tested with NVDA in Chrome against WCAG 2.1 Level AA. Sixteen findings were recorded on the Capital site and nine on the group’s Blueprint Ecosys fund site. Each finding was recorded with the page, the success criterion it fails, the user groups it affects, a screenshot and the markup required to fix it.
| Page | WCAG | Finding | Affects |
|---|---|---|---|
| Home | 2.4.1 | No skip to main content link | Mobility |
| Home | 2.4.1 | Main landmark not defined | Blind, Mobility |
| Home | 1.1.1 | Logo alt text reads Icon | Blind |
| Home | 1.1.1 | Alt text applied to decorative icons | Blind |
| Home | 1.1.1 | Portfolio logos missing alt text | Blind |
| Home | 2.4.4 | Link text Group is not descriptive | Blind, Cognitive |
| Home | 4.1.2 | Active navigation link not identified | Blind |
| Home | 1.3.1 | Navigation not marked up as a list | Blind |
| Home | 1.3.1 | Section titles styled but not marked as headings | Blind |
| Home | 1.3.1 | h5 used for higher level headings | Blind |
| Home | 1.4.3 | Standard text below 4.5:1 contrast | Low vision |
| Home | 1.4.10 | Portfolio content cut off on reflow | Low vision |
| Home | 1.4.12 | Portfolio content cut off with text spacing applied | Low vision |
| Venture Capital | 2.4.2 | Identical page title used across every page | Blind |
| Our Team | 1.3.1 | Team links not marked up as a list | Blind |
| Pitch | 3.3.2 | No instruction explaining the required field asterisk | Blind, Cognitive |
- ✓Descriptive link text. Group is now View Group Details
- ✓A main landmark on every page
- ✓aria-current on the active navigation link
- ✓A unique, page specific title on every page
- ✓Correct alt text on the logo, and none on decorative icons
- ✓Heading levels corrected
- ·The skip link is present but does not yet target the main content
- ·The primary navigation is still not marked up as a list
These two items are recorded here because they have not been fixed yet.
07The pages
Five of the ten pages, each shown end to end at its full length.
08Handover
The client needed to be able to update the site without a designer.
The site is built in Framer. The parts that change most often, which are the team, the portfolio companies and the insights posts, are held in CMS collections rather than in the layout, so adding a new team member or a new portfolio company is a matter of filling in fields and publishing. The project was handed over with a written management guide covering the editor, the collections, adding and editing items, drafts and published items, and publishing changes to the live site.
- TeamName, title, photo, LinkedIn, order
- PortfolioCompany, sector, description, logo, instrument
- InsightsTitle, slug, cover, body, date
09Outcome
The site is live at blueashvacapital.com. It has ten pages across the Capital site and a new Group page above it, and the firm can publish updates to it directly.
The accessibility audit recorded sixteen findings on the Capital site and nine on the group’s Blueprint Ecosys fund site, each mapped to a success criterion.
Most have since been closed on the live site, including descriptive link text, the main landmark, aria-current on the active navigation link, unique page titles, corrected alt text and corrected heading levels. Two remain partly open. The skip link is present but does not yet target the main content, and the primary navigation is still not marked up as a list.
10What I learned
- Most of the improvement came from removing elements rather than adding them. Fewer navigation items, fewer heading weights and fewer competing type sizes accounted for more of the change than any new component.
- Writing the content first made the design decisions easier. Once each portfolio company had a description to carry, the card layout was straightforward to settle.
- Recommendations are more useful when they carry values. Stating the exact weight, line height, size and padding removed the need for interpretation during the build.
- Testing after launch found problems that a design review could not. Skip links, list markup and heading levels are only apparent when the page is read with a screen reader.
