Web UX, UI
Client: Intel AI
Objective: Lead design discussions and implementation to enhance usability.
Role: UX, UI, Visual Design
Programs used: Sketch, Photoshop, Illustrator, InDesign, Zeplin
There’s Always a Beginning
The first version of our site was adapted to a stock wordpress theme. We found over time there wasn’t enough customization for us to properly create a dynamic site with the resources for developers to easily navigate. The site had to grow with our user base, meaning less hands of work and more automation.
Strategy
I managed the site migration by revisiting our sitemap and cataloging all our existing assets with the assistance of Drive, a design firm. A thorough site audit was required to identify what’s currently working and what we can improve on. By creating user profiles for 4 main audience types we focused on their importance, wants, and roles.
User Profiles
Our team needed to answer various questions in order to find the proper direction for each key user. These are a few of the questions/answers we came up with.
What should CTOs know about Intel AI? Intel offers the most comprehensive portfolio of technologies and expertise designed to solve their business problems.
What do we want infrastructure architects to know about Intel AI? Intel offers the most comprehensive portfolio of technologies and expertise to solve their business problems.
What would make a data scientist’s job/life easier with regard to AI? They want a solution that gets them up and running faster. They benefit from research and models that drive the industry forward and make their life easier. (Copying and pasting code as an example.)
What do we need application developers to know about Intel AI? Intel Architecture offers amazing inference performance to provide production AI solutions improved time to decision.
Site Audit
Together with Drive we had a few in person brain storming sessions to identify multiple areas of the site that could be improved on. A large emphasis was placed on story telling. We needed to structure the site differently to improve the flow for each key user.
Site Map
After thoroughly going through our older site I put together a sitemap. I was able to identify groups of content to be categorized for easier navigation. The information architecture was important to me in this revision. During this process other key pages were addressed and added to the sitemap. One large page category we wanted to add was a library system for blogs, videos, white pages, podcasts, and news.
The Framework
Once we had a vision of what our site would be we needed to organize it’s growth. Our site had a large team, each person doing something extremely different. Marketing, social, developers, content creators, and other business units.
User Friendly Backend
New content was constantly being added through blogs, research papers, white papers, videos, podcasts, events, and individual pages. We needed a way to track our process and stream line pages that fit within our customized wordpress theme but still felt engaging. I created overviews for each container and basic templates. This allowed others to understand what our CMS system was capable of.
Backend Tracking System
We found the incoming requests to our marketing team was growing, so a tracking system was necessary. I designed the initial version of our tracking system with the tool Jira. Interviews with each one of our team members and other Intel employee who normally come to us with requests were conducted. From there we put together a submission process that allowed us to seamlessly hand off to each other and easily organize all future projects. We could also run statistic on how efficiently we were able to complete each request.
Developer Inclusion
My experience with coding allows me to handoff design work to developers with little confusion. By speaking the same “language”, redlines give me the ability to highlight key coding decisions.
User interviews helped us pinpoint areas to improve.
After 6 months of being live, every page was reviewed and a strategy was created based on user data through Adobe Analytics. Changing the position of elements on pages, function of buttons, and the automated backend automation increased engagement and time on page. We also wanted to adjust the focus each user was giving to the pages. Sometimes simply adding CTA buttons for call outs were sufficient. In Sketch I created wireframes and final versions with redlines (for developer notes). This allowed decision makers an easier visual representation of what changes we wanted for final budget sign offs.
More Containers
Redlines were created for developer communication. We also used Zeplin to portray exact design decisions I made.
Stylized Tables
I wanted to maintain a consistent look and feel based off our theme. Our developers then created CSS styles based off the design.
Web Style Guide
At times we had 5-7 developers working on our site. Providing a style guide of colors and font usage helps everyone stay on the same page. Any variation of color or size can ruin the cohesiveness of a site. I wanted to avoid any off-style decisions to be made so every page felt unified through design.