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.
Duration
10 weeks
Team
General Manger
Front End Developer
UIUX Designer
Role
UIUX Designer
Tools
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.
Understand
- Gather requirements from stakeholders
- User research
- Business benchmark
Define
- User story
- User persona
- MVP scope
- 2B & 2C tasks
Ideation
- MVP prioriotization
- Wireframe
Design
- Key task flow
- Key decisions
- Prototype
- Design reviews
Literation
- Feedback from stakeholders and users
- Technological benchmark
Delivery
- 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.
Nomenclature
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
.svg)
Secondary color
Mobile UI Components
Typography
