Vectorworks Design Scholarship Microsite Redesign

Overview

Vectorworks is a 3D design software company that serve the architecture, landscape, entertainment, and interior design industries.

The Vectorworks Design Scholarship is a global design competition for students in both undergraduate and graduate programs interested in pursuing one of the four industries mentioned above. The scholarship provides recognition and monetary aid to help students along their careers.

Problem

The Scholarship microsite has remained unchanged since its conception in 2014. Both the framework and UI are outdated, leading to a terrible and frustrating user experience. The application process is lengthy and led to high abandon rates.

The Vectorworks Design Scholarship microsite redesign consists of updating 5 pages:

1. Landing page
2. Application page
3. Resources page
4. Gallery page
5. Judges page

Project Goals

1. To increase and strengthen our academic presence through global competition that encourages students to submit their best work for monetary rewards and recognition
2. Increase submissions
3. Increase student download of Vectorworks software (free to students) / Sign up for Student Portal
4. Foster relationships that lead to more professional users

Our Solution

We designed a vibrant and playful microsite that speaks to designers and their creative processes while focusing on clarity, usefulness, and elegance. We made sure the information is clear to understand, easy to find, and helpful to students.

Live site here: https://www.vectorworks.net/scholarship

Users

The primary users are undergraduate and graduate students.

Roles & Responsibilities

The team consisted of:

• 2 designers (Patrick and Nick)
• 2 front-end developers (Alexis and Rodrigo)
• 2 backend developers (Timi and Sudil)
• 1 copywriter (Leslie)
• 1 social media marketer (Ishan),
• 1 project manager (Maggie).

I assisted the primary designer (Nick) with wireframing and visual design.

Nick’s role involved leading the design project, branding, wireframing, visual design, and prototyping.

My involvement decreased after we finished the landing page due to other work priorities.

Scope & Constraints

• February 2020 – April 2020: 3 months to finish final design for web development hand-off
• May 2020 – June 2020: 2 months to finish Web Development bug testing and launch
• Need to be cognizant of localization of languages and varying character lengths
• Although this project is about improving the user experience, the primary objective is the UI redesign. Common UX processes like user research and user testing were not implemented due to budget and timing constraints.

Process

Although presented as a linear process, the actual project was iterative in nature. There were bi-weekly team check ins to present ideas, receive feedback, and refine.

Here’s what we did:

1. Kickoff Meeting
2. Research, Brainstorm, Sketch Ideas (1 week)
3. High-Fidelity Wireframe (2-3 weeks)
4. Visual Design (7-8 weeks)

Kickoff Meeting

We met early February 2020 with the project manager and creative team to discuss project objectives, expectations, goals, timelines, and deliverables.

Research, Brainstorm, Sketch Ideas (1 week)

Nick and I first revisited the old scholarship website and reviewed the flow and application process, taking notes on what worked and did not work.

The old application process was tedious and lengthy. It consisted of a bloated basic information section, three essays, and a project submission submission. Information was hard to find and expectations were unknown.

Next, Nick and I split off to do our own ideation.

Before sketching ideas, I wanted to see if I could get any user feedback and research to further inform our designs.

Unfortunately, we did not collect that information last year and the project scope doesn’t allow for user research.

Luckily, our Data Analytics Manager had some Google Analytics available for us to use.

Here’s a summary of some interesting analytics:

• 24,396 total applications started
• Only 4,557 submitted the first section (basic information)
• Only 3,557 submitted the first section and project section
• Only 1,750 submitted the first section, project section, and the essay portion
• Finally, only ~ 1600 applications were considered completed
• Most viewed pages:
  • About page – 12,233 views
  • Application page – 9,173 views
  • Winners Gallery page – 3,364
  • Terms and Conditions (Rules and Legal page) – 1,252

Why was there a 93.44% drop from total applications started (24.3k) to final completed submissions (1.6k)?

Why were there lower views on the Winners Gallery page and Rules page?

We can’t know for sure because we didn’t collect any user feedback. So I did the next best thing and Googled the top reasons for scholarship application abandonment (in no particular order):

1. “I thought the deadline wasn’t the actual deadline” – Ignorance, Oblivious
2. “Scholarships are only for elite students.” – Insecurity, Lack of Confidence
3. “I don’t like being rejected.” – Insecurity, Fear
4. “There’s too much competition.” – Insecurity, Lack of Confidence
5. “The application takes too much time.” – Lazy
6. Procrastination
7. Not following instructions and submitting incomplete submissions
8. Never had the intention to apply – Curious
9. Confusing website – Technical frustrations
10. Forgot to apply

I thought this was a good starting point to use for the speculative journey map of our old scholarship process. The goal was to map intangible experiences and deeply think about other opportunities we could use to improve the designs.

After creating this document, I shared it with the design team and we went through the diagram together. Most of our project plan addresses the main issues we need to fix. Despite that, I wanted to see if we could come up with other helpful ideas.

I didn’t see much student support/ help in our old site. I thought it would align well with our goal to foster relationships if we created a section with valuable content.

This could include guides on how to make a design presentation, blogs, best practices from professionals, interviews from past winners, possible live FAQs, etc.

The idea is to go beyond offering prize awards and recognition. If we can generate increased value on this microsite, we may have an opportunity to see more students become interested in our company.

This would be beyond our current scope. But, it could be implemented in a future iteration.

After the discussion, I was ready to begin sketching my ideas.

My initial ideas focused on being fully transparent and inspirational. The information was compact; but, easy to find.

Option A: This idea uses past winners as the main imagery to motivate new applicants. This could address the fear and doubt discussed in the potential reasons for application abandonment.


Option B: This idea focuses on transparency and clarity. The “how to apply” and resources sections are clearly visible. The navigation on the side (desktop) provides quick and easy way finding.


Option C: This is resources page focused. Using past winners’ project imagery, I hoped to inspire action. The resources content would be playful and give users a clear next steps approach to tackling the application.


Option D: A card-based dashboard with important pages as their own card. When users click on the card, it expands to full page. This design keeps all the important information on one screen and reduces scrolling to a minimum initially.

• 

• 

• 

• 

• 

• 

High-Fidelity Wireframe (2-3 weeks)

After finishing up our sketches and low-fidelity wireframes, Nick and I met with the creative team first to solidify a direction.

We really liked Nick’s Wireframe (pictured below). It’s simple and clean, while offering all the information students need to succeed. The information is easily searchable and navigation is easy.

• 

• 

• 

• 

• 

Visual Design (7-8 weeks)

Once approved, we started working on wireframing the other pages.

To make sure we don’t have any confusion in our documents and design workflow, we implemented a version control system by naming our files with our names and version numbers. We created a shared Creative Cloud library and posted all our versions in there. For web hand-off, we created one master file that we would update.

Nick took the lead on branding and visual direction.

I experimented with typography and layout.

We were constantly communicating our ideas with each other and the web team to make sure designs were feasible. The bi-weekly team meetings also let us share our iterations and get valuable design feedback.

Below is an iteration with some initial branding ideas and typography treatment. We started thinking about localization, how shapes and color would work, and reusable components.

• 

• 

• 

• 

• 

• 

Below is a version with near completed branding and defined styles.

• 

• 

• 

• 

• 

• 

Unfortunately after we finished the landing page, I was reassigned to different work priorities. Nick finished up the designs and developer hand-off for the rest of the pages, including any updates and last minute edits to the landing page.

Outcomes & Results

The Vectorworks 2020 Scholarship redesign is live.

Applications starts in December 1, 2020, so there’s no way of knowing if we met our goals or not.

It will probably take until June or July 2021 before we can evaluate how well we did.

Lessons Learned

This was one of the first website projects I’ve had to work on and definitely took me out of my comfort zone. Here’s a list of things I’ve learned:

1. Consistent and frequent communication is crucial to success. I made sure to keep updating Nick and the web team on current design progress. We talked about design feasibility, challenges with a design decision, and other concerns beyond UI. We met bi-weekly with other team members to track progress, evaluate designs, and refine. This helped us iterate better designs each time.
2. Keep files neat and tidy. Early on, we learned that it would be a challenge to work on separate files. To avoid confusion, Nick and I adopted a version control system where we would have version numbers and author names. When passing files to web team, we made sure the Sketch files were properly labeled and organized. It took more effort; but, saved us a lot of time in the long run.
3. Work with what you’ve got. I was eager to apply UX knowledge from online courses into this project. But, constraints, time, and money are real issues that affect what we can or cannot do. I learned to be aware of real-world limitations and find work-arounds to solve our problems.

Future Considerations

I want to see how we performed in the coming months. I hope to be able to participate in some user research/ feedback.

I also want to learn more about reading data and drawing better insights.