Stakeholders: The re-imagining of tibco.com was an initiative driven by upper management and I was the sole visual designer working on the ui of the site for this project, and I cross-collaborated with the VP of Web properties, the Lead Developer, the Front-end Developer, the UX Designer, product marketing teams, human resources, legal, and the professional services group.
Problem: While our enterprise site needed an overhaul, as it wasn’t mobile responsive, our main reason for the redesign was driven by a hard need to migrate from our CMS developer before the contract end date. We had a very limited timeline to plan and complete the launch.
In six months, our team architected, wireframed, designed, and formatted images for a 1500-page enterprise website for a billion-dollar software company in Drupal from scratch. Today it’s a 22,000-page site.
Working with the UX designer, VP of web, front end developer and back end developer, we determined the information architecture of the site, the minimum pages we needed for launch, and decided that we needed:
Home page
Product page template
Category landing template
Solutions page template
Customer landing page
Customer Page template
Resources listing page
Events landing page
A modular component template for other content types
A minimal text page template for things like press releases
We stacked hands on a 12-column Foundations grid and the UX designer began wireframing. With Adobe launching XD, I suggested we take the opportunity since we were starting from scratch, to learn XD as a team and build our new templates within XD. at the time XDwas free so the UX designer and web developers didn’t require a creative cloud seat to download.
Since our website analytics showed low mobile traffic, we approached the design from desktop-first mentality and then reviewed every breakpoint. We focused heavily on typography so naturally paragraph styles were a significant portion of our site. Since our content writers tended to be content heavy, we took special care on the typesetting on all breakpoints.
Once our type styles were established, we dove into the product templates. We chose these first as they would be the bulk of our site on launch, and direction from management had us leaning into a product-focused architecture. The UX designer and I iterated.
While each product page would have the same structure and follow the same format, to allow for easier creation of the pages, they would accommodate a range of image types under the benefits section, and be flexible in the number of benefits, capabilities, and customers shown.
While the UX Designer hoped to showcase product screenshots, I suggested adding an option for 100%-width images that would be used for products that didn't have viable screenshots or supporting diagrams. These would be used in the top half of the site for the benefits sections. For the capabilities section I created an icon grid and determined the stroke style and color to maintain consistency across the site. While I didn't design most of the icons—the bulk of which were designed by our Senior Visual Designer Nayoung Kim, the grid and style I created allowed other designers on our team to help us add to the library.
I chose a dark grey instead of a black, that would be consistent with our diagrams and text colors. The tone provided enough contrast but still allowed for warmth. I set the stroke width at 2px, and slightly rounded corners so that the strokes would be visible enough at the set size, but thin enough that when scaled down wouldn't be too thick.
Other sections of the site were determined by the same methodical process, meeting with each stakeholder group as we approached their sections using our “advanced” template—a modular template that was based on the product page styles, but had additional modules that could be mixed and matched. The UX designer worked out the content types and wireframed, after which I would mock up using existing paragraph styles and components and designing new ones where needed.
Last, we designed the homepage, since that was more of a one-off design and didn’t need to be as modular. Content was dictated by the Web VP and some Executive Leadership Team members. The UX designer and I worked on multiple iterations with the ELT until we received final approval.
Once all the designs were approved, I worked with the content owners to determine who owned each page from a content perspective, and then I created a spreadsheet to track the supporting images needed for each page.
I published an image guide to share the various options we had for the product pages. If screenshots were required for a product page, I worked with the product marketing manager to secure screenshots and included a page explaining the best way to take product screenshots in the image guide.
I formatted most of the images, but I also enlisted the help of my design team to help with some of the sections, training them on the template. I created a Photoshop template, marking areas that would get cut off on the browser resizing.
In six months, our team architected, wireframed, designed, and formatted images for a 1500-page enterprise website for a billion-dollar software company in Drupal from scratch. Today it’s a 22,000-page site.