Jon Graft's profile

User Experience Team Site & Resources

UX Home Page
The UX team's home page.
The User Experience homepage serves three purposes:

1.  Educate the user on what the UX Team does.  It explains the UX process, shares example deliverables for each step, and what the team will leave you with.  The UX team acts as an agency within the company, so we supply handoff materials.

2.  Easy access to the standard documentation for our 3 unique platforms as well as our Workflow Library.

3.  Ways to interact with the UX Team. If a team is unable to acquire our services for an extended period of team there are additional ways to receive help.  The team offers 30 minute design reviews upon request, hosts a weekly educational live stream, and has dedicated Microsoft Teams and Yammer communities.
Platform documentation sites
A portion of the Bentley Web Components Button standard.
Each platform has it's own documentation site.  Each platform has it's own unique icon & branding colors to help differentiate the sites.  The organization is slightly different between all three platform sites, but the general sections are:
- Patterns
- Styles
- Components
- Layouts

Each component page typically has the following parts to be considered an approved standard:
- Basic info
    - Title
    - Banner image
    - Short description (displays in search results)
- Appearance documentation
    - Embedded Axure prototype demo
    - Specifications (within Axure, within a photo, or a link to Zeplin mockup)
- Usage guidelines
- Related materials
    - Code snippets
    - Similar standards
- Embedded Yammer discussion

One of the most important parts of this site is that it is easily edited and maintained by designers.  The website that was used previously was built and maintained by a developer. Once that developer left the company no designer was able to update the site.  The new websites use Jekyll and Kramdown which has been easy for our design teams to learn and use. We also utilize Azure DevOps to track our teams assignments & standards progress, host our websites repository, and build our site as new content is published.



Icon Database
A portion of the icon database site.
The icon database site (which is still a WIP as I am writing this) gives users a dead simple way to browse, search, view, and download any of our 5,000+ icons the Visual UX Team has exported into ICO, SVG, or PNG format.  PNG and SVG icons are typically identical in design, so both are included as download options at the bottom of the card.  This site was built in collaboration with our company's developers using React and Typescript.  The contents of the site can still easily be updated similar to our Platform Documentation Sites, but our access is limited.
Workflow Library
A sample persona on the Workflows library.
The Workflows Library hosts all of the company's personas, industries, scenarios, workflows, and associated files.  Because each section has it's own unique needs, each section has a different layout.  Each section has strong interlinking between related pages as seen at the bottom of the example above.

The Workflows Library is built using the same framework as the Platform Documentation Sites, but the information is displayed and organized differently.  This means it is very easy for any UX designer to easily maintain the site without the need for a developer.
Extras
These new, easily maintainable & easily accessible sites were a highly requested item for years.  To celebrate the occasion, I created a short video trailer video.
User Experience Team Site & Resources
Published:

User Experience Team Site & Resources

The User Experience homepage & resources that the team provides in an easily maintained package.

Published: