Tracey shi— visual experience Designer
Selected Works

Project Overview

Redesigned and built new website for Boyle Software, Inc, as the company is pivoting and exploring new avenues of operations. They are in need of a new site that contains their most up to date projects and new services.
The updated website aims to reflect the changing bossiness landscape of  BSI,  through a completely visual refresh, with implemented SEO strategies which encourages more engagements with users.


10 weeks


General Manger

Front End Developer

UIUX Designer


UIUX Designer


Figma, CMS

My Role

My responsibility include auditing the original website, analyzing SEO search via google analytics. wire framing and prototyping new interface for the website, and building CMS pages.

Quick Audit

I performed a quick audit through their original website, and complied a list of issues that need to be addressed with top priority, such as broken links, lack of content hierarchy, and outdated visual.

  • Gather requirements from stakeholders
  • User research
  • Business benchmark
  • User story
  • User persona
  • MVP scope
  • 2B & 2C tasks
  • MVP prioriotization
  • Wireframe
  • Key task flow
  • Key decisions
  • Prototype
  • Design reviews
  • Feedback from stakeholders and users
  • Technological benchmark
  • User persona
  • MVP task flow for 2B and 2C POS
  • Interactive Prototype
  • Documentation

Cleaning up Information Hierarchy

To clear up some confusion in the navigation menu and disorganized content structure, I worked with the manager to identify the key requirements for the website,  reconfiguring the information hierachy within each title. Here are the ground rules we established for the re-naming.

  • Keep naming conventions consistent, make sure it follows the either the subject (noun) or verb.

  • Keep navigation menu simple. Non MVP menu can be found on the sitemap around footer or somewhere on the page - remove Blog from original navigation.

  • Avoid having nested nav within each item. Due to the simplicity of the site, there should not be drop down menu for individual nav item on home page.

  • MVP navigation item is color coded - Service in Green, and Work in Blue, as contingent to the original logo but with a modern visual refresh.

  • "Blog" is completely removed from the main navigation as discussed in the meeting with PM, that it distracts users from activaly exploring and engaging with the rest of the site.

Updated sitemap
Navigation + Footer before
Updated Navigation + Footer

Visual Refresh

To highlight the MVP times for search, we used the color Green and Blue as the primary indicators for Service and Work, respectively. These two colors are used in other places where these two areas are mentioned, to provide a consistent visual cue for users to navigate to the information BSI is looking to showcase.

Logo Studies
Favicon Icon Studies
UI Components
Primary color
Secondary color
Mobile UI Components