Align Virtual Studio Website Design
Align Virtual Studio is a new Squarespace design company that sells templates and custom Squarespace sites. Through market research, interviews, and UX Design principles, I created a design that attracts their ideal clients.
The Problem
A new Squarespace design studio needed a small website of three pages created to attract clients and make sales.
The Solution
I used market research and interviews as my cornerstone for understanding the clientele, then relied on Heuristic Design standards and user feedback to create a site that solves the company’s problem.
Tools
Team
Figma
Voice Memos
UX Designer
Founder
My Role
Timeline
Overall: 6+ weeks
Discovery & Research: 2+ weeks
Design & testing: 4 weeks
UX Design
UX Research
Research
Market Research
Together with the founder, we researched other companies in the industry, focusing on what problems they’re solving and who they’re solving them for. We referenced the market research findings throughout the entire design process.
We compared five industry leaders
Most serve professionals with small, self-run businesses
Most primarily offer custom designs
Strengths:
- Great reputation
- Highly skilled team
- Wide variety of offers
Weaknesses:
- Primarily focuses on custom designs
- Expensive
Strengths:
- Simplified offerings
- Welcoming site
Weaknesses:
-Only creates templates for real estate agents
Strengths:
- Offers add-ons
- Offers courses
Weaknesses:
- High cost
- Examples of previous work look similar to one another
Strengths:
- Variety of offers
- SEO optimization included
Weaknesses:
- No guidance on which templates best serve different types of businesses
Interviews
I prepared an interview script with 21 open-ended questions, focusing on our target audience’s values, motivations, and needs. In seven days, I recruited and interviewed five users remotely. We referenced the user interview findings throughout the entire design process.
I interviewed five people with 21 open-ended questions.
We wanted to understand what the clients are looking for when considering their website needs and choosing a designer.
User Interview Insights
“I chose to hire a designer because I wanted a quality website without learning how to make a quality website myself.”
“The primary goals for my site are client acquisition and showcasing my work.”
“My highest priority for my website is that it looks good.”
“I hired a designer with pre-made templates, and chose my template because it already had colors that I like and a feel that I wanted on my site.”
“I chose a designer that offered templates because using a template made it so she had my website done in less than a month. A custom site would have taken longer.”
“I needed a beautiful website that was ready to use ASAP, and I knew I couldn’t do that on my own.”
Personas
I created three personas to represent the client’s ideal customers. They were based on user interviews and surveys, and I kept updating them throughout the project as I gathered more data. I used these personas whenever I wanted to step out of myself and reconsider my initial ideas.
The Brick and Mortar is the primary persona because it includes the most likely future clients.
Design
Task Flow
I created a task flow highlighting the site's primary function—selling a website design service based on a pre-designed template. The founder wanted the website to be as straightforward as possible, and this task flow shows how the design accomplished this goal by creating an easy-to-follow path.
Task Flow
Low Fidelity Wireframes
My low-fidelity wireframes were based on the initial user interviews, the business branding, and the heuristic evaluation of competitors. They each pointed to a simple, straightforward design with minor touches to indicate a modern website style and organization. I returned to the wireframes throughout the design process to ensure I didn’t lose sight of the site’s primary feel and organization.
I created two design ideas for each page and presented them to the founder so we could discuss the best ideas and decide on the final design together.
The main differences between the ideas were how information is communicated, with more or less emphasis on images or text.
Low Fidelity Wireframes
High Fidelity Wireframes
Using Figma, I translated my low-fidelity wireframes into high-fidelity wireframes so the founder could easily see what the design would look like. At this stage, the wireframes were defined enough for some user testing. Based on five tests, no alternations were made, and I moved on to creating high-fidelity prototypes.
A vital aspect of the design was to ensure that anyone visiting the site understands what Align Virtual Studio offers and can see a quick statement of the company’s credentials without having to scroll, delivered in a way that shows the warm and welcoming attitude the company wants to communicate. I accomplished this in the tablet and laptop view by highlighting a hero statement and including a short and informative paragraph below the hero.
High Fidelity Wireframes
Usability Testing
I created a fully functional, high-fidelity prototype of the new flows using Figma. At the same time, I started recruiting subjects for the test who fit the personas I created earlier in the project. I did five usability tests with only one notable issue.
Issue 01
Users wanted to see examples of more template pages.
Each template offers four pages, but the site only shows different home page sections. At this point, it was a business decision not to add more templates.
Positive Feedback:
“I like the flow of these pages.”
“I can easily find all of the important information.”
UI Kit
This site is designed for Squarespace, and the founder wants to use default settings for buttons, page spacing, and forms. This made a traditional UI kit unnecessary, so instead, I used the company’s existing branding to put the typography, colors, and logo into a file for easy access.
UI Kit
UI Design
My goal was to create a visual identity that aligns with the simple, modern, and soft feeling in their branding. I also checked the competition and dug deep into my catalog of references for inspiration.
Home Page
Templates
Evergreen Page
Contact
Next Steps
01
I would continue this project by adding more visuals of the various pages of the templates that are being sold.
02
I would continue user research by conducting follow-up interviews with the people who purchase templates or custom designs.
03
As more custom designs are created, I would make a page that features them to sell the product better.
Learnings
I improved the essential soft skills of working with a founder, such as effective communication via email and during meetings, establishing and agreeing on expectations in each stage of the process, and creating realistic timelines.
I have deepened my understanding of creating components and organization in Figma.