Sigma Website Redesign
Design Team
Roy Kim • UI Designer
Stephen Del Valle • Sr. Visual Designer
Siyuan Fan • Lead Product Designer
Heather Burt • Principal Designer, Brand
Julie Lemieux • VP of UX
Contributions
Design system
Website components
Iconography
Illustrations and visuals
Micro-interactions
timeline
6 months
Brief
Sigma Computing is a cloud-based, self-service analytics and business intelligence (A&BI) tool.
Redesigning the company website was an opportunity to revise information on product features, capture more leads through data on a new platform, and showcase company branding to build credibility and recognition.
This major project that pulled the efforts of design, marketing, and company execs together to overhaul of the user-experience, visual design, and content structure of our website.
Redesigning the company website was an opportunity to revise information on product features, capture more leads through data on a new platform, and showcase company branding to build credibility and recognition.
This major project that pulled the efforts of design, marketing, and company execs together to overhaul of the user-experience, visual design, and content structure of our website.
My contributions
Design system and UI components
I constructed a core design system containing typography, colors, components, and other styling specifications that cohesively represented Sigma's brand.
Icon library and product illustrations
I designed informative and attention-grabbing visual assets that complemented the content and brand direction of the website.
Post-launch visual updates
This includes a homepage update to optimize SEO and construction of illustrations and components. This included in-product components that funneled users to the website for additional resources that was relevant.
The problem
As Sigma’s product and marketing efforts continued to expand, the constraints of content generation on the Wordpress platform also became more restrictive. A website refresh was a chance to update the company’s brand impression and reorganize how we displayed key information.
We received user and stakeholder feedback that the current website’s branding concepts felt disjointed from Sigma’s product. The layout composition felt sloppy, the text was heavy and hard to scan, and many visual assets, such as screenshots, illustrations, and icons, lacked a consistent brand style that was memorable.
We received user and stakeholder feedback that the current website’s branding concepts felt disjointed from Sigma’s product. The layout composition felt sloppy, the text was heavy and hard to scan, and many visual assets, such as screenshots, illustrations, and icons, lacked a consistent brand style that was memorable.
A quick browse through three select pages of the old website before Nov 2022.
Design objectives
Create a comprehensive design system with UI components and patterns that utilizes our existing brand/product colors to create visual consistency across the site.
Revise the website with visually captivating and meaningful product illustrations and icons that harmonized with the content of the website.
Optimize design so that website felt fluid to all platforms, accessible for all visitors, and scalable for future designers/developers to update with ease.
collaborative strategy
Crafting the building blocks
Design like crazy — supa fast!
I designed rough wireframes for 5 core pages in grayscale. Working with my senior colleague, Stephen, we intended to experiment with typeface sizes, hierarchy configurations, and image blocks so that everything appeared optically balanced.
We utilized a 12-column grid desktop breakpoint, which focused on page composition and layout explorations.
Receiving design system buy-in saves time (and headaches later!)
Using these mockups as a stage for testing, we eventually received approval on using Lato as our brand's typeface and selected a vibrant indigo as our primary CTA color.
With the typography dialed in, the design system was developed further using existing brand/neutral colors as a foundation. These new components consisted of headers, text blocks, input fields, buttons, and basic cards.
With the typography dialed in, the design system was developed further using existing brand/neutral colors as a foundation. These new components consisted of headers, text blocks, input fields, buttons, and basic cards.
design focus 1
Homepage: First impressions are everything
The problem: it's not a good impression
The homepage serves as the first (and possibly only) chance to introduce key information about its features. However, there was also a lack of engaging visual content and links below the hero section that prompted visitors to explore the website further.
The old Sigma homepage, which had a inconsistent grid alignment and weak supporting content.
Hero section: be informative, but not all at once
During our discussions with stakeholders, Stephen and I pushed to lean away from information overload in the homepage but instead entice the visitor with Sigma’s UI and features instead. We agreed that many users tend to scan the homepage, and too much text could lose precious seconds of capturing a viewer’s attention.
Content section: testimonials through customer case-studies
Underneath the hero section, stakeholders wanted to demonstrate how our existing customers use our product and the impact it has made for their business. This challenge was balancing information density with visual storytelling; we wanted it to respond well to various lengths of text while keeping also the content brief, scannable, and easy to follow.
design focus 2
Distilling complex concepts into engaging imagery
The problem: current visuals lacked meaningful impact and missed brand opportunity
Imagery across the website didn't have a cohesive illustrative style that adhered to the brand. They were uninteresting, unexpressive, and feel short of being purposeful in visual storytelling.
Refreshed icons became influential to Sigma’s future branding
First, we started small and addressed our objective of creating branding cohesion between the website and product. I borrowed this opacity-based style from the product's icon library. Standardized at 32x32 px, icon were designed in grayscale first to test optical contrast before adding color.
Read how I designed Sigma's new icon library!
Interactive Demo
Follow the Data
Product Documentation
Security
News
Administer and govern
Adding informative, minimal and elegant illustrations
For the product illustrations, pixel-perfect UI components of Sigma’s features were recreated in Figma to accurately capture the product experience as realistically as possible. We employed visual hierarchy conventions to strategically emphasize or downplay certain UI elements that we deemed more or less important to the content’s main idea.
Challenges & constraints
Frequent disruptions were very common
Content direction would often change due to decisions made by stakeholders. Though it sometimes felt regressive, the iterative process brought forth the best possible options to utilize.
“That's... a lot of text.”
I sometimes found myself in a position of copywriters because the provided content would be much too dense after implementing it in our design. Revisions and compromises were made to shorten text alongside our content writers.
Color usage felt constrained in context
Sigma’s branding colors were finalized a year prior to this redesign. As we experimented with color combinations, Stephen and I realized that many of them did not work well together in our design tests.
handoff
Proactive responsive design efforts streamlined development
Synthesizing smaller breakpoints
As stakeholders reviewed our designs, we wasted no time in preparing the groundwork for handoff for our developers. We prepared breakpoint layouts for every page to streamline this process. Auto-layout made this process very easy.
Refining component responsiveness
Our column grid system paid off here since it provided a guide on how we proportionally scaled UI elements within our page composition.
Micro-interactions added the cherry on top
I continued to add updates to the design system to enhance the component states. This helped improve the clarity of interactive feedback.
launch and results
Ship it (but tread lightly)!
Quick feedback, quick fixes
The website was soft-launched in mid-Nov 2022. Colleagues across the company provided us feedback in order resolve bugs, fix typos, and dial in the design.
A revamped online presence
The widespread treatment of colors and visual design as well as the functional experience and content of the site was highly praised by our stakeholders and fellow coworkers.
It was a modernized facelift that our brand needed for 2023 and something Sigma-nauts were proud of when sharing our domain.
It was a modernized facelift that our brand needed for 2023 and something Sigma-nauts were proud of when sharing our domain.
Since launch (q4 2022)...
79%
in organic traffic
48%
in unique visitors
More projects
