how to start an llc
About the Project
Project Introduction
Howtostartanllc.com is a longstanding site that provides guides and resources to users who want to start their own LLC. The site is massive, numbering close to 10,000 pages that cover every aspect of LLC formation. The strategy behind the site lies in affiliate marketing; connecting users to the site’s affiliates.
The Challenge
When the site was first launched, it was fairly small and easily manageable. As content was added and the site became more popular, it quickly got out of control. The site had 124 components and of those, 39% were broken, out of date, or had not been maintained. This resulted in a poor user experience, poor conversions and dismal site performance. The site standards and systems were passed on verbally and changed often.
The Solution
The solution was to establish an all new design system. The site needed a system that would allow for the next 10,000 pages of growth, and be easily and efficiently maintained. That system should be clean, simple and allow for ease of onboarding. A clean, colorful UI adds to the user experience making it accessible and easy to navigate.
The System In Action
This is a scrollable mockup so you can see how the components work together, and how the site flows. Note that there is definitely Lorem Ipsum in this mockup.
Design system execution
Grid System & Layout
I established a grid system to give the site symmetry and a healthy amount of white space. Since this is a blog style site with few complex components, I chose a 6 column grid with a 20px gutter. This allows for internal columns easily divisible by 2 and 3. Establishing global spacing gives the pages consistency as well as helping users to quickly find what they need.
Additionally, I changed the content container to 730 pixels. Research shows that comfortable line length for users on a desktop is 50-75 characters so I used that data to size the container appropriately.
(Scott, E. (2022, May 10). Readability: The optimal line length – articles. Baymard Institute. https://baymard.com/blog/line-length-readability)
UI Foundations
I added a few subtle UI changes to modernize the site. Non-textual elements now feature slightly rounded corners and a gentle drop shadow.
Color
I established multiple color palettes to satisfy the needs of the site: primary, secondary and dark mode. The primary palette and primary color ramp are intended for all site-wide buttons, navigation and site elements. The secondary and dark mode palettes can be used in graphics, imagery, and one-off tool pages.
Typography
My parameters for a new typeface included readability, multiple weights for content hierarchy, and a bit of personality. After testing various options, I went with Work Sans - a readable, friendly font that scales beautifully between mobile and desktop.
Components & Elements
I reduced the number of components on the site from 124 to 12. This allows for more flexibility in building pages and also easier maintenance of those components. Each component has multiple layouts and were designed with multiple breakpoints in mind.
Calls to Action
Previously, there was one heavily used site CTA for all desired user interactions. Oftentimes, CTAs included unnecessary information and we found that users skipped over the CTAs entirely. I divided CTAs into three sections - affiliate, action and tips & callouts. This helps users to quickly find what is most useful or helpful to them.
Action - These CTAs point users toward action-oriented behaviors: visit this link, complete this task, read this article etc.
Affiliate - Primary and secondary affiliate CTAs direct users to site affiliates.
Tip & Callout - Tip & Callout CTAs help users with important advice, recommended reading, money-saving tips and more.
Buttons, Dropdowns and Icons (oh my)
These elements are intended to work seamlessly together, complete with guidelines for how they should be used for the best user experience.
This is just a small sample of the components and elements that are included with this design system. Although I anticipate more components to be created in the future, the emphasis should be on clean design, necessity and simplicity.