Ampersand

17 min readOct 28, 2021

Redesigning the landing page | Product Design

Who is Ampersand?

Ampersand is a company that was started in 2020 aimed at eliminating the education to employment skills gap, and giving young professionals a head start on their early career development. Ampersand also targets growth-oriented businesses who are interested in hiring quality professionals for paid internships.

We had the pleasure to meet Allie, the CEO / co-founder of Ampersand, and through the first client meeting we could define our scope of work we determined:

Problem: Ampersand has multiple audiences, but it’s very difficult on the current website to speak to everyone without speaking to no one. How can we help with that user experience for the main two audiences (young professionals & businesses) and what’s the right way to communicate all of this?

Solution:

We will focus on redesigning a strong landing page that targets both aspiring professionals and high-growth companies to better communicate who Ampersand is and what it offers to its target audience.

Specifically, we will focus on:

Awareness of purpose and place in the customer journey
Use of content, calls-to-action (CTAs), and product/service information, to engage and convert visits to action
Harmony in a style that connects color, type, and content visually
Provide a high-fidelity site that uses unity and polish in composition

Project Timeline

A UX project timeline is an important tool for managing the complexities of the user experience design process. It can map out how long each stage of the design should take. It involves which stakeholders in each step, what resources we need at each stage, and how, ultimately, I will communicate with clients or other stakeholders.

Some UX project timelines are more flexible than others, but even those that have a set timeline can vary based on company size and other factors. The key to designing a successful UX project timeline is determining what kind of timeline will work best for your business goals and the needs of your stakeholders.

Below, we summarize our project timeline that we used to organize our project. Always scan the QR code to view our Trello board. It’s just a more detailed version of this timeline, with markers and details. This project timeline is color coded with the five phases Discovery, Define, Ideate, Prototype and Test and as you can see below, it’s not always in order because it’s an additive process, but we found that Agile timeline really works for us and it creating a stronger landing page for Ampersand.

Discovery

It is important to note that the discovery process is not just about understanding users’ needs or wants — it is about understanding their actual needs.

The Survey, Interviews, 5 Second Usability Test

We prepared fourteen surveys with Google Forms and ten interviews, and five 5-second usability tests distributed it among multiple groups of audience that were looking for the job. The purpose was to determine the basic ‘pain-points’ of people, how they are looking for a new career and their feelings and their experience.

Working with real-world data is a good starting point to help avoid guesswork and preconceptions. Using this information provided a better chance to discover the root of the problem and how to solve it.

Interview questions

At the discovery phase of my project, I conducted user interviews in order to get a better understanding of the problem. We interviewed 10 users and the insights we got from the interviews were that most users were confused about the landing page sections and it was hard to find what they needed on this website.

Do you have any experience with online learning? (Describe to me your most recent online learning experience. Did it meet your expectations, and why?)
Do you have any experience with online interviews? (Tell me about your last in-person or online interview, what went well and what could you improve on?)
Do you have an online portfolio or resume? (If so, is it current?)
Do you know any website or company that can help you find a job?
What do you feel about your knowledge and your skills to find a better job? Do you know how you can improve it?
What skills would you want to strengthen to help you progress into your desired profession?
How much time do you dedicate to job/internship hunting online?
What was your primary concern?
What kind of device do you use the most? Laptop, tablet, phone, etc…

5-Second Usability Testing

Five-second testing is a user research method that helps us gauge users’ first impressions of a design.

According to research, 55% of visitors spend less than 15 seconds on a website, so grabbing someone’s attention in the first few seconds of them viewing a design is essential. Within the first seconds, people will decide whether to continue browsing or leave.

In a five-second test, we give participants five seconds to view a design, after which they answer some simple questions. The results provide both quantitative and qualitative user feedback that helps you optimize a design.

Our 5-second questions:

What is the main thing you can recall?
How would you describe the design after viewing this page?

Result: Average after 22 seconds, participants said: This website has training classes for interns and helps students find jobs.

Empathy Map

Empathy is more than just putting yourself in your user’s shoes. It’s about putting on their whole outfit, living as them and embodying their experience as much as possible. Why is this important? Because you’ll know how they think, what words they use and, importantly, how they feel.

After we analyze surveys, interviews, we gather all those data and result in an empathy map and make a gain and pain section to sympathize more with our users.

Benefits of empathy map

The reason we use empathy maps is that they allow us to see and understand the worldview of ampersand’s users and we can understand target personas better.

Persona

Personas, help us understand a typical user’s needs and desires which in turn helps us build more successful products and solutions.

Deep understanding of a target audience is fundamental to creating exceptional products. Personas help us find the answer to one of our most important questions, “Who are we designing for?”

Journey Map

A customer journey map is a visual representation of the customer journey (also called the buyer journey or user journey). It helps us tell the story of our customers’ experiences with ampersand’s website across all touch-points.

However, the biggest benefit is simply understanding our customers more, The better we understand their expectations, the more we can tailor the customer experience to their needs.

Define

