Workfolio Microsites

PRODUCT DESIGN

Workfolio Microsites is an application designed to give organizations everything they need to pitch new business to clients and prospects. The platform features a website builder that allows businesses to create client-branded sites.

The project was to design the UI for the Workfolio Microsites platform, both the front-end and admin side. This included a main dashboard page, insights page, admin tools, and website builder.

A conceptual organization was used as the main demo for potential clients.

TOOLS

Figma, Adobe Illustrator

TIMELINE

Late 2022- October 2023

The Challenge

The challenge was to create a product from scratch that featured a [microsite] website builder and analytics tool. Research was done to learn what existing website builders such as Squarespace, Wix, and Webflow use. After extensive user testing, we found that these examples were often too complicated and detailed. We wanted to create a more simplified website-building experience for our users who are not super tech-savvy.

Sitemap

Once we decided which features we wanted to incorporate into the Microsites product, I created a basic sitemap to better understand the flow of the pages we wanted to include. The homepage will be a dashboard where the user can view all content at a glance. The next level would be the user profile page, list of Microsites created, list of clients/members/teams, a media library, and settings/account info.

Wireframes

The next step was to create wireframes to get a better sense of how the pages would look and function. I mocked up the overall user flow from the Sign Up page to the admin pages.

User Persona and Testing

It is important to keep your target audience in mind when creating a product. Who will use your product and how will they use it?

Our target audience for user testing was consulting agencies because they collaborate with different clients. These consultants want to present their projects and pitch decks on a microsite. Workfolio teamed up with Reed Group to run user tests. Their team was given access to the product and they provided my team feedback as they added content using the website builder. It was vital to understand how this user persona will use the Microsites product. This influenced the overall UI design.

The Design

The most complex pages to design were the dashboard and insights pages. On the dashboard, the user can see all of their info at a glance including the most recent microsite they are working on, a step-by-step guide, and tips. The Insights page (powered by Google Analytics) displays helpful analytics such as the number of visits or traffic to the site, the number of visitors, and the number of visits by location. This helps users get a better understanding of how well their microsites are performing.

My Profile

Users can edit their profile pages on the admin side. They can add a profile photo, their name and job title, tags, a summary section, other sections, contact info, videos, images, files, case studies, and more.

Members

You can view all members or sort by organization-specific members. Both the avatar photo and the company the member works at are displayed on the member cards. You can also see other info such as name, job title, company, location, tags, and how many Microsites each member is featured on.

Microsites

On the admin side, you can also see a list of Microsites you’ve worked on. The Microsites are displayed as card with a thumbnail preview of the hero, the Microsite title, the client or company, and members that collaborated on the project. Metadata includes any tags, who created the Microsite, the date it was last updated, as well as insights/stats at the very bottom. There are also statuses that show whether the Microsite is in draft mode, archived, or active.

Editing Experience

Users can add, edit, and delete pages and sections to their Mircosites. I designed page and section types that users can use as a starting point. They also have the option to start from scratch. These will add placeholder-like templates to the Microsite and users can make changes from there. These custom sections include different numbers of columns for text blocks, documents, sliders, image galleries, videos, and more.

Overview

This video shows a user navigating through Workfolio Microsite’s admin portal. The user can view and edit their profiles, create and manage microsites, view the clients they are working with, create teams, view insights on the microsites they’ve created, and more. They also have access to their account settings and make changes on the back end of the product.

Content Library

In addition to the Dashboard and Insights page, another important feature to include in the Microsites product is a content library page. This page would host all of the images, videos, and files users have uploaded to Microsites. They can quickly access these assets and create collections to sort them into groups by category.

Mobile Experience

A mobile application for Workfolio Microsites is in the works and is expected to be released by the end of the year. I designed a responsive solution that was implemented for current customers.

View Prototype

Branded Microsites

The user can create different branded microsites with their logo, accent colors, and images. Workfolio Microsites also offers different hero templates so clients can achieve different looks/styles. The results are endless.

Featured Partners

Users can create dedicated profile pages to showcase the organizations they partner with on projects. I designed some templates to show the different sections that can be featured on the partners pages.

Microsites Workflow

The UI is simple and user-friendly. Everything you need to create stunning microsites is in the admin portal. You can view all the microsites you’ve created and edit them using the website builder which allows you to add pages and sections. The end result is a well-designed website that is custom to your brand.