UI/UX Case Study: Redesigning Nuvyyo’s Website
In this article, I will explain the process I went through to redesign the Nuvyyo website.
About the project
What is Nuvyyo?
Nuvyyo is a Canadian company that provides TV broadcast solutions, including their popular Tablo DVR products which allows users to watch and record live over-the-air TV broadcasts on multiple devices.
Why to redesign Nuvyyo?
While browsing the internet one day, I came across an article on Verge.com that discussed a revolution in the TV broadcasting industry. The article highlighted Nuvyyo as a leading company in the field, with innovative ideas. Moreover, I learned that the company had recently been acquired by SCRIPPS for $14 million. This piqued my interest, and I decided to visit Nuvyyo’s website for more information about their products.
Unfortunately, I found the website to be basic and poorly designed, lacking effective communication of the benefits of Nuvyyo’s products to potential customers. Specifically, the website design was outdated and failed to convey the company’s innovative and forward-thinking nature effectively.
Some issues that I discovered
- Outdated visual design that did not reflect the innovative and forward-thinking nature of the company.
- Limited and poorly organized content, making it difficult for users to find information.
- Visual clutter and lack of visual hierarchy, making it difficult to distinguish important sections.
- Important sections such as About Us and Company Team compressed into a single-page layout.
- Brief mention of company’s products and benefits, making it hard for potential customers to understand their value.
When I visited Nuvyyo’s website, I was disappointed by their weak web presence, especially in the competitive TV broadcasting industry. As a UX designer, I thought their website design needed an update to better showcase their products and services. So, I decided to take on the challenge and improve the website’s visual design, content structure, and ease of navigation.
Goal of the project
The project’s goal was to revamp the outdated and poorly designed website into a visually appealing and modern one. Additionally, the website’s information was to be restructured and presented in a clear and organized manner to enhance the user experience.
Design process
I began the redesign process by analyzing Nuvyyo’s website thoroughly. I went through each section of the site and extracted all the content, which helped me understand the website’s core intentions better.
In the second step, I looked for inspiration and references by studying the UI, UX, and Information Architecture (IA) of various websites, including both direct and indirect competitors. This allowed me to gain a comprehensive understanding of the industry’s current design trends and best practices.
After finalizing the overall vision for the website, I began planning how the information should be organized. To do this, I started sketching rough layouts. I find that jotting down my ideas on paper helps me explore a wide range of possibilities and generate multiple variations of my concepts.
Now lets dive into the most important part of this case study
Final designs
Landing page
I will now break down the landing page into different sections and discuss each one. To begin with, let’s take a look at the main hero section.
- Upon first glance at the old Nuvyyo website, it was immediately clear that the design was outdated. One major issue observed was that the website failed to convey the innovative nature of their products effectively.
- Additionally, the value proposition was unclear, and the main CTA style and copy were confusing, taking me half a second to identify it.
- As the first step, I decided to establish a goal for the homepage. I opted for a dark gradient theme style for the homepage and included a hero image of a futuristic urban city, as it would showcase the innovative nature of the company.
- The previous design had the main header navigation located at the bottom of the hero section, which might have confused many users. While it’s good to break rules for the sake of innovation, in this case, there was no clear intention behind the design decision. Therefore, I decided to move it to the top of the hero section to provide a more intuitive user experience. Also, I added social proofing by displaying logos of Nuvyyo’s partners, which can help establish trust and credibility with potential customers.
- I made some changes to the header top navigation by adding a contact button and product drop-down navigation link. In the previous design, all links were directed towards navigating to different sections of the page, as the website was a single-page website. However, due to the vast amount of content on the website, it was crucial to present information clearly to users. Therefore, I decided to turn important sections into separate pages. I found this approach to be effective on other competitive company websites as well.
- I also modified the product navigation link to a drop-down link, which allows users to easily browse through different products offered by the company.
Solution and benefits section
In the next section, I added a section that highlights the solutions and benefits of the company’s products. This information can help users to quickly determine if the product is relevant to their needs. To make the content easier to scan and understand, I placed related icons above each benefit headings.
Product section
The next step was to introduce the latest products. The old website had a one-paragraph description, but I wanted to provide more details. I decided to include only the details of the latest products since most customers would be interested in the newest and most innovative technology. In the old design, there was only a product description, which most people might hesitate to read since they usually scan the page. Therefore, I decided to add highlighted features into classic visual bullet points below the description to provide visitors with an idea of the product’s unique features.
In the previous design, the product images were less eye-catching, so I replaced them with new product images. Also the “Learn More” button was poorly designed, with italic font style and less contrasting color. I added a new style with an arrow icon on the right. The an icon helps users quickly identify the purpose of the button.
Testimonials section
The old design had three testimonials placed randomly under each important section of the website. This was an odd way of placing testimonials, as visitors prefer to see all testimonials in one place, which is how other websites I referred to were designed. Also, the old testimonial design had a blurry image as its background, making the text unclear and inconsistent. So, I decided to make the testimonial design minimal with more emphasis on the client’s quote. I also added a carousel button on the right side so that visitors can look for other testimonials without having to scroll through the entire page as they did on the old website.
FAQ and Footer section
One of the major drawbacks of the old website was the absence of an FAQ section. It’s evident that visitors will have some questions after going through the entire website. To address this issue, I added an FAQ section at the bottom of the website, just above the footer. I designed both collapsed and expanded states of the questions accordion list to make it more user-friendly.
In the old design, there were a few unnecessary elements outside the footer, such as the map. Additionally, the contact details of the company were placed above the footer. Therefore, I decided to combine both pieces of content into a single footer. Instead of the map, I just put the address of the company, which conveys the same message.
About page
As I mentioned during the analysis of the old website, I decided to move the “About” and “Management” section, which were present on the landing page, to a separate “About” page.
- My main idea for this page was to introduce Nuvyyo’s background, values, and team to visitors. The About section is an essential part of any website and can greatly influence a user’s perception of a brand. I started by creating a main introduction heading for the page.
- Next, I explained the story of how Nuvyyo started and how they achieved success. This section is crucial to building trust with customers.
- The following two sections on the about page are the “Core Values” and “Core Team” sections. The Core Values section is where the company can communicate its mission, beliefs, and what makes it unique to potential customers. This helps visitors understand the company’s goals and values.
- On the other hand, the Core Team section provides information about the people who are responsible for the company’s success. By showcasing the people behind the brand, it humanizes the company and helps build a connection with potential customers.
Careers page
- In the previous design, the career section was too brief. Important content such as the working culture and job openings were compressed into a small section of the landing page, with no clear hierarchy or CTA button to guide visitors. Additionally, there was limited information about the benefits of working with the Nuvyyo’s team.
- To design this page, I looked at different company websites to see how they presented their career section. After analyzing several sites, I decided to start with an introduction hero section and included a CTA button “Find openings” to encourage visitors to explore job opportunities at Nuvyyo.
- The next section provides an overview of what it’s like working at Nuvyyo, including information on the company’s culture and environment. This section is followed by a video message from the CEO, which adds a personal touch and makes the company feel more transparent and approachable. To accommodate visitors who don’t have much time, I also included a short written message with highlighted quotes from the video.
- In the following section, I added the career benefits of working at the company. I highlighted the important benefits in small sections, so visitors can quickly scan through all the important benefits.
- The final section on this page was the most important one, which is the “Current Openings” section. This is where the company showcases its available job openings and provides information about them. I designed this section in the form of a table, with job roles and locations placed next to each other in separate columns. In my research, I found that job seekers primarily look for job roles and locations, after salary, when searching for jobs. At the end of each job row, I added an “Apply Now” button for job seekers to quickly apply for the role.
- Additionally, I added a filter option to the job listing section, which allows job seekers to narrow down their job search by selecting their desired job position. This feature saves them time and effort from manually searching through irrelevant job postings.
Blog page
- I believe that the blog section is essential for Nuvyyo due to their fast-paced innovative production and research. As Nuvyyo is a company heavily focused on research, this section will definitely help the company to share inside stories of experiments and developments with its customers.
- I turned the hero section of this page into a featured article to indicate its interactive nature.
- I transformed the normal hero heading into a clickable link text so that visitors can read the featured articles by clicking on it. Below this, recent blogs can be accessed in order of the latest releases.
You can check out my behance presentation for a complete visual overview.
learning
These are the lessons I learned during this project.
- This project was my first personal redesigning project. This project taught me the significance of analyzing both UI and UX aspects of a website at the initial stage of the design process.
- While working on this project, I gained an understanding of how to effectively use the principle of white space to improve the visual appeal of a design and reduce cognitive load for users.