After we discover our users’ behaviors and prepare our personas, it is time to know our target users, analyzing their needs and conducting research. And The most important thing is to know what they are looking for and what they are expecting, and evaluate the usability of the current Ampersand’s website, and Competitive Analysis. After that, all we need is to iterate on our design until we come up with a successful design solution that is approved by both users and stakeholders.

Heuristic Evaluation

Heuristic evaluation is a thorough assessment of a product’s user interface, and its purpose is to detect usability issues that may occur when users interact with our website and identify ways to resolve them.

When we think about the design of a product, the first thought that comes to mind is how something looks:

Is it eye-catching?
Do the colors complement each other?
Does it have the aesthetic appeal that will lure consumers in?

“Good design is actually a lot harder to notice than poor design, in part because excellent designs fit our needs so well that the design is invisible.”
– Donald Norman.

Therefore, we focused on heuristic evaluation as the inspection method of choice for an impeccable UX design.

Competitive Analysis

A competitive analysis is categorizing and evaluating our competitors to understand their strengths and weaknesses compared to our own.The goal of the competitive analysis is to gather the intelligence necessary to find a line of attack and develop our go-to-market strategy.

You’ve likely heard the saying “Keep your friends close, but keep your enemies even closer.” For conducting a SaaS competitive analysis, that’s not the entire story.

In the SaaS industry, keeping your enemy close won’t prevent you from getting ambushed. Sometimes you don’t even know who your enemies are.

Here’s why we should conduct a SaaS competitive analysis, or “study the enemy.” Studying the ‘enemy’ can help us understand the battlefield. It can help us identify where the “enemies” are and how they’re approaching the business. It can help us discover strategic areas where we can position ourselves for a win.

Usability Testing

Usability testing is all about getting real people to interact with a website, app, or other product we’ve built and observing their behavior and reactions to it. Whether we start small by watching session recordings or go all out and rent a lab with eye-tracking equipment, usability testing is a necessary step to make sure we build an effective and enjoyable experience for our users.

Usability testing is done by real-life users, who are likely to reveal issues that people familiar with a website can no longer identify — very often, in-depth knowledge can blind designers, marketers, and product owners to a website’s usability issues.

Bringing in new users to test our site and/or observing how real people are already using it are effective ways to determine whether our visitors:

Understand how your site works and don’t get ‘lost’ or confused
Can complete the major actions they need to
Don’t encounter usability issues or bugs
Have a functional and efficient experience
Notice any other usability problems

This type of user research is exceptionally important with new products or new design updates: without it, we may stick with a UX design process that our team members understand, but our target audience will not.

In this project, we had two usability tests, one on original ampersand’s website and the second one on our hi-fidelity prototype. We had three tasks and five participates conducted this observation online at the Zoom meeting.

Card Sorting

Card sorting is a technique that involves asking users to organize information into logical groups. We give users a series of labelled cards and ask them to organize and sort them into groups that they think are appropriate.

Card sorting helps us to design an information architecture, workflow, menu structure or website navigation paths.

In this project, we had ten participants for card sorting to find out how we can rearranged the menu bar and re-title them.

As you can see, our result shows 3 categories with some submenu that can be very useful for us to rearrange the header.

Card sorting is a quick, simple and inexpensive way to gather insights about our users and their thoughts on groupings, categories, etc. This method works well at the beginning of projects if we are working on a redesign of a site and as a way of adding new content to a site, but will not give us all the answers that we are looking for.

However, when using card sorting along with other UX methods, such as usability testing, it can help us find out some useful insights about users to get new projects up and running.

Information Architecture

A well-designed, user-friendly information architecture ensures that users spend less time and effort searching for information and are successful in finding what they need.

With all the dates that we got from our usability test and card sorting, we realised the IA of this website needs to rearrange to help users and businesses achieve their goal faster.

Ideate

Ideating is one of the most important things that UX designers do. If you are a UX designer, then you know that this process usually starts with an idea.

Ideas are great, but they have to be refined to be the best they can be. That’s why UX designers usually use Moodboard and Style Tile to get feedback from their team and generate more ideas before they even get started.

Moodboard and Style Tile

A moodboard is a visual tool that communicates our concepts and visual ideas. It is a well thought out and planned arrangement of images, materials, pieces of text, etc. that should evoke or project a particular style or concept.

A style tile is a collection of visual elements that make up a site’s design. At its most basic, a style tile includes fonts, colors, typography treatments, icon style, and interactive elements like buttons and forms.

Moodboard and Style Tile’s Benefits

They give us a process to build a clear design story that we want to use in space.
Using a moodboard helps us to express the vision we have in mind for the project.
Sometimes it’s very complicated to express our visual ideas to others. A moodboard is a very efficient visual communication tool.
The greatest strength of a style tile is that it immediately sets the stage for creating a system, instead of just one pretty page. An effective website is continuously being updated, so we naturally need a design approach that fits that.

Sketches and Wire-framing

Sketches and wireframes are the best way to convey the design idea to a user or customer, and we can create them in a few minutes. And they are not complicated, but it requires the power of observation, strong communication skills with clients, and familiarity with design software.

In our brainstorm meeting, we got 3 versions sketches, that I am going to explain:

Why did we put the elements in a certain place?
How did our knowledge about our users, and their goals, influenced our sketches?

Prototype

The prototyping phase is when the team creates prototypes of different solutions that can be tested with users. The most important part of our project is the prototyping phase. This enables us to see how our designs will function in practice and to improve them before they are fully implemented.

In this phase, we had five versions of design that I am going to show you how we improved the landing page’s sections, and how we got some ideas from our research, usability tests and feedback to redesign this Landing page. As ux designers, we had simple MVP design to Help Ampersand’s goal to improve, and by showing their benefits, try to build more trust.

Header

Your headline is the first thing your visitor sees when he or she lands on the page. Make a great first impression with your headline and the visitor stays. Make a bad one and they bounce. It’s as simple as that.

“On the average, five times as many people read the headline as read the body copy. When you have written your headline, you have spent eighty cents out of your dollar.”

Eighty cents!

As you can see, we changed the header’s arrangement based on our card sorting result and some more information that we got from our interview that our participants said some titles on header are difficult to understand. Also, we removed CTA (Start Now) from the header, because we had it in hero section to help users navigate between pages more easily.

Hero Section

As the first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu.

In the hero section, we created a Powerful Headline and Follow It Up with a Strong Subheading, including brief details about the company, their products and services, and we added a call to action button.

Introduction Video

Under the hero section on Ampersand’s website, we found a video that shows their benefits and how this company can help people, but it was with no details and description. So, we change the title and add some information to encourage users to watch it.

How It Works

This section was the most important part of their design. Our users in the interview said it is very complicated to understand, so we organized nicely those steps and made users understand it better.

We got some feedback about the red CTA that looks like an error button. Also, our client asked us to change the arrangement of these steps, and make it simpler and clearer.

Curriculum

In ampersand website, This section supposed to show their benefits but in our usability tests and our interviews user said it is not clear and the picture is not useful, we made a bigger section with a consistent layout and added some details to each part to help the user understand and follow the goal of the website faster.

Testimonials

Testimonials are the rubber stamp of approval that many modern customers need to seal the deal. Which are exactly why testimonials are important to customers and marketers alike for building relationships. And we think reputation is everything in business. 95% of people say that reviews — whether positive or negative — influence their purchasing decisions, according to our own research.

We find some testimonials on some other pages that we think we can have on the landing page to improve users’ trust.

Blog

Blogs are informal articles written to show thought leadership and expertise on a topic. They are a great way to generate fresh content on a website and provide a catalyst for email marketing, social media promotion to drive search traffic to your website. It can help this website found faster, and it gives this company a voice,

After testimonials, we added a section as a blog to help users find some more news about Ampersand.

Weekly Seminars

In our interview, some users asked about is there any other way that they can get more information about Professionals and businesses’ processes on this website? And we find having them on the landing page can be very helpful.

Also, we got some feedback about this section regarding having a calendar for webinars that can be very helpful in showing their events easily.

FAQ

In the last section, we find out Ampersand’s audiences are in 3 groups and on this website there are 3 different pages that include some frequently asked questions that can be a good section to deal with specific queries that their customers have about this business.

One of the biggest reasons for a user not converting into a sale is unanswered questions or a thirst for more information. By including a well-developed FAQ section, based on the common questions your customers ask, you can bridge that gap.

Footer

While footers get less attention than the top of the page, they still receive a fair amount of use. And the footer is an excellent opportunity to remind or teach potential customers about the company’s other offerings, so it can be a second chance to be convinced. Also, Footer can be a last resort for hard to find content.

In this design, we rearrange the footer and add some useful links and Social media to make it more consistent, predictable, and easily discoverable.

Test

Now it is time to have a second round of usability tests in our Hi-Fidelity design (version 4). For this test, we had 4 participants that we sent them our new design and asked them to finish three tasks.

Please walk me through the landing page. What do you think is the purpose of this website? Is the content clear and easy to understand?
Assume you are a young professional looking for an internship. How would you navigate through this website to enroll?
Assume you are an employer looking to recruit a talented professional for your company. How would you navigate through this website to find talent?

Average time taken for each task was less than one minute and all participants finished their task easily. We just got some feedback to move the FAQ section to the part of the landing page, and have better backgrounds for the calendar. Version 5 is our last Hi-fidelity design.

Next steps

In the future, we plan to:

Conduct a A/B test on the landing page
Build out the rest of the pages for businesses and aspiring professionals and test to see their efficiency in completing usability tests to ensure that the targeted audience could take an advantage of Ampersand efficiently
Create a responsive version of the design

We were super happy to work with our client Allie and work as a team to collaborate and create a functional yet visually appealing design for a company with a big purpose. Overall, it was a fun project where we could practice talking to clients, define work and work with teammates to help connect aspiring professionals to high growth businesses in the long run.

Thank you for being with me until now. I love to hear more about your recommendation and your feedback.