website redesign case study

Website Redesign Case Study – 5 Key Findings

Popular Tools by VOCSO

• Color Palette Generator
• Image Color Picker
• Blog Topic Generator
• website cost calculator
• web app estimator
• ecommerce cost calculator
• Wordpress cost calculator

Did you know that 50% of internet users believe that a website’s design determines if a brand has a strong image? Visitors perceptions of your brand may be impacted if it is outdated, unresponsive, or otherwise problematic on various devices. So much so that they begin to doubt whether they should believe your company.

Sometimes your troubles might be resolved with a few quick and easy tweaks. But in all other cases, it’s beneficial to put time and effort into more complicated solutions. like a total website redesign.

We recently redesigned the website of an electric scooter manufacturing company and identified five key findings that would be helpful to any business considering website redesign services .

If you’re considering a redesign, this case study will give you some insight into the process and what to expect. We’ll take a look at key findings from our recent redesign project so that you can see how we approached the process and what worked well for us. Hopefully, this will give you some ideas of things to consider for your own website redesign.

Table of Contents

Identifying the need for a website redesign

What are the key benefits of redesigning your website ? Redesigning a website can be a daunting task, but the benefits can be tremendous. A well-designed website can help a business to attract new customers, improve customer retention and boost sales.

Why is the website redesign needed? Such questions typically come up when a company changes its branding or experiences issues with Google rankings, but there are numerous other situations in which a website redesign or revamp may be necessary.

The severity of the issues listed below will determine whether your website has to be redesigned.

1. Has your brand changed?

If your website no longer reflects the image of your business, it may be time for a redesign. In today’s digital age, first impressions are essential, and your website is often the first interaction potential customers have with your brand. It’s critical to ensure your website is up-to-date and accurately reflects your company’s values and mission.

 If your website is outdated or doesn’t reflect your brand well, users will likely negatively judge your business and move on to a competitor. A well-designed website that accurately reflects your brand can help you win over customers and Build Trust.

2. Does your competitor’s website look better than yours?

You don’t have to rebuild your website each time one of your competitors does. However, it’s crucial to remember that your company does not operate in a vacuum. If your competitors are constantly innovating and improving their online presence, it’s only a matter of time before your website starts to look dated in comparison.

Of course, you don’t want to constantly play catch-up with your competitors. But it’s important to keep an eye on their activities and be prepared to make changes to your website when necessary. By staying ahead of the curve, you can ensure that your website remains a valuable asset for your business

3. Is your site old and outdated?

Building relationships with potential clients begin on your website. However, if your website’s design is outmoded, it can have a detrimental effect on both their initial impression and their user experience as a whole.

A business website often has to be updated every two to three years. It might be time to assess whether your site still meets the demands of your visitors if it has been some time since your previous overhaul. A website’s design and functionality should be updated to reflect new features and best practices as they become available.

4. Does your site take a while to load?

Your website must load almost instantly because today’s website visitors absolutely anticipate a quick user experience. A recent study found that the average website visitor expects a page to load in two seconds or less. If your website takes longer than that to load, you’re likely to lose visitors. And if those visitors are potential customers, you could be losing out on valuable business.

There are a number of ways to improve your website’s loading speed, including optimizing your images and using a content delivery network (CDN). But whatever steps you take, it’s important to keep your website’s loading time in mind when designing and developing your site. Because in today’s fast-paced world, visitors won’t wait around for a slow website.

5. Is the website experience lacking on desktop and mobile?

Giving visitors a fantastic overall experience from the moment they first visit your website through conversion is what is meant by “excellent user experience.” Two broad techniques that can be used to improve user experience are improving the website’s design and making sure the website’s content is well-written and relevant.

A well-designed website will be easy to navigate and will look good on all devices. The website’s content should be well-written and relevant to the products or services offered. If the website’s content is dull or irrelevant, visitors will quickly lose interest and move on to another site.

 Improving user experience can be a challenge, but it’s well worth the effort. By making sure your website is designed well and has high-quality content, you’ll give visitors a reason to stick around, and you’ll be more likely to convert them into customers or clients.

6. Is your website still not responsive?

In today’s world, people are using a variety of devices to access the internet – from desktop computers to laptops, tablets, and smartphones. This so-called “multi-screen culture” means that your website needs to be optimized for all types of devices if you want to stay ahead of the competition.

Simply put, if your website isn’t optimized for mobile, you may lose out on potential customers and sales. Make sure your website is responsive and easy to use on all devices, and you’ll be sure to keep your visitors happy.

7. Is it a headache to add new functionalities or make simple changes?

If you’re finding it difficult to add or change functionality on your website, it may be time to consider a redesign. Well-thought-out functionality should be a focus for your business, and if your website isn’t up to par, it could be costing you customers and sales.

A website redesign can be a big undertaking, but if done right, it can be a major boon for your business. Take the time to consider your website’s functionality and make sure that it’s up to snuff. Otherwise, you may be missing out on valuable opportunities.

8. Are sales or conversions declining?

To ensure that your website is visible to potential customers, you need to optimize it for search engines. This means making sure that your website appears as high up as possible in search engine results pages (SERPs), for relevant keywords and phrases. The higher your website appears in SERPs, the more likely people are to click through to it. And the more traffic you can drive to your website, the better chance you have of generating leads and sales

But what if your website doesn’t perform the way you thought it would and leads to declining sales or conversion? You might want to redesign your website.

9. Is it a struggle to find information on your site?

Your website is one of your most important marketing tools. It’s how you connect with customers and prospects, and it’s a reflection of your brand. If your website is outdated or not functioning properly, it could be hurting your business.

That’s where our Website Redesign services come in. You need to create a modern, responsive website that meets the needs of your business and your customers. Make sure your site is easy to use, informative, and engaging, so you can focus on running your business.

Website Redesign Case Study

Learn a few of our clients who have used our website redesign services to create amazing web experiences for their users and increase conversion rates.

#1. Okinawa Scooters – Electric Scooter Brand Case Study

Some background here.

With the goal of building two-wheelers that can propel our present into a sustainable future, Okinawa is a 100% Indian electric two-wheeler manufacturing firm that was founded in 2015.

The mission of Okinawa’s electric bicycle manufacturer is to become the most well-known EV brand in the world. They do this by producing clever, inventive, elegant, comfortable, and energy-efficient vehicles that Okinawans can be proud of.

By building these bikes with an eye for quality and social responsibility, they hope to make Okinawa the leading electric two-wheeler manufacturer and set the standard for accessible eco-friendly technology for future generations.

For having an online presence and carrying out their sales they have created a website that doesn’t happen to be giving them the desired results and wanted to redesign it. We suggested to them some corrections to be made on their website. The Following are some challenges we faced while redesigning the website.

Problems/Challenges: Okinawa Scooters Case Study

1. Designing for the buyer persona 

Creating a successful website requires a deep understanding of your target audience, their goals, and the environment in which they will use your site. Too often, website designers create sites that they think look cool, without considering the needs of the people who will actually be using them. This can lead to frustration and a feeling of being lost for visitors, which is the last thing we want.

The site when approached had no relevant information that a Buyer Persona might be looking for. This is why while redesigning it we took time to really understand who the users were, what they were looking for, and what kind of information would be most relevant to them.

 We also looked at other sites in the same industry to see what kinds of information they were offering and how they were presenting it. Based on real demographic data, we were able to come up with a new design that was much more user-friendly and informative.

2. Balancing aesthetics with functionality

A captivating, eye-catching design can keep visitors on your site longer. However, if you put the demands of your customers before the needs of your users, they will become frustrated when attempting to understand or navigate your website and are more likely to leave.

Designing an appealing website that adheres to your brand and values while avoiding overly flashy design decisions that impair website readability and usability can be challenging.

The site earlier had some good aesthetics in some places but with low functionality and vice versa. However, with the help of our skilled designers and developers, we have been able to create a site that is both aesthetically pleasing and highly functional.

In order to do so we took the following steps

• We believe that usability is the most important aspect of any website or product. Therefore, we took the time to find the right page style that goes in line with the product as well as the company’s values. We think that this will help to create a better user experience and ultimately lead to more success for the company.
• Further, We chose images that showcase their expertise and display them as a logical narrative.
• To allow for an aesthetically pleasing and easy-to-read design, we used legible typefaces and leave adequate white space between paragraphs, text, and images. This gave the design a “breathed” look and feel, making it more inviting and professional. Keeping in mind that too much white space can make a design look cold and uninviting while striking a balance that works for your particular project.

3. Balancing functionality and aesthetics with speed 

Every stage of the process, from design to development, is a challenge to strike a balance between speed and functionality/content.

While working on this project: 

In the design phase, the challenge was to create a user interface that is both fast and easy to use. 

In the development phase, the challenge was to create a code that was both efficient and easy to understand. In both cases, the goal was to achieve the perfect balance between design and functionality.

But there’s still an important factor that’s important which is speed 

User attention is captured and maintained on your page with appealing graphics, videos, and animations. However, having too many media components might slow down your website’s loading time, which irritates visitors and degrades your search engine rankings. 

In solution to that, we took some steps while redesigning the website

• Before creating the user interface, we made sure the fundamental information architecture and hierarchy were logical and intuitive.
• The design was kept as basic as possible, with only the most important components present. 
• Only those videos were added that were important enough to show
• Choose the best third-party tools and make sure to use them correctly and early in the design process.
• Kept the content on each page to a minimum
• Consolidated huge files

4. Preparing it for heavy traffic ( as they occasionally run national-level campaigns on TV, in newspapers, and online)

The team at VOCSO worked tirelessly for days, preparing the website for heavy traffic. The reason behind this was website traffic generated through paid media campaigns. We knew that when the company ran national-level campaigns on TV, in newspapers, and online, the website would be hit with a lot of traffic. We recommended the company upgrade the server, optimized the code, and tested everything to make sure it could handle the load. 

5. Managing stakeholder expectations 

You’ll need suggestions from multiple stakeholders as you develop your site, whether you’re a design firm, an internal team in a big company, or a small business owner. This is because each stakeholder will have their own perspective on what the site should look like and how it should function. As such, it’s important to get input from as many stakeholders as possible in order to create a site that meets everyone’s needs and expectations.

If you don’t get buy-in from key stakeholders and align your business objectives with the vision for your website, you run the risk of having your design compromised or altered. This can jeopardize the success of your website and lead to frustration on the part of users, which is why it’s so important to get everyone on board from the outset. By clearly articulating the goals of the website and getting input from all stakeholders, you can ensure that the final product meets everyone’s needs and expectations.

Managing Stakeholder’s expectations was Indeed a Challenge. However, we managed to do so while keeping all this in mind. We started with a clear plan and stuck to it throughout and asked about the precise, measurable business objectives they must attain.

6. Keeping in mind the future scalability

When it comes to designing a website, you want something that is both elegant and functional. You want your website to be adaptable enough for the future should your company’s needs or audience change. 

But designing a site that can handle any future expansion is difficult because you won’t know what those changes are until they happen. 

That’s why we included flexibility in the design phase so that any additional content or features can be easily added later on as needed. But before doing so there were some considerations to be made

• Before planning the website, and redesign we asked them about their long-term goals 
• Made sure servers can handle several queries at once to minimize performance issues.
• Dispersed the burden during busy times across other servers by distributing site traffic.

Strategies: Okinawa Scooters Case Study

1. Become Familiar with the Content/Structure

Designers must carefully consider which content is best suited for a specific post type and which content is best suited for a static site. There are a variety of factors to consider when making this decision, such as the purpose of the site, the target audience, the type of content, and the overall tone and style of the site.

There’s no denying that the amount of content on the average website can be overwhelming. Just think about all of the different pages, posts, images, and videos that are out there. And, of course, all of that content has to be created by someone.

 In most cases, there isn’t just one person responsible for all of the content on a website. Instead, there’s a team of people who work together to create and curate all of the content that you see.

The best way to manage all of that content is to Clarify it from the beginning

2: Create Focus. Simplify. Organize

It’s time to create the blueprint for a new structure that will best display the content once it has been arranged into labeled boxes. But first, we must establish focus.

 What is the most important aspect of the material we are trying to display? What do we want viewers to see first, and what can be secondary? Once we have a clear vision for the overall display, we can begin to sketch out a plan for the new structure.

With a focus identified, we can simplify and organize. Having a focus also allows us to stay on track and avoid getting sidetracked by less important tasks.

3: Get the Client Involved

It’s important to create the sitemap of your website, but you should also map out where each page will go. This way, when you begin adding content to your site, clients are able to see how it looks and what order it goes in.

 Page types are included in the sitemap, but the mapping of content is not. Experienced web designers are aware that the majority of problems arise when a client begins adding content to their website. Keep the client looped in from the beginning to prevent this issue.

4. Competitor Analysis

Looking at your competitor’s websites can be a helpful way to learn what you can do to improve your own website. You may notice things that you like and feel could be improved upon. For example, if you see a competitor’s website that has a lot of helpful and relevant information, you may want to consider adding more content to your own website. 

On the other hand, if you see a competitor’s website that is difficult to navigate or doesn’t provide much useful information, you may want to make your website more user-friendly and informative. By taking note of what you like and don’t like about your competitor’s websites, you can learn how to improve your own website to make it more appealing and effective.

4. Create Visual Structure Through Wireframing

As a professional web company, we worked on the wireframe for the new design and kept the important information above the fold. This way, users would be able to see it right away without having to scroll down. We created the website with an easy navigation structure so visitors could use the website easily and navigate. We also included plenty of links and CTAs. The finished product was a clean and modern website that was easy to use and looked great.

5. Improving the mobile experience 

Making your website a mobile-first machine doesn’t require much work, but the benefits are great. You can’t afford to neglect smaller devices when more people are now searching for content on mobile devices than on laptops and desktops.

Your website should ideally appear stunning on all types of devices. You risk alienating visitors who use smartphones if your graphics and fonts are larger than the screen size of those devices.

Both responsive design and Accelerated Mobile Pages (AMP) can enhance your visitors’ mobile experience.

6. Provide the Homepage with a Clear Goal

When designing a homepage, it’s crucial to set the aim early on. This is because the homepage is often the first point of contact between a website and its visitors. According to a recent study, many visitors arrive at a website without fully understanding what it is or what it does. 

As such, it’s important to design the homepage in a way that clearly communicates the website’s purpose. This might involve using strong visuals and clear, concise text. It’s also important to ensure that the homepage is easy to navigate so that visitors can quickly find what they’re looking for.

7. Incorporate the brand style guide 

The wireframes for a product are the foundation upon which the product is built. They provide the basic structure and layout for the product and are typically created by designers. Once the wireframes are complete, it’s time to turn them into a usable and engaging product. This is where brand colors and fonts come into play. By using brand colors and fonts, the written content is made simple to understand. In addition, these elements can help to add personality and flair to the product. Ultimately, by taking the time to turn wireframes into a finished product, you’ll create a better user experience and a more successful product.

8. Experiment with typography combinations

Good web design relies heavily on typography. Typography is the art and technique of arranging type to make written language legible, readable and appealing when displayed. The arrangement of type involves selecting typefaces, point size, line length, and letter spacing. The term typography is also applied to the style, arrangement, and appearance of the letters, numbers, and symbols created by the process. Good web design must take into account the different ways in which people read. 

Different fonts can be used to create different moods and different purposes. The size, weight, and style of the typeface are some of the most important factors in making the right look and feel for a website.

9. Polish the Look and Feel of the Website

Designers frequently hear the words “Look and Feel” from both clients and their peers. Although it sounds very broad, this phrase holds a specific meaning

The “look” of a graphical user interface in software design refers to elements like colors, shapes, layouts, and typefaces. It also refers to the behavior of dynamic elements like buttons, boxes, and menus. 

Your website’s design and layout should give visitors a clear idea of what your business stands for and what they can anticipate in terms of its culture, level of customer service, and ethos.

10. Add social proof

Using social proof in marketing is a common strategy to boost the confidence of potential buyers in a good, service, or brand. In essence, it aids in reducing buyer hesitation by providing reassurance that others have made the same purchase and been satisfied with the results. This technique can be used in a variety of marketing materials, from website testimonials to product reviews on social media.

When executed well, social proof can be an effective way to increase conversion rates and encourage potential customers to take the plunge. However, it’s important to use this strategy sparingly and only when it feels genuine and authentic. Overuse of social proof can backfire, making your brand seem inauthentic or even untrustworthy.

11. Implementing strong content management capabilities

A CMS, or content management system , is a web-based application that enables you to create and manage your website’s content. The quickness of a CMS is one of its key benefits. 

With it, you can quickly develop and launch your website because it comes with ready-made templates and built-in features that allow you to create a professional-looking website with little to no programming or design experience.

Hence implementing strong cms capabilities can work wonders for you 

12. Best SEO practices

Search engine optimization (SEO) is a process of improving the visibility and ranking of a website or web page in search engine results pages (SERPs). It is a means of increasing the quantity and quality of traffic to a site from search engines, ideally resulting in increased revenue.

SEO is essential if you want to grow your target audiences, build long-term brand exposure, and generate more income. However, it is important to note that SEO is not a quick or easy fix – it is an ongoing process that requires time, effort, and dedication. In order to see results, you need to be patient and consistent with your SEO efforts.

There are a number of things you can do to improve your SEO, including optimizing your website content, building backlinks, and using social media to promote your site. If you are serious about growing your business, then you need to make SEO a priority. Investing in a good SEO campaign will pay off in the long run, so don’t hesitate to put in the work now.

If you’re planning a website redesign, there are some important SEO strategies to keep in mind. Read the top SEO strategies for a website redesign .

13. Mapping old URLs with new respective URLs

If you’re launching a new website, it’s important to map your old site’s URLs to the URLs for the new site. This will ensure that any incoming links to your old site are redirected to the new site and that your users don’t end up seeing 404 errors when they try to access your content.

To do this, you’ll need to set up redirects on your old site. A redirect is a server-side operation that tells the server to send any visitors who request a specific URL to a different URL. You can set up redirects for individual pages or for entire sections of your site.

If you’re not sure how to set up redirects, you can find plenty of tutorials online, or you can hire a web developer to help you. Once your redirects are in place, be sure to test them to make sure they’re working as intended.

14. Improving the loading speed

Reducing the time it takes for people to load your website is a terrific way to make them happier customers. Not only will they be able to find what they’re looking for faster, but they’ll also be more likely to make a purchase.

There are a few key things you can do to reduce loading times. First, make sure you’re using a good hosting provider. Second, optimize your images so that they load quickly. Finally, don’t use too many heavy plugins or scripts that will slow down your site.

By following these tips, you can ensure that your website loads quickly and efficiently, making for happier customers and more sales.

15. Using CDN for Video content

A CDN or content delivery network is a system of distributed servers that deliver web content to users based on their geographic location. By utilizing a CDN for streaming video, you can increase a stream’s ability to reach viewers around the world while reducing latency and buffering time. 

This is because a CDN can provide a high level of bandwidth and reliability by distributing the load among multiple servers. Additionally, a CDN can help to ensure that the source content is always available by replicating it across multiple servers in different locations.

16. Cloud hosting for ease of scalability

Cloud hosting is a type of web hosting that uses a network of remote servers to store your website data. One benefit of this type of hosting is that the multi-server setup allows for automatic backups of your data. This means that if your website goes down, your data will still be safe and you can quickly get your site back up and running. 

It allows you to scale easily as a cloud solution enables businesses to adjust appropriately and affordably to enhance storage and performance as traffic or workload demands increase abruptly or over time.

17. Finishing Strong: Mind the Details

Users visit the details page for one of two reasons: either they want to learn more about a landmark or they are already familiar with a location and are looking for specific information. If users are looking to learn more about a landmark, they will want to see photos and read about the history and significance of the location.

 If users are already familiar with a location, they may be looking for specific information such as an address, hours of operation, or contact information. Regardless of the reason for visiting the details page, users should be able to easily find the information they are looking for.

Results: Okinawa Scooters Case Study 

1. Performance Improvement,

The overall performance of the website earlier was not what the client expected it to be but soon after we gave it a makeover and fixed things It started performing well and is constantly growing 

1. Bounce Rate 

The percentage of all sessions on your site where users only viewed a single page and sent a single request to the analytics server is known as the bounce rate, which is calculated as single-page sessions divided by all sessions.

The bounce rate earlier was very high as compared to now after redesigning it the Bounce rate went lower.

2. On-page time

The length of time a visitor spends on a web page before leaving for another is known as time on the page. Keep in mind that no time on the page is calculated or added to the average if the visitor doesn’t turn to a second page. It’s as if they had never even been there.

3. Engagement rate  

Online engagement rates are an important metric for marketers to monitor and analyze. To generate this statistic, marketers measure the number of “likes,” “comments,” and social shares related to the content. The engagement rate is used as a vital statistic for brand initiatives and is a key indicator of the effectiveness of any marketing campaign.

4. Conversion rate

Simply dividing the number of conversions by the total number of ad interactions that can be linked to a conversion within the same time period yields the conversion rate. Your conversion rate would be 5%, for instance, if you had 50 conversions out of 1,000 interactions, as 50 divided by 1,000 equals 5%.

5. SEO impressions & clicks

When the target of a marketing message takes the desired action, we refer to it as a conversion. Although conversion is a crucial statistic in the marketing funnel, it does not always indicate a sale. Conversions can also take place before a sale and show how far a prospect has advanced in the sales process.

Ad Clicks, sometimes known as just Clicks, is a marketing metric that tracks how frequently visitors click on digital advertisements to access internet properties.

Key findings: Website redesign case study

A website redesign can be a daunting task, but it can also be a great opportunity to improve your online presence. Our case study found that there are five key areas you should focus on when redesigning your website: user experience, mobile optimization, search engine optimization, content, and design.

By keeping these five areas in mind during your redesign process, you can create a website that is not only visually appealing but also easy to use and navigate. Additionally, by ensuring your website is optimized for mobile devices and search engines, you can reach a wider audience and attract more visitors.

1. Social proof increases engagement and conversion

Social proof is a psychological phenomenon that occurs when people copy what others do to feel safe, and is used by marketers to help increase conversion rates. Social proof is primarily achieved through testimonials from other consumers, but can also be achieved by leveraging reviews or social media influencers. The more people who have purchased and interacted with your product or service, the more likely it will convince prospects to buy.

With the help of a fantastic social proof tool, adding social proof to your site, such as recent customer behaviour, takes less than five minutes to set up and implement. It can also increase conversions by up to 15%.

2. A good brand style guide is key to building a website with a consistent theme

The purpose, vision, and values of your brand are translated into design via your brand style guide. A brand style guide is a manual that specifies how an organisation should represent itself to the public, including through the use of its logo, font and colour choices, photography, and other elements. In other words, it serves as a guide that promotes consistency in the way a brand appears, feels, and sounds. Don’t be intimidated by the term “brand bible”; it’s used by some because the document is so potent. Those are simply other labels for the same thing.

When you use a brand book, you can be sure that your brand will always look and feel the same, regardless of who handles customer service, marketing, design, and sales.

3. Use of CDN drastically improves website performance

Load times can be slashed by up to 50% by using a CDN. Reduced file sizes, shorter paths between content storage and destination locations, and a host of other performance-enhancing features make CDNs an attractive option for anyone looking to improve their website’s loading times. While there are a number of different CDN providers to choose from, each with its own unique set of features, all of them offer the potential to significantly improve your website’s performance.

4. Having a  blog and insights section on the homepage increases Google’s crawl frequency

Adding new content to your website on a regular basis can help it rank higher in search engine results. This is because search engines like Google tend to favour websites that are constantly adding new content. By adding new content, you’re also increasing the chances that your website will be found by potential visitors.

By adding a blog and insight section to your website you’ll not only gain better insight into your target audience but increase Google’s crawl frequency as well, know that everyone on your page genuinely wants to read what you’ve got to say, and be able to effectively improve your strategy by paying attention to how well different posts perform. Write content in the best interest of your readers, and the metrics will follow.

5. Sharing updates frequently with different stakeholders increases efficiency 

There are many ways to keep stakeholders up to date on your progress. One good way is with regular updates that detail the choices you have made, and the course of action you will take and motivate them to invest in your project. Updates like these also help stakeholders understand your decisions better as well as build trust in your project/business.

How can VOCSO help here?

VOCSO is a web development company offering  custom CMS development ,  custom website design and development ,  custom web application development , and  custom mobile app design and development services  in and out of India.

We also provide dedicated resources for hire:

• Hire AngularJS Developers
• Hire ReactJS Developers
• Hire Dedicated PHP Developers
• Hire Laravel Developers
• Hire NodeJs Developer
• Hire NextJS Developers

If you aren’t obtaining the desired outcomes despite your website being stunning, useful, and pixel-perfect, it isn’t serving its intended purpose. Your website serves to market your company, establish your brand, and eventually boost revenue. Consider a redesign if you are dissatisfied with your results. Please get in touch if you need assistance with designing a professional website, redesigning it, or performing a complete redesign

Recommend this story

Further reading....

Select what you need estimate for...

• website design
• web application
• ecommerce website
• Wordpress calculator

Now is the time to start getting more online

Conviced? Good. reach out to us via form below. if not. well spend some more time looking at our portfolio and case studies. you won't need to think further :)

• UX Designers
• UI Designers
• Web Designers
• Mobile App Designers
• Visual Designers
• SaaS Designers
• Product Designers
• UX Researchers

The True ROI of UX: B2B Redesign Case Studies

UX designers often need to convince company executives on the ROI of a UX redesign initiative. Here are some real-life B2B redesign case studies a UX team identified in order to make a compelling case.

By Miklos Philips

Miklos is a UX designer, product design strategist, author, and speaker with more than 18 years of experience in the design field.

PREVIOUSLY AT

User-centered design isn’t just about creating a great experience for customers—it’s also a smart business move.

In our previous article “ The True ROI of UX: Convincing the Executive Suite ,” we talked about how to persuade company executives on the ROI of UX, and how to illustrate the value of UX in increasing business KPIs . In this second piece, we discuss how, in order to really drive the message home, it is essential that UX teams present successful case studies of similar B2B UX redesigns.

The trouble is, finding data from real-world B2B UX redesigns is extremely challenging. Through dogged perseverance, our UX team found some useful data, but the proven difficulty of defining the ROI of UX (ie. how to exactly measure it) complicated matters further, and it became evident that the ROI of UX needed to be categorized into “soft” and “hard” dollars.

On the “soft side,” results are categorized into increased customer loyalty and net promoter scores (NPS), increased word-of-mouth referrals, productivity gains, and increased efficiency. On the “hard dollars” side, increased earnings and cost savings are gained from fewer support calls, less spent on development, fewer development “redo” cases, less user-testing, increased sales, and so on.

Here are the internal and external ROI measures:

Internal ROI

• Increased user productivity
• Decreased user errors
• Decreased training costs
• Savings gained from making changes earlier in design life cycle
• Decreased user support

External ROI

• Increased sales
• Decreased customer support costs
• Savings gained from making changes earlier in the design life cycle
• Reduced cost of providing training

The B2B UX redesign case studies below represent the results of our research into the top 15 global design agencies/consultancies who performed B2B UX design/redesign projects. These case studies come from prominent design/consulting firms such as Accenture Interactive , Boston Consulting Group , McKinsey , Forrester , IDEO , Frog Design , Fjord , Adaptive Path , and others.

ROI of UX: B2B Redesign Case Studies

Bank of america.

The giant bank identified and funded a UX redesign project to improve its online enrollment application for online banking. In developing the business case, the design team identified yield (or the percentage of customers completing the process) as the primary metric.

Prototyping and testing various design solutions with yield as the primary success metric proved a successful design strategy. The week the new registration form went live, the yield metric nearly doubled, and exceeded the desired ROI benchmark. This was a win for the design team, as well as the business unit that sponsored the project.

General Electric Software UX Unification

Known for its industrial expertise, by 2010 General Electric Co. had quietly become the world’s 14th largest software developer by revenue. These capabilities had grown opportunistically, primarily in response to requests from specific clients . As a result, little software consistency existed across the company and significant development efforts were invested in problems already solved in other divisions.

Overall, users of GE software reported that the quality didn’t reflect the excellence of GE’s hardware engineering. GE leadership decided to make an investment in creating a common software platform for the company. The Software Center of Excellence developed a UX Center of Excellence that would guide GE management, and drive the culture change to ensure that their software user experience matched their well-earned reputation for stellar hardware engineering.

Leaders, engineers, and designers collaborated to build processes and tools to support culture change together with a core foundation of design tools and success metrics that would support its UX practice. In the first year after its launch, the IIDS generated a 100% productivity gain in development teams and saved an estimated $30 million for the company. These digital transformation initiatives provided the foundation for GE Digital—and GE’s leadership in the industrial internet.

Cathay Pacific

Cathay Pacific Airways is known for its leadership in the adoption of new technologies. The airline was the first in the world to announce plans to install in-flight email, the first to link its Airbus aircraft to its maintenance centers electronically, and the first in the world to auction air tickets online.

For company employees, a staff of eight to ten people work full-time to answer questions and book travel. Working with a design consultancy, Cathay Pacific created a new online portal called TravelDesk, a one-stop shop for staff travel.

The portal design project resulted in significant cost savings for the company:

• The online portal reduced call-center volume (employee benefits center regarding policy questions, and service center regarding flight availability).
• It increased productivity. Ground staff at the airport previously spent significant time managing the listing and check-in process for employees using their travel benefits. This project reduced the time required for these tasks.

Virgin America Website Redesign

Virgin America was on a mission to make flying fun again. In 2014, the airline decided to reinvent the digital travel experience, and in order to meet the needs of modern travelers, create the world’s first responsive airline website. The company decided to design and engineer a new digital platform that could respond to modern travel needs and behaviors.

After successfully A/B testing the new design against the old, Virgin America’s reinvented responsive site was released. They announced an IPO following two successful quarters running the new site that had exceeded performance goals in the following areas:

• 14% increase in conversion rate
• 20% fewer support calls
• Flyers booked nearly twice as fast, on any kind of device

In a recent major iteration of HubSpot , the company decided to re-think the user experience on its site, starting from the ground level with user feedback. They tested entirely new conversion methods, copy messaging, and even visual treatments. As part of the process, they pushed countless experiments live, and iterated with each piece of feedback, putting the user in control.

The result? The conversion rate doubled (tripled, even, in some areas). As HubSpot receives upwards of 10 million visitors per month, one can imagine the impact this had on revenue.

Continental Office B2B Website Redesign

With a brand refresh just a few months prior, Continental Office, a customized workplace solution provider, needed to update its 6-year-old website. The team wanted to ensure they were integrating buyer personas to provide an engaging user experience complete with relevant content marketing.

The old website was fine at the time but wasn’t built around telling the whole story while understanding the customer journey.

In creating that great user experience, you have to stay relevant with what people are looking for and then build your website around that, which I believe is what we did and has allowed us to have these successful results. - Rachel Iannarino, Vice President, Marketing.

The results of getting to know customers and building a website around that speak for themselves. Through the redesign strategy , traffic increased by 103% year-over-year and net-new contacts increased by 645%.

Even though we had such great results last year, it’s already up — the number of new contacts is up over 80% from last year already. And I can’t lie; I keep waiting for these numbers to kind of plateau, but fortunately for us, the results just keep trending in a positive way - Iannarino said.

Music & Arts

Music & Arts sells musical instruments and comprises 150+ retail stores, and 300+ affiliate locations. Their sizable eCommerce site had numerous usability problems that hindered online sales.

There is a detailed case study of this UX redesign project on the Toptal Design Blog: “ eCommerce Redesigned: How Minor Changes Made Major UX Improvements .”

After a three month UX redesign project that significantly improved basic usability issues (consistency, simplicity, user flow, system feedback) their online sales increased around 30% year-over-year .

This ad-tech platform’s UX redesign project took over a year. The B2B platform was about 7 years old and was made up of a hodge-podge of UIs, a variety of different-looking web-applications that were created at different times. As the company was maturing, it needed a unified UX design and a brand-consistent look-and-feel.

As a result of the UX redesign, NPS increased from 6 (detractors) to 9 (promoters) over 3 months immediately after launch when measured against the old platform’s satisfaction data.

Final Thoughts

A very interesting experiment related to the ROI of UX was conducted by the Geoff Teehan, Director of Product Design at Facebook in 2006. They called it the “UX Fund.” The $50,000 fund invested in companies that focus on delivering great user experiences. The hypothesis was that the ROI of UX should be reflected in their stock price over time.

Over a ten year period, from 2006 to 2016—including a major financial crisis in the middle of it—the “UX Fund” returned 450% vs the Nasdaq’s 93.2% return (that’s 45% annual return over ten years which beats any other asset class). You can read more about this experiment here .

Despite the evidence that UX design investments enhance customer experience and address business problems, executives still find it a challenge to define the financial benefits using traditional ROI measures. UX designers best serve businesses if they can not only create great “designs that work,” but are able to articulate and convincingly demonstrate tangible business results and KPIs to executives and stakeholders.

In order to be convincing and really get to the heart of what executives need to hear, UX designers need to think in similar terms to business leaders. Think: how can we best provide business value? If we do this, what will the return on our investment be? What metrics will demonstrate that we’ve made the right choices?

If done well, design can help bring order and coherence to the disorder that is the current state of the B2B world and enterprise applications. A 2016 design study of 408 different companies found that the more a company focused on and invested in design, the more they saw sales increase and experienced higher customer retention rates—customer engagement soared, and they moved through product cycles faster. All this simply because they put UX design, and more importantly, the customer, at the very heart of their business.

Clearly, good user experience is good for business . Today it’s become part of a UX practitioner’s job to offer decision-makers a compelling demonstration of the true value of exceptional UX design, and that there is indeed an impressive ROI in UX.

Further Reading on the Toptal Blog:

• The Value of Design Thinking in Business
• Product Strategy: A Guide to Core Concepts and Processes
• Collaborative Design: A Guide to Successful Enterprise Product Design
• Customer Journey Maps: What They Are and How to Build One
• Great Questions Lead to Great Design: A Guide to the Design-thinking Process

Understanding the basics

How can you improve your website.

One of the many ways to improve a website is to do a user experience evaluation by bringing in a UX expert. A UX expert would consider the website’s content, its main customers, and core functionalities, and come up with a user-centered redesign solution.

What does B2B mean?

B2B is an acronym which stands for “business to business.” It signifies the exchange of products or services between businesses, rather than between businesses and consumers.

What is the difference between B2C and B2B?

B2C is a shorthand for “business to consumers” whereas B2B is an acronym which stands for “business to business.” Consumer-oriented eCommerce websites are an example of a B2C.

What are user experience goals?

The goals of user experience, or “UX,” are to deliver an experience to customers that delight and ensure that the right content, features, and functionality are presented in the right place, at the right time, in the right way.

What are UX and usability?

UX stands for user experience which refers to the “experience” an end-user has when using an interactive product. Usability refers to how easy it is to use a digital product. For digital products to work well in the real world, they need to have great usability.

What is the meaning of brand perception?

Brand perception is what’s held in the minds of customers when they hear or see something about a particular brand. Brand perception represents the brand values and quality of a brand, and how a customer would feel and think about a brand.

• Product Design

Miklos Philips

London, United Kingdom

Member since May 20, 2016

About the author

World-class articles, delivered weekly.

By entering your email, you are agreeing to our privacy policy .

Toptal Designers

• Adobe Creative Suite Experts
• Agile Designers
• AI Designers
• Art Direction Experts
• Augmented Reality Designers
• Axure Experts
• Brand Designers
• Creative Directors
• Dashboard Designers
• Digital Product Designers
• E-commerce Website Designers
• Full-Stack Designers
• Information Architecture Experts
• Interactive Designers
• Mockup Designers
• Presentation Designers
• Prototype Designers
• Sketch Experts
• Squarespace Designers
• User Flow Designers
• User Research Designers
• Virtual Reality Designers
• Wireframing Experts
• View More Freelance Designers

Join the Toptal ® community.

Case study: UX & UI redesign of a corporate website.

Secrets of the design process, effective tools and key learnings..

Albina Cholak

Octopus Labs London

The beginning.

Strong digital presence is the key in our highly competitive environment and this story is about a 3-month journey we took as designers to reimagine the old website for a big corporate — Octopus Group.

Octopus Group doesn’t think like most companies. The whole ethos, for their inception 17 years ago, is based on building a better tomorrow through challenging convention — whether that’s through investments, healthcare, fintech or renewable energy. Their underlying goal is to create friendly and innovative services to UK citizens.

And the design challenge was

Their website, however, didn’t reflect this dynamic. Aesthetically it was a visual dumping ground which didn’t do justice to the brand purpose. There was no structure to the content. It amplified confusion rather than coherency.

The solution: a website redesign.

We needed to create a system and that could logically to represent a wide breadth of content they started producing, including e.g. leadership blogs, research and reports, articles, etc. Also, to this it was important to come up with a modern and appealing visual style that will shine a light on the brand personality.

Make it easy to understand the company value and facilitate positive user experience through informative and relevant content to navigate potential clients in the right direction.

Designers crew

When you embark on this kind of journey, make sure you’re in good company. Our team of trusty designers — Albina (UX) and Stefano (UI).

Design process

When you have a myriads of business requirements, constraints and politics, a systematic approach is paramount. Design thinking with a proper kick-off allowed us to define a business vision. This was followed by discovery and delivery phases. This article highlights key learnings.

Discovery phase aimed to understand and frame a problem area, collect requirements and analysing the context of use. Deliverables: user segments, sitemaps, wireframes.

Delivery phase is the solution space that makes ideas tangible, usable and beautiful. Deliverables: UI & interaction design, design system.

“The greatest challenge to any thinker [designer] is stating the problem in a way that will allow a solution.” — Bertrand Russell.

Discovery phase

I strongly believe that defining how any solution should work, what problems to solve and what gains to focus on are the core and fundamental aspect of any successful design process. Even if it feels like you know what is the answer to a brief are, take a step back and dive into research to define whether you’re focusing on the right problem to solve. Here, the beginner, ‘curious’ mindset plays a big part in revealing correct business objectives, real user needs and technological possibilities.

Therefore, we started our project by investigating internal (company) and external (users) drivers to crystallise the area of a potential solution, outlining how the website should work, but not how it should look. The process was divided into five steps:

Step 1 — Kick off to refine business requirements.

“Requirements cannot be “gathered” from your stakeholders like Easter eggs — they must be defined, through research and scenarios.” — Alan Cooper.

First things first, it took us a few workshops with key stakeholders (the business) to understand brand vision, overall goals and challenges. We needed their perspective on:

• internal : business needs, requirements, goals;
• external : context, competitors, best practices;

Documenting insights is important as this becomes a single source of truth which will inform the decision-making process and foster team alignment.

Step 2 — Site and Content Audit

To provide users with an enjoyable experience on the website it’s important to anticipate their needs to provide relevant information on each step. Therefore, different user types and their journeys informed the site structure. Based on this, it was possible to simplify user-flows between pages by removing unnecessary pages, merging existing and adding new when needed.

Step 3— Context exploration. When we had a general idea of the purpose of the website, we needed a system for presenting different content. Here, we got an inspiration from BBC, The Guardian, etc.

Step 4— Modular system . Following initial discussions about building a flexible modular system to represent various content, for our wireframes we created various elements based on the same logic and style with different hierarchy, balancing between images, headlines, and various supporting copy. Ultimately, we managed to create the whole website by using the elements presented below 👇

Step 4 — Wireframes Finally, once all of the planning and foundation was built, we were ready to play with wireframes for the core desktop experience. Once you know WHY and WHAT we are doing in the written form constructing pages is a piece of cake. Of course, we went through circles of feedback, but it was pretty easy to move things around without involving design ego for graphics.

The main point: each page needs to convey the goal and present main user questions and concerns. This information needs to be structured logically to allow users to scan the page quickly.

Content always comes first, once you know what the page needs to achieve you can then focus on elements and graphical composition.

• Start your design process only after you’ve idenitified business goals, user problems and a roadmap — where deadlines and deliverables are clearly outlined and agreed with all stakeholders.
• Document all the key points from day one: business needs, problems, stages of design, feedback and discussions in one document (which become our single source of truth).
• Think business, understand their revenue stream and learn their language. Listen to any feedback given from business (you know how to do your business, they know their business!). Don’t fall in love with your design ideas — listen carefully to what business says. The best ideas can come from anywhere.
• Involve main stakeholders and especially developers at the beginning of a project to co-create ideas together.

Delivery phase

Once logic and functionality are defined, the visual design process doesn’t take long, and turns into an enjoyable meditation on aesthetic and design quality. Using wireframes and the modular system, the UI was created, following brand visual guidelines.

During this stage, a well-developed digital design guidelines helps you justify design decisions and deal with alternative opinions within the team.

Another important aspect was to provide all necessary materials, guidelines and recommendations for developers. Create this project together as a team. Don’t just hand over the designs and leave lots of decisions to a dev team. On the contrary — be a driving force to maintain high design quality to make your live project pixel perfect.

👉 Live website Octopus Group .

Delivery phase: key learnings

• Designers own a live result, therefore, we need to guide and support developers whilst they’re working on the project.
• Define your design patterns and language first. Consistency — is what defines good design.

Overall, reflecting on this process helped us to extract the key pivots that helped us, blockers that we should eliminate and all the learnings that we can use to improve our process next time.

Key takeaways:

• Never start design process until you get all business requirements
• Never jump in the visual design until you happy with your how solution works (UX).
• Always spend time during discovery process, to put some thinking on whether you are doing the right thing…And validate all assumptions before any line of code is written.

🚫 The process that we followed was great but still far from being perfect:

🎉 Ideal process —more time for problem definition and research:

Questions, ideas, projects or just a deep chat about design as a process?

Find me here: Facebook , Linked In , Instagram .

Or join my design channel — Design Insights in Telegram.

Written by Albina Cholak

Staff Product Designer @ Deliveroo

Text to speech

UX Case study: Redesigning Zara Website to improve its web presence and user experience

Mouchumi Gogoi

As part of a core module of my master’s program, Managing Businesses Web Presence, I teamed up with another student, Hala Al Daboubi, to review the usability and web presence of the Zara website, then redesigned it to improve that.

Background:

Global fashion brand Zara is one of the world’s largest retailers, online as well as offline. Inditex- the parent company suffered a significant loss in 2020 due to the current pandemic (Inditex, 2019). Consequently, they are trying to improve their online revenue to compensate for this loss.

Zara’s website has been regularly criticised for its bad design and poor user experience.

Until the onset of the pandemic, Zara’s brick-and-mortar stores were the major source of revenue. But as coronavirus caused a 44% sales slump , Inditex had to boost online retailing and close up to 1200 stores worldwide.

That’s where a website with a strong business presence and a great user experience comes into play. Because an appealing website interface can increase a business’ income by converting visitors into buyers.

Some of the issues that the Zara website has been criticised for are:

*I am elaborating on them in the ‘ usability review insights’ section.

Problem Statement:

How might we improve the user experience and web presence of the Zara website?

Redesign the existing Zara website.

Any business must have a well-designed website with a user-friendly interface and navigation to establish a strong web presence and generate online revenue. Zara website violates many UX heuristics and WCAG guidelines, resulting in various usability issues. As a result, redesigning the site made more sense than fixing one or two problems.

Our solution includes:

Business goals:

The following were the business goals behind the redesign:

Design Process Walkthrough

Usability review insights:.

After critically analysing the website, we found the following key issues:

1. Quirky aesthetic:

Zara has adopted a clever marketing tactic with their quirky way to display products to gain attention online. However, the truth is this bizarre campaign imagery has sent many shoppers into a state of confusion, despite the brand being quite successful in the endeavour to get people talking.

“E-commerce sites lose almost half of their potential sales because users cannot use the site. In other words, with better usability, the average site could increase its current sales by 79%.”- Jakob Nielsen

2. Poor Usability:

Zara’s website is a classic example of poor usability.

• Its hamburger menu hides the primary and secondary navigation .
• Same text labels as primary navigation for arrow buttons in its above the section’s carousel confuses users.
• Browsing products is not a straightforward experience on the Zara website.

3. Accessibility issues:

Violation of Jakob’s law, texts in all caps , low contrast colours for small-sized fonts are some of its accessibility issues.

Competitive analysis:

Compared to Zara’s main competitor, H&M, Zara’s website scored average and poor on usability.

Fast-fashion retailer H&M is the main competitor of Zara. We analysed both the websites based on usability and their web presence. We analysed and evaluated the efficiency and usability of Zara’s website with a specific focus on its desktop homepage, product page and individual product checkout page. Although Zara’s website violates many WCAG guidelines and usability heuristics, the following table highlights the major violations :

As a result, for online shopping, users prefer the H&M website over Zara as it is more user-friendly and offers a better user experience.

User Research:

Participants feel frustrated and irritated with the current website.

As the project had a limited timeframe, we created an online questionnaire to understand Zara’s existing customers’ opinions about its current website and better understand their shopping habits. Given the ongoing pandemic, an online questionnaire provided a larger sample size without affecting our research scope because of limitations imposed by social distancing.

Pain points:

• Difficulty navigating through the site .
• Confusing product images .
• Difficulty reading texts/information .

Target audience:

Young price-conscious audience with lower to mid-income levels.

Zara’s target demographic is a young price-conscious audience with lower to mid-income levels. They are highly responsive to trends. So, Zara’s strategy is to offer cutting edge fashion at an affordable price. As most of their customers have a clear set of interests and a shared taste for cheap yet high style designer clothes, their value proposition is fashionable and affordable clothes.

User persona and Empathy map:

Using the data we gathered from secondary and primary research, we created our user persona Charlotte and an empathy map to understand her needs and frustrations. This was our first ideation activity in response to the design challenge.

Initial wireframes:

We created low-fidelity wireframes to visualise the site’s flow and layout. Based on those low-fi wireframes, mid-fi wireframes were created digitally.

Things we considered while creating the wireframes:

• As global navigation, we used a horizontal menu with dropdowns .
• We removed the text labels from the arrow buttons on its above the fold section.
• We added Instagram stories to the homepage.
• We made the newsletter signup prominent .
• We added icons to the social media handles and redesigned the footer .
• We changed body copy and headings to sentence cases .
• We used a fixed grids view to display products.
• We added a hover option to quickly view product information like available sizes, price, colours, etc and a favourite button .
• On product pages, we also added an advanced filter option .

Mood board:

Once we had the wireframes ready, we created a mood board of design elements we wanted to include in our solution. The creation of this mood board helped us keep the style and aesthetic of the site consistent with our goals and expectations. It highlights the key design elements, styles, and trends used to refine the design style.

High-fidelity wireframes and Prototype:

With the moldboard ready, we then started creating high-fidelity wireframes to build the interactive prototype.

User testing:

We conducted moderated task-based usability testing to verify the prototype’s usability and functionality.

We asked the participants to compare the navigation and overall layout of Zara’s website and our prototype. Then they performed tasks such as finding an item, placing an order, etc.

• Participants completed all the tasks we asked them to perform on the prototype . The participants, however, had difficulty navigating the original Zara website and finding items.
• Participants were impressed with features such as the colour options for names, advanced filter options, and Instagram stories.
• One of our participants was colour blind . He said that such features would help him recognise colours.

Project reflections:

• I learned about web usability and managing a better web presence through this project. Further, working collaboratively with another student was a great learning experience. We both come from different backgrounds, yet we work proactively to complement each other’s skills.
• Zara’s current website violates many usability rules and UX laws. The information architecture, navigation, layout, and overall experience are not user-centric . Therefore, we decided to redesign the website to create an experience that provides an optimal user experience. From the user feedback we received during our first phase of user testing, it is evident that our prototype provides a better user experience .
• However, as mentioned in other projects, our user research was limited due to the ongoing lockdown. So if I had to work on this project again, I would like to conduct focus groups during the empathy phase to get more detailed insights about their experience and expectations on the Zara website.

Thank you for reading the case study. I will appreciate your valuable feedback so that I can improve. To discuss more on this project or about UX design, let’s connect on LinkedIn .

Written by Mouchumi Gogoi

Junior Product Designer at Financial Times

Text to speech

How To Conduct A UX Redesign

No matter what context you work in as a UX designer, at one point or another, you’ll probably be asked to redesign a user experience. At the start of your UX career, you might even conduct an unsolicited redesign to help build up your portfolio.

Either way, you might find yourself redesigning a website, an app, or the interface of a device. No matter what you’re redesigning, though, your process should follow a similar series of steps and encompass a similar set of questions and concerns.

In this article, we’ll cover the following topics:

• Redesigns from refresh to complete overhaul
• Reasons to conduct a redesign
• Steps for conducting a UX redesign
• Showcasing redesigns in your UX portfolio
• Key takeaways

Let’s jump in!

1. Redesigns from refresh to complete overhaul

UX redesigns can have vastly different degrees of complexity. On the one hand, the product may simply require a visual refresh to make it seem more modern and visually interesting. If this is the case and no noteworthy user experience changes are needed, the UX designer’s job may be to simply review the art director’s work and ensure nothing about the user experience is broken by the aesthetic overhaul.

You might also be tasked with redesigning the user experience for a specific part of a product’s user interface . For example, perhaps the users of a specific website are having trouble navigating through a shopping cart or finding information on shipping and handling. If that’s the case, the UX designer’s job is not only to redesign that piece of the user experience; it’s also to make sure the redesigned interface fits in seamlessly with the original interface and doesn’t break any links or other functionality on the product.

So if you’re redesigning the way a user books a table on a restaurant’s website, for instance, you need to make sure users can successfully navigate to your redesigned reservation system and that they can navigate away to a different part of the website once they’ve completed their booking.

Finally, a product might require a complete overhaul. That means the UX designer will be responsible for understanding every single piece of information that must go into the redesign and how that information fits together. Then the UX designer must determine how to improve upon the prior design while avoiding changes that are so radical that they confuse and frustrate the product’s existing users. It’s a tough balancing act that requires attention to detail and a deep understanding of users’ goals.

2. Reasons to conduct a redesign

The very first question a UX designer should ask clients or stakeholders about a redesign is why they want to conduct it. There are many legitimate reasons to conduct a redesign, according to the Nielsen Norman Group . These include:

• The site looks outdated
• New branding needs to be implemented
• Technological advances have made the site seem antiquated
• The site isn’t optimized for mobile or social media
• The information architecture of the site is a mess and many links are broken
• The user experience is confusing and there is no unified structure
• Analytics show users have trouble doing what they need and don’t stick around

While the first two reasons on the list may simply require a visual refresh, the others involve important UX changes.

You may be tasked with conducting a redesign following a UX audit . However, sometimes a client or stakeholder will request a complete UX redesign simply because they look at their product’s user interface all day and are bored. This can lead a client to focus on the things they don’t like about their product’s user experience. On the other hand, users probably feel differently. Users are creatures of habit. And since they’re spending far less time with a product’s user interface than the client, they’ll typically see the familiarity of the UI as a positive.

Consider this: If Amazon.com completely overhauled its website in order to make the website seem more innovative or interesting, but in the process changed how to find items, how to add them to your shopping cart, and how to check-out, what would be your response? If you’re like most people, you’d be frustrated. You already know how to complete tasks successfully on Amazon. Anything outside of an incremental change will make that more challenging and time-consuming. No matter how cool the newly implemented changes may seem, most users won’t be impressed. Their goal when they go to your website, app, or other UI is to complete their task and meet their goals in as little time as possible.

So if a client or stakeholder wants to completely rehaul a product’s user experience but they don’t have a good reason for doing so, you as the UX designer must make sure to advocate for the product’s users. This could mean discussing other options, like a visual refresh or small UX changes with your client.

One way or another, it’s essential to make sure any changes you make, even on a complete overhaul, are not made for the novelty of the changes. It can be tempting to be as creative as possible. However, you’re better off understanding what users are already familiar with from the product (based on their mental models ) and implementing changes that respect what your users like while mixing in some new but understandable evolutions.

Unsolicited redesigns

If you’re a fresh-faced UX designer just starting out, you might also conduct a hypothetical—or unsolicited—redesign. This is a great way to put your newly acquired design skills into practice, and also gives you a case study to add to your portfolio in the absence of a real client project.

An unsolicited redesign is, quite simply, a hypothetical project of your choice . Perhaps there’s a particular website you use regularly that you think could benefit from an overhaul, or a certain app that could be upgraded with a few simple tweaks. Just like a “real” client project, you’ll redesign the experience and document your process from start to finish in your portfolio—just like Priyanka Gupta does in her unsolicited redesign of the Sephora iOS app . Just remember to clearly state that you’re not affiliated with the company in any way, and that you haven’t actually been hired to conduct a redesign. Otherwise, the process is the same as for a real UX redesign. Let’s take a look at that now.

3. How to conduct a UX redesign: Step-by-step

1. understand existing users.

In an ideal world, all UX redesigns would start with user research and analytics. Analytics for an existing product will help you understand how users are currently using the product, and identify the biggest pain points they encounter based on how long they use the product and how many screens they visit. This also gives you hard data that will help you make specific recommendations for where to focus the efforts of your redesign.

Whether you have access to analytics or not, you should perform user research on the product you are redesigning. As Nielsen Norman’s Hoa Loranger explains, “Your old site is the best prototype for your new site.” Make sure you take advantage of that by learning from the existing product. Gather user feedback on what they dislike about it, while also making sure to ask about what users like about the current product. All of this information will help fuel your redesign.

2. Understand business goals

It’s essential to understand what the business wants to get out of the redesign. What do they know about their existing users that can help you conduct your redesign? The UX redesign solution should be specific to the business’ goals while keeping user needs in mind. If the business wants to make it easier to navigate to specific information, increase page views, or complete more sales, the user experience must be designed to support those goals by making it easier and more beneficial for users to do those things.

3. Competitive analysis

Another source of information for a redesign: analyze competitors’ products . Take a look at competitor’s UIs to see what they’re doing that’s different. What works? What doesn’t work? Are there innovative solutions that you can borrow that will better engage your users? Are there things they’re doing that you want to avoid?

In addition to researching users’ reactions to the product you’re redesigning, you can also perform a study to see how users respond to competitors’ products. Explore how users interact with the interface and navigate through the user experience, including what they find clear and easy to use and where their pain points are.

4. Redesign

After gathering data from the existing product and competitors and ensuring you understand the business goals for the project, you should be ready to start redesigning in earnest. You’ll often want to start with a site map of the redesigned information architecture. You’ll also want to make sure you understand the various ways users may work through the site to meet different goals by creating user workflows. Once you have a handle on these top level issues, you can start wireframing and creating prototypes for the redesign. Ideate on potential user experience options until you come up with a solution that works best for both the business and users.

5. User testing

Finally, test your redesign with users, preferably users of the previous iteration of the product. Get feedback on what they like about the new design and what may frustrate them. Keep in mind that any redesign is likely to ruffle some users’ feathers. But user testing will help determine if there are any real usability problems with the redesign. If there are, continue to iterate on the redesign until the user experience is working the way it should.

4. Showcasing redesigns in your UX portfolio

While it’s not essential, it is valuable to include at least one redesign project in your UX portfolio. To most successfully showcase a redesign, make sure you can explain why the redesign was done, what your solutions were to the challenges presented by the client, and why you decided to implement any noteworthy features. Showcase the redesign process in the order it was conducted—from studies on the previous and competitors’ sites, right through to user workflows and information architecture overhauls to page-level redesigns—in order to tell the story of the redesign. You don’t have to include everything, just enough to make sure the process you went through is clearly represented. Your goal should be to clearly communicate to someone looking at your portfolio how you improved on an existing product with your redesign and the journey you took to get there.

5. Key takeaways

Now you have a clear process to follow in order to conduct a UX redesign—be it a real client project, or an unsolicited redesign for your UX portfolio. To sum up:

• Redesigns can run the gamut from a visual refresh to a complete user experience overhaul.
• The most important question to ask before starting a redesign is why the client or stakeholder wants to conduct it.
• There are many reasons to conduct a UX redesign including a product that is no longer optimized for new technology, convoluted information architecture and a confusing user experience.
• The kind of redesign that is undertaken should be based on user needs, not boredom on the part of clients or stakeholders who work with the user interface regularly.
• A good UX redesign starts with studying the existing UI, as it is the best prototype for your new product.
• Make sure you understand your clients’ business goals and how they can be seamlessly integrated into the redesigned user experience.
• Research competitors’ products to see what works and doesn’t work about their UX.
• A UX redesign should consist of a variety of deliverables including user workflows, site maps of the information architecture, wireframes, and prototypes . Iterate on the new design and perform user testing until the user experience is working as it should.
• It’s ideal to include at least one redesign in your UX portfolio that tells the story of the challenges of the project.

Now that you know how to approach a UX redesign, you might want to learn more. If so, you’ll find the following articles useful:

• 9 Awesome UX Portfolios From UX Design Graduates
• What is a Wireframe? A Comprehensive Guide
• The 5 big differences between UX and UI design

How a digital marketing agency improved page one rankings by 36% with an SEO-focused website redesign

Google’s recent emphasis on page experience means your website performance can make or break your organic visibility. User experience and page speed are playing an increasingly important role in how your content is ranked, leaving many marketers scrambling to update their websites.

Unfortunately, website redesigns are a significant undertaking for marketers, especially those inexperienced in search engine optimization (SEO) . And undertaking any type of website refresh without a strategy in mind can actually cause more harm than good.

Whether you’re doing a complete website overhaul or tackling your updates in phases, it’s important to follow website redesign best practices . When done right, these changes can give your rankings and traffic a major boost. 

Download the case study

Why strategic website redesign is important.

Some marketers mistakenly believe that a website redesign is a surefire way to rank better and drive more traffic. In fact, it’s ingrained in many marketers’ minds that a complete overhaul is needed every two or three years — but that simply isn’t true !

The reality is that every website redesign has the potential to tank your rankings. Changes to design, architecture, and content can put your organic visibility at risk if you don’t fully understand what elements of your website are driving traffic in the first place. Good website redesign SEO means taking the time to pinpoint your current website’s strengths so you can build on them and identifying its weaknesses so you know what can safely be eliminated. You never want to change your URLs, rewrite content, or delete pages — all common redesign tasks — without first understanding its impact on your SEO. 

In fact, during this process, you may find that your website doesn’t need a full redesign at all! Modern content management systems, like WordPress and Drupal, give you the option of an iterative design approach that allows you to work in planned phases. These regular, incremental updates can be a major boon for organic visibility when done strategically.

Improving keyword rankings with a website redesign

With the Page Experience Update rolling out in June 2021, Pure Visibility was motivated to make some long-needed changes to the website to better optimize for Core Web Vitals and overall visibility.

Our team decided to make the most of its limited resources and be strategic about our redesign. Instead of an entire website overhaul that traditional redesigns call for, we decided to first focus on foundational updates that would improve page speed and usability. Our goal was to make the website faster and more user-friendly for both our visitors and our own marketers.

Here are some of the strategies we used, what you can take away for your own redesign, and how these changes gave us a boost to our rankings and organic traffic. 

Picking a faster WordPress theme

This website refresh began with research around a new WordPress theme that would be fast and light on code. We eventually decided on the Astra WordPress theme, which we found lightweight and easy to use. 

Takeaway: WordPress is the most popular content management system in the world and commands 40% of website market share. ( source ) That being said, not all themes are created equal. When picking a WordPress theme, look for something responsive, user-friendly, and secure. Avoid bloated code that could slow down your website or leave it vulnerable to hackers.

Eliminating custom CSS

Once we had made a decision on the theme we began eliminating custom CSS that was bogging down the existing site load. This is a common problem for many marketers and developers who want to customize some element of their website. 

In that same vein, we moved off of Elementor, which was the main culprit for slow loading on the old website. The website builder was adding unnecessary code and made it difficult for non-developers to manage the website.

Takeaway: Although customization for little things here and there is fine, these changes can build up over time. Eventually, there’s so much custom CSS that it slows down the website and makes it harder to manage. Make sure to customize carefully.

Switching servers

Since we wanted to make our website easy to manage for our internal team, we also decided to switch servers to Kinsta. We found Kinsta servers to be much more affordable than what we were currently using, but with many of the same offerings as larger competitors. The user interface for the admin panel was more intuitive, with straightforward documentation in the knowledge base. 

Takeaway: Some servers are aimed specifically at developers, making them harder for your marketing team to manage. Companies without a dedicated developer (and even those with one!) should look for a user-friendly server so changes can be made easily.

Removing unnecessary WordPress plugins

Kinsta’s setup doesn’t let you use the Autoptimize plugin, which turned out to be beneficial — the plugin can slow down the website if not used correctly. We took the redesign as an opportunity to remove other unnecessary plugins as well.

Takeaway: Unnecessary plugins can bog down your loading times and leave you more vulnerable to security risks. Audit your plugins and keep only what you need.

Utilizing a Content Delivery Network

To further speed up our website, we decided to utilize a content delivery network (CDN), which was easily set up through Kinsta. This change was responsible for a lot of the lift that sped up our pages post-relaunch, especially for images.

Takeaway: A CDN uses cached content to quickly and reliably serve website visitors. Consider implementing for better website performance.

Website redesign results

Page speed improvements.

The changes we made during this stage of the redesign helped our pages load more quickly for a better user experience. 

• After relaunch, our grade in GTmetrix rose from a “B” to an “A”. 
• Our performance in PageSpeed Insights for desktop also saw an improvement, moving from a score of 83 to 94.

SEO improvements

These strategic changes also helped us become more competitive in the search results. Just three months after launch our website not only ranked for more keywords overall, but had more keywords ranking on the first page of search results:

• From 2,841 total keywords to 5,964 (110% increase) 
• From 424 page one rankings to 578 (36% increase)

Since less than 25% of people visit the second page of search results , it’s unsurprising that this boost to page one rankings also created an uptick in organic visits. During the three months post-launch, our organic traffic increased by 85% compared to the same time period last year. 

Our keyword rankings have continued to climb over time, and with the most significant issues taken care of, we can now move on to phase two and focus on revamping copy, tweaking calls-to-action, and implementing other, more traditional redesign efforts!

A strategic website redesign can maximize your organic visibility

Companies with low-performing websites may not need to overhaul their website to improve organic visibility. Making strategic changes with website redesign SEO in mind can protect your current rankings and build on your website’s strengths for further growth.

About The Author

Tarun Gehani

Related posts.

Bane or boon? Website Redesigns Can do More Harm than Good.

Part 1: How to plan a successful website redesign to preserve your rankings and traffic

Part 2: Make Your Website Launch a Success & Keep the Traffic Coming With Our Website Launch Checklist

8 Minute Read

Web Design Case Studies

Real-world examples.

Web design case studies offer a detailed analysis of successful web design projects, showcasing the challenges faced, the strategies employed, and the results achieved.

In this article, I'll explore several web design case studies for companies based in the United States, highlighting the unique aspects and outcomes of each project.

These case studies will cover various industries, from e-commerce and tech startups to healthcare and financial services, providing valuable insights for web designers, developers, and business owners alike.

Table of Contents

• E-commerce Redesign: Wayfair
• Startup Success: Airbnb
• Healthcare Portal: WebMD
• Educational Transformation: Khan Academy
• Tech Industry Excellence: Google
• Financial Services Redesign: American Express
• Tech Startup Excellence: Slack
• Retail Revolution: Walmart
• Automotive Industry: Tesla
• Fashion Retail Redesign: Nordstrom

E-commerce Redesign- Wayfair

• Company : Wayfair
• Industry : E-commerce
• Challenge : Improving user experience, navigation, and site performance
• Key Success Metrics : Increased conversion rates, reduced bounce rates, improved page load times

The Challenge

Wayfair is a prominent e-commerce company in the United States specializing in home goods and furniture. In 2020, they faced several challenges that prompted a complete website redesign. The existing website had usability issues, slow page load times, and a high bounce rate. The challenge was to overhaul the website, enhancing user experience, and ultimately driving more sales.

Strategies and Solutions

• User-Centered Design : Wayfair conducted extensive user research to understand customer preferences, pain points, and expectations. The design team used this data to create a user-centered design that focused on improving navigation and product discovery.
• Performance Optimization : They optimized the website's performance by reducing image sizes, utilizing content delivery networks (CDNs), and implementing lazy loading for images. This significantly improved page load times.
• Mobile Responsiveness : With a growing number of users accessing the site on mobile devices, Wayfair made sure the website was fully responsive. This involved designing a mobile-first experience to ensure a seamless transition between desktop and mobile.
• Clear Call to Action (CTA) : They redesigned the product pages with clear and compelling call-to-action , making it easier for users to add items to their cart and proceed to checkout.
• Personalization : Wayfair implemented personalization features, such as product recommendations based on user preferences and previous purchases, enhancing the user's shopping experience.
• Conversion rates increased by 8%, leading to a significant boost in revenue.
• Bounce rates decreased by 12%, indicating improved user engagement.
• Page load times were reduced by 30%, resulting in better overall site performance.

Startup Success- Airbnb

• Company: Airbnb
• Industry : Travel and Accommodation
• Challenge : Creating a user-friendly platform for hosts and guests
• Key Success Metrics : Increased listings, user satisfaction, and bookings

Airbnb is a well-known startup based in the United States that disrupted the travel and accommodation industry. In the early stages, Airbnb faced the challenge of creating a user-friendly platform that could attract hosts to list their properties and provide a seamless experience for guests looking to book accommodations.

• User-Generated Content : Airbnb focused on user-generated content, allowing hosts to create detailed listings with photos and descriptions. This not only empowered hosts but also provided valuable information for potential guests.
• Trust and Safety : To address concerns about safety, Airbnb implemented a robust identity verification system, reviews and ratings, and secure payment processing, ensuring a level of trust on the platform which in turn increased branding recognition.
• Responsive Design : Airbnb invested heavily in responsive web design to provide a consistent and intuitive experience on desktop and mobile devices. This approach enabled users to browse and book accommodations from any device.
• Local Insights : They introduced a feature that provided local insights, tips, and recommendations from hosts to enhance the guest experience.
• Continuous Iteration : Airbnb continuously gathered user feedback and iterated on its design and functionality, adapting to changing user needs and preferences.
• Airbnb became a global success, with millions of listings and users in various countries.
• The platform has a high level of user satisfaction, with a strong community of hosts and guests.
• Airbnb is a household name and has transformed the travel and accommodation industry.
• The design style of Airbnb has also help to create a new type of web design trend .

Healthcare Portal- WebMD

• Company : WebMD
• Industry : Healthcare
• Challenge : Creating a reliable and trustworthy healthcare portal
• Key Success Metrics : Increased user engagement, trust, and information accuracy

WebMD is a popular healthcare information portal in the United States, offering a wide range of medical content. The challenge was to design a website that could be trusted as a reliable source of medical information and engage users in their health and wellness journey.

• Expert Content : WebMD invested in a team of medical experts and writers to create accurate, evidence-based content. They made sure to provide clear citations and references for all medical information while using a clean typography .
• Interactive Tools : To engage users, WebMD developed interactive tools, such as symptom checkers, BMI calculators, and medication trackers, to empower users to take control of their health.
• User-Friendly Layout : A user-friendly layout design was implemented with intuitive and effective navigation menus , making it easy for visitors to find the information they were looking for.
• Community and Forums : WebMD incorporated community features, such as forums and discussion boards, to encourage users to connect, share experiences, and seek advice from others.
• Mobile Accessibility : Recognizing that people often search for health information on their mobile devices, WebMD ensured that the website was mobile-responsive and provided a seamless experience across devices.
• WebMD is a trusted source of medical information for millions of users.
• The website sees high levels of user engagement, with users regularly accessing the site for health-related queries and information.
• WebMD has maintained its reputation for providing accurate and reliable medical content.

Educational Transformation- Khan Academy

• Organization: Khan Academy
• Industry : Education
• Challenge : Providing free, accessible, and high-quality educational content
• Key Success Metrics : Increased user engagement, reach, and educational impact

Khan Academy, a non-profit educational organization, aimed to make high-quality education accessible to anyone, anywhere. They needed to create a website that not only provided free educational content but also engaged users effectively.

• Vast Content Library : Khan Academy created a vast library of educational content, covering various subjects and grade levels, making it a one-stop destination for learners of all ages.
• Adaptive Learning : They integrated adaptive learning features, where the website could assess a learner's proficiency and recommend appropriate content to match their skill level.
• Progress Tracking : Khan Academy introduced tools for users to track their progress, complete exercises, and earn badges and certificates, providing motivation for continued learning.
• Community Interaction : They fostered a sense of community by incorporating forums, discussion boards, and the ability for users to ask questions and help each other.
• Mobile Accessibility : Recognizing the importance of mobile access, Khan Academy ensured that their website was fully responsive, allowing users to learn on any device.
• Khan Academy's website has reached millions of learners worldwide, making a significant impact on education accessibility.
• The organization's adaptive learning approach has led to higher engagement and improved learning outcomes.
• Khan Academy's online community has become a valuable resource for learners, facilitating peer-to-peer support and collaboration.

Tech Industry Excellence- Google

• Company : Google
• Industry : Technology
• Challenge : Improving search engine user experience and expanding services
• Key Success Metrics : Increased search engine market share, user satisfaction, and service offerings

Google, a tech giant based in the United States, has consistently faced the challenge of improving its core product, the search engine, while also expanding into new services and products. This case study focuses on their core search engine.

• User-Centered Design : Google's design philosophy has always been user-centered. They have continually improved the search engine's user interface, making it clean, simple, and efficient.
• Algorithm Innovation : Google invests heavily in search algorithms to provide more relevant search results and a better user experience. This involves understanding user intent, content quality, and mobile-friendliness.
• Localization : Google offers localized versions of its search engine in numerous languages and regions, ensuring that users worldwide have access to information in their preferred language.
• Voice Search : As voice search became more popular, Google developed voice search capabilities, enabling users to search by voice commands.
• Instant Answers : Google introduced instant answers and featured snippets, providing users with quick and direct responses to common queries.
• Google maintains its dominant position as the leading search engine globally, with a market share of over 90%.
• The company's commitment to user experience and innovation has led to high user satisfaction.
• Google has successfully expanded its services beyond search into areas such as cloud computing, mobile operating systems, and artificial intelligence.

Financial Services Redesign- American Express

• Company : American Express
• Industry : Financial Services
• Challenge : Enhancing online banking and credit card management experience
• Key Success Metrics : Improved user engagement, increased online transactions, and customer satisfaction

American Express is a major player in the financial services industry. They faced the challenge of modernizing their online banking and credit card management platform to offer a seamless and user-friendly experience to their customers. The existing platform had become outdated and required a significant redesign.

• User-Friendly Interface : American Express focused on creating a user-friendly interface, making it easy for customers to manage their accounts, track expenses, and perform online transactions.
• Mobile App Integration : Recognizing the shift towards mobile banking, they integrated their website with a mobile app, allowing customers to access their accounts on the go.
• Personalized Dashboard : After conducting A/B testing research, they introduced a personalized dashboard that displayed essential account information, transaction history, and spending patterns to provide users with actionable insights.
• Enhanced Security : American Express implemented advanced security features, including multi-factor authentication and real-time transaction monitoring, to ensure customer data remained secure.
• Customer Support Integration : They integrated customer support features, such as live chat and a comprehensive knowledge base, to assist customers with their inquiries and issues.
• American Express witnessed an increase in online transactions, with more customers using their online platform for payments and account management.
• User engagement improved significantly, with customers spending more time on the website and mobile app.
• Customer satisfaction ratings rose as a result of the improved user experience and security measures.

Tech Startup Excellence- Slack

• Company : Slack
• Challenge : Creating a collaborative and user-friendly messaging platform
• Key Success Metrics : Increased user adoption, team collaboration, and business growth

Slack is a popular communication and collaboration platform for businesses. In its early stages, it faced the challenge of designing a user-friendly and efficient messaging platform that could facilitate seamless team communication and productivity.

• Simplified Messaging : Slack introduced a user-friendly chat interface with features like channels, direct messaging, and integrations to simplify team communication.
• Third-Party Integrations : They allowed seamless integration with a wide range of third-party apps, enabling teams to work efficiently and access all their tools within Slack.
• Mobile Accessibility : Recognizing the importance of real-time communication on mobile devices, Slack developed a robust mobile app to ensure users could stay connected on the go.
• Customization and Personalization : Slack provided customization options for users to personalize their workspace, choose notification preferences, and integrate apps that best suit their workflow.
• Community and Support : They built a strong community and provided comprehensive support resources, including a help center and user forums.
• Slack has become a go-to communication platform for businesses, with millions of users and numerous organizations adopting it for team collaboration.
• The platform's ease of use and third-party integrations have enhanced business productivity and efficiency.
• Slack's success has led to business growth, making it a prominent tech startup.

Retail Revolution- Walmart

• Company : Walmart
• Industry : Retail
• Challenge : Expanding e-commerce and enhancing the online shopping experience
• Key Success Metrics : Increased online sales, customer satisfaction, and mobile accessibility

Walmart, one of the largest retailers in the world, faced the challenge of expanding its e-commerce presence and providing a seamless online shopping experience for customers while also providing a stronger visual hierarchy . The company needed to compete effectively in the online retail space.

• E-commerce Expansion : Walmart invested in expanding its e-commerce infrastructure, including online product listings, inventory management, and shipping logistics.
• Mobile-First Approach : Recognizing the growing importance of mobile shopping, they adopted a mobile-first approach to ensure a smooth shopping experience on smartphones and tablets.
• Personalized Shopping : Walmart introduced personalized shopping recommendations, based on user browsing and purchase history, to encourage customers to discover new products.
• Online Grocery Shopping : They facilitated online grocery shopping with features like curbside pickup and home delivery to meet the evolving needs of customers.
• Customer Service : Walmart improved customer service with features like live chat support and an easily accessible customer support hotline.
• Walmart's e-commerce platform has experienced significant growth, with increased online sales and a broader customer base.
• The company's mobile-first approach has contributed to high mobile accessibility and a seamless shopping experience on smartphones and tablets.
• Walmart remains a retail giant, successfully competing in the online retail space.

Automotive Industry- Tesla

• Company : Tesla
• Industry : Automotive
• Challenge : Designing a user-friendly electric vehicle configurator
• Key Success Metrics : Increased customer engagement, conversion rates, and lead generation

Tesla, a leading electric vehicle manufacturer, faced the challenge of creating a user-friendly online configurator for their electric cars. The configurator needed to provide a seamless and informative experience for potential customers, allowing them to customize and order their vehicles online.

• Intuitive Configuration : Using aspects of web design psychology , Tesla designed a highly intuitive configurator that guided users through various options, such as model selection, color choices, and features, using a step-by-step process.
• Real-time Pricing Updates : The configurator provided real-time price updates as users made selections, allowing them to see the cost implications of their choices immediately.
• Visual Customization : Users could see a visual representation of their custom vehicle, complete with 3D models, interactive panoramas, and interior views.
• Educational Content : Tesla included educational content about electric vehicle benefits and features, ensuring users were well-informed during the configuration process.
• Lead Generation Forms : The configurator seamlessly transitioned users to lead generation forms, enabling potential customers to submit their configured vehicles for further information or purchase.
• Tesla's configurator significantly improved customer engagement and conversion rates, with many users completing the configuration process.
• The real-time pricing updates gave users confidence in their choices and pricing transparency.
• The configurator served as an effective lead generation tool, helping Tesla capture potential buyers' information.

Fashion Retail Redesign- Nordstrom

• Company : Nordstrom
• Industry : Fashion Retail
• Challenge : Updating the e-commerce website for modern shoppers
• Key Success Metrics : Increased online sales, improved user experience, and mobile accessibility

Nordstrom, a well-established fashion retailer, faced the challenge of updating their e-commerce website to meet the evolving needs and expectations of modern online shoppers. This involved creating a more engaging and user-friendly online shopping experience.

• Modern Design Aesthetics : Nordstrom adopted modern design elements and color tones, including a clean and elegant layout, high-quality product images and graphics , and a focus on user experience.
• Mobile Optimization : They ensured the website was fully optimized for mobile devices, with responsive design and a user-friendly mobile app for seamless shopping on smartphones and tablets.
• Personalization and Recommendations : Nordstrom implemented personalized shopping recommendations based on user browsing and purchase history, helping customers discover new products.
• Product Search and Filtering : The website featured advanced product search and filtering options, allowing customers to quickly find products by category, size, brand, and price.
• User Reviews and Ratings : Nordstrom incorporated user reviews and ratings, providing valuable social proof and assisting customers in making informed decisions.
• Nordstrom's website redesign led to increased online sales and customer engagement, with customers spending more time on the site and making more purchases.
• The mobile optimization efforts significantly improved the user experience for mobile shoppers.
• Personalized shopping recommendations enhanced product discovery and customer satisfaction.

< Older Post

Newer Post >

Matthew McWaters is the owner of LUCID and has over 15 years of experience in web design, web development, and digital marketing. 

LATEST ARTICLES

Glossary: Web Design and Web Development Terms

Bookmark: A Review of the AI Powered Website Builder

Zyro: A Simplistic Review of the Website Builder

Format: A Critical Review of a Website Builder

© 2009-2024 All Rights Reserved | LUCID Digital Marketing Services LLC

Grab yourself a summer promo! Hit the button and see the details

Create, publish and optimize pages with a drag&drop, pixel perfect and mobile-friendly builder

Speed up the creation process with 400+ customizable templates for landing pages, pop-ups and sections

Refine your messaging with AI-generated text, SEO and image edition. All in one app

Test and compare page variants for data-driven decisions and valuable insights on users interactions

Track microconversions in your Dashboard and analyze events and clicks with visual map

Integrate your pages with your favorite mar-tech apps and solutions to get the flow of your campaign going

Drive sales and conversions with irresistible product displays and seamless shopping experiences

Use a reliable and secure platform that smoothly handles millions of visits

How to generate more traffic and get more leads.

How to reach global audience with language versions of landing pages.

How to convert traffic into conversions and grow your business.

How to optimize paid ads to get higher ROAS.

How to take care of your digital footprint.

How to publish non-generic, handcrafted pages.

Master digital marketing with the help from savvy professionals and increase your website’s conversions

Guides for beginners, set-up instructions and creation tips to get started and optimize your pages

A free online course for landing page creators! Learn the secrets of high-converting pages and become an expert

Get the answers you’re looking for – contact us

Schedule a one-on-one meeting with us and learn more about the benefits of our platform

Hire a Design Expert or order an import of your existing page from other platforms to Landingi

Conversion Rate Optimization (CRO) Case Studies: 5 Best Examples

Marcin Hylewski

CRO case studies showcase successful optimization strategies implemented based on data-driven analyses. They provide a solid grasp of knowledge for digital marketers complaining about insufficient traffic, low user engagement, lack of quality leads, and, therefore, poor conversion rates. Did you know that a sole mobile optimization, being only one conversion rate optimization element, can improve conversion rates by 27% , as reported by Invesp?

Although companies currently allocate just $1 to optimizing conversion rates for every $92 spent on acquiring customers , this is shifting rapidly . Based on Google Trends data, Matomo indicates that CRO is one of the fastest-growing topics .

In this article, we present 5 most insightful conversion rate optimization case studies across different digital marketing channels to drive inspiration for your future optimization strategies and interventions.

Key Takeaways:

• conversion rate optimization examples described in case studies are mines of knowledge for marketers trying to boost conversion rates,
• an extensive conversion optimization report is able to provide valuable insights into what works in real-world scenarios, which helps marketers understand successful strategies and apply these lessons in their own activities,
• CRO emphasizes data-driven decision-making by analyzing visitor behavior to ensure that changes made are statistically significant and directly impact conversion rates,
• by learning from conversion optimization case studies, marketers can avoid common pitfalls and make more confident decisions that are likely to convert visitors into potential customers.

Let’s get into it!

What is Conversion Rate Optimization (CRO) Case Study?

A conversion rate optimization (CRO) case study is an in-depth analysis that examines how specific strategies and techniques were applied to improve the conversion rate on a website or landing page . They explore the steps taken to enhance user experience, messaging, design, and other elements that impact conversion, providing a detailed account of the challenges faced, the actions implemented, and the resulting outcomes.

The most comprehensive digital marketing case study (also CRO case studies) includes several key elements that detail the process, strategies, and outcomes of a marketing campaign. These elements are crucial for providing a versatile analysis and insight into the effectiveness of the campaign. Here is the full list.

• Introduction : Overview of the company, industry, and the specific challenges they were facing before the campaign began.
• Objectives/Goals : Clearly defined goals the company aimed to achieve through the digital marketing campaign, such as increasing website traffic, boosting sales, or improving brand awareness.
• Target Audience : Description of the intended audience, including demographics, interests, and online behavior.
• Strategy : Detailed explanation of the digital marketing strategies implemented, such as SEO, PPC, social media marketing, content marketing, email marketing, and more.
• Tactics : Specific actions taken within each strategy, such as keyword optimization, ad placements, social media content creation, or email campaigns.
• Implementation : Timeline and steps followed to execute the strategy, including tools and platforms used.
• Results : Quantitative data showing the outcomes, such as increased traffic, improved conversion rates, higher sales, or better ROI. This section often includes charts or graphs for clarity.
• Analysis : In-depth examination of the results, explaining why certain tactics worked or didn’t work, and the lessons learned from the campaign.
• Conclusion : Summary of the overall success of the campaign, key takeaways, and recommendations for future strategies.
• Client Testimonial : Feedback from the client on the effectiveness of the campaign and the impact on their business.

Of course, sometimes case studies lack a few of the above-mentioned elements, especially customer testimonials or distinguishing strategies and tactics, but generally, the content and structure are similar (even if the order of individual parts is different from the one presented).

CRO case studies are valuable across various use cases. Companies can utilize them for benchmarking , allowing them to compare their own conversion metrics against industry best practices. They are also essential for strategy development , providing marketers with insights and inspiration to craft or refine their optimization plans. When businesses face specific conversion challenges, case studies offer problem-solving solutions by illustrating how similar issues were successfully addressed. Finally, CRO case studies serve as excellent training and educational tools , helping teams learn and implement effective optimization techniques based on real-world examples.

In digital marketing, most valuable benefits related to exploring case studies include:

• practical insights : CRO case studies provide actionable insights backed by real-world data, helping you understand what works and why;
• risk reduction : learning from others’ successes and failures allows to avoid common pitfalls and implement proven strategies;
• inspiration for experimentation : CRO case studies often highlight innovative approaches that can drive inspiration for experimenting with different conversion strategies;
• data-driven decision making : by analyzing detailed outcomes, you can make more informed, data-driven decisions when optimizing your own website or landing page.

Finally, it’s good to know that case studies (CRO case studies, too) also serve marketing purposes . Success stories build credibility for companies that implemented strategies and actions, which finally increased conversions.

5 Best Conversion Rate Optimization Examples

Let’s now jump into practice and explore a few real case studies that resulted in increased conversions. We’ll demonstrate successful CRO strategies implemented for different digital channels, from landing pages, through homepages, classical websites, and app stores to e-commerce sites.

1. Going (Landing Page CRO)

Going is a company that delivers extra deals from its partners to people planning travel. To refine its landing page conversion strategies, they undertook an A/B testing initiative with CTA copy triggered as a potential game-changer.

The primary goal of this experiment was to determine whether a small change in the call-to-action (CTA) on Going’s homepage could lead to an increase in the number of users starting a free trial of their premium plan. The test aimed to validate the hypothesis that showcasing the full value of the premium offering would encourage more users to convert from free to paid memberships.

Challenges to Tackle

Despite having a solid business model, Going faced the challenge of converting free users into paying customers. The existing strategy relied on users signing up for a limited free plan, with the hope that they would later upgrade to a premium version. However, this approach did not fully showcase the advantages of the premium service, potentially limiting its appeal.

Actions/Strategies

To address this challenge, Going’s team conducted a simple A/B test. They tested two variations of the CTA on their homepage:

• Variation A: “Sign up for free” (existing CTA)
• Variation B: “Trial for free” (new CTA)

The only difference between the two versions was the CTA wording, with the intention of determining whether offering a free trial of the premium plan would result in higher conversion rates.

The results of the A/B test were substantial, demonstrating the impact of even minor changes in marketing strategy:

• 104% increase in trial start rate month-over-month,
• conversion rate through paid channels surpassed that of organic channels for the first time,
• enhanced ability to allocate media spend effectively due to improved conversion rates

Lessons learned

A/B testing can be a powerful instrument for increasing conversions on landing pages. If you already have a hypothesis of what element on your page requires improvement, A/B tests allow you to check on real audience which changes are the most effective . Sometimes, even minor tweaks with minimal effort on your end can provide a substantial rise in the number of leads and conversions.

2. Archive Social (Homepage CRO)

ArchiveSocial, a company specializing in social media archiving solutions, embarked on a strategic conversion rate optimization (CRO) journey to enhance user engagement and drive higher conversions through their homepage and ‘Request Demo’ page.

The primary objective for ArchiveSocial was to improve two critical performance indicators: lead generation and conversions. The focus was on refining the user experience across key pages, particularly the homepage and pricing page, to increase visitor engagement and guide them towards taking desired actions.

The analysis revealed several areas for improvement that were hindering the user experience:

• low visibility of CTA on the homepage: the email form wasn’t standing out, blending in with the rest of the content and failing to attract attention;
• complexity of pricing options: the pricing page was cluttered, making it difficult for visitors to make quick and informed decisions about which plan to choose;
• underutilized resources section: the ‘Resources’ section was not easily accessible, limiting its potential to engage visitors further along their journey.

To address these challenges, the company implemented a series of targeted A/B tests aimed at enhancing the user experience and increasing conversion rates:

• Testing homepage CTA improvements The first test focused on increasing the visibility of the primary form field and call-to-action (CTA) on the homepage. The CTA button was redesigned with a distinct color and repositioned within the first fold of the page. Scrollmaps were utilized to monitor how these changes affected user interaction.
• Testing pricing page tweaks In the second test, the emphasis was on improving the click-through rate across the pricing plans. This was achieved by simplifying the plan options and highlighting the primary CTA, making it easier for visitors to navigate towards the ‘Thank You’ page.
• Testing enhancements for “Resources” section The third test explored the hypothesis that placing the ‘Resources’ section in the top navigation bar would boost engagement. This change aimed to create a more intuitive and seamless visitor flow towards valuable content that could assist in their decision-making process.

The systematic approach to CRO testing led to impressive results for ArchiveSocial:

• 101.68% increase in click-through rate,
• enhanced visibility and engagement with the primary CTA on the homepage,
• simplified pricing page resulting in smoother navigation and informed decision-making,
• improved access to the ‘Resources’ section, boosting visitor interaction,

Many optimization success stories prove that the most remarkable results are achieved with a combination of changes applied in one or several stages. Additionally, it’s noteworthy that while many marketers know that fewer form fields and shorter forms increase conversions, it’s even more important to make the form visible (just like CTA should be). Below you can compare Social Archive’s homepage after (version A) and before (version B) the form and CTA optimization.

3. Walmart Canada (Website CRO)

Walmart Canada embarked on a responsive redesign of their website, focusing on improving the user experience across all devices. Despite the challenges, their efforts led to a significant boost in conversions, particularly on mobile.

The primary goal was to create a fully responsive site that catered to all screen sizes, improving both the aesthetic and functional aspects of the user experience, especially on mobile devices. The previous design looked aged and was inadequate for the youngest generation of clients.

The main challenges included an outdated mobile experience with poor aesthetics and slow loading times. Additionally, the existing design didn’t effectively accommodate the growing number of mobile users.

Walmart Canada conducted extensive usability testing on both old and new designs. They implemented A/B testing to optimize various elements and focused heavily on improving site speed. By streamlining the interface and removing non-essential buttons, they enhanced the overall user experience.

Here is what they achieved:

• 20% increase in overall conversions across all devices,
• 98% increase in mobile orders,
• simplification, such as removing the “View Details” button for unavailable products, significantly boosted conversions.

Lessons Learned

This case illustrates the profound impact that a well-executed responsive redesign can have on conversion rates, proving that even small adjustments can yield substantial results. It also clearly shows that mobile optimization is a must for businesses aiming at young visitors as a target audience . Below, you can see the current version of the Canadian Walmart’s homepage, which is fully responsive (mobile view on the right).

4. Ampere: Business Mobile Bank (App Store Optimization)

Ampere Business Bank is an innovative online banking platform designed specifically for businesses, providing a seamless way to manage multi-currency accounts, send and receive international payments, and access favorable currency exchange rates. Despite its comprehensive features and user-friendly approach, Ampere faced significant challenges in carving out a niche in a highly competitive market filled with well-established banking apps.

The primary goal of the promotional strategy was to expand its geographical reach, enhance app visibility, and increase the number of installations. Achieving these goals required a focused approach to App Store Optimization (ASO) to improve the app’s presence and attract a broader audience in an already saturated market.

Ampere Business Bank entered the App Store in September 2022. Gaining user trust and competing against nearly a hundred established banking apps was a significant hurdle, particularly within the financial sector, where credibility and reliability are paramount.

To address these challenges, the team employed a multi-step strategy leveraging the capabilities of RadASO Tech Boosted Solution, a proprietary automation tool that provides critical insights into competitors, search terms, and app positioning:

• Competitor identification and analysis: The team first identified apps with similar functionalities to Ampere Business Bank, focusing on those that posed the most direct competition. This analysis revealed key insights into competitor strategies, including preferred countries for promotion and markets with the highest installation rates.
• Localization strategy development: Recognizing the importance of localization in app visibility, the team set priorities based on countries where competitors had a significant number of installations. They expanded the app’s language offerings to include multiple locales, such as English (Canada), French (Canada), German, and Spanish (Spain), among others. This strategic localization allowed Ampere to resonate with a broader audience and improve its ranking in diverse markets.
• Semantic core collection: Utilizing the RadASO Tech Boosted Solution, the team rapidly compiled a comprehensive semantic core that included relevant search terms used by competitors, titles, subtitles, and search suggestions from the App Store. This approach ensured a more targeted use of keywords, replacing irrelevant terms that previously hampered the app’s search results.
• Metadata optimization for multiple locales: With the help of the Metadata Wizard, another tool within RadASO Tech Boost Solution, the team prepared optimized metadata tailored to each prioritized locale. They employed cross-locale techniques to ensure that metadata was effective across multiple regions within the same country, such as English and French in Canada or Spanish and Catalan in Spain. Key parameters, including Search Ads Popularity (SAP), app positioning, and competitor analysis, guided the prioritization of search terms to maximize visibility.

This optimization case resulted in incredible surges in conversion stats:

• number of won positions in the top 3 of App Store search results surged over 20% (the same, besides, went for positions 4-10),
• after a few weeks, app visibility increased for several countries over ten times (e.g., Canada, Australia, Netherlands, Pakistan),
• the number of installations increased over three times on average (for some countries there was over 10x increases),
• after 30 days, the number of downloads (which is the most significant conversion for the Ampere increased by over 100% (for Italy, it was over 200%, and for Canada, over 400%).

For IT firms and SaaS companies, software and customer satisfaction, as well as brand recognition, are three precious items that should be handled with utmost care. You may have the best product on the market, but if it is invisible or doesn’t satisfy users for some reason (e.g., too high price, poor support, unstable infrastructure), other businesses will outperform you with ease. Thus, it’s of great importance to constantly monitor and refine how it is marketed, promoted, and sold . Based on data and professional expertise, not your private impressions, which may be biased and/or misleading. Here is what the Ampere app store site looks like currently:

5. daFlores (E-commerce CRO)

In the highly competitive online floral industry, optimizing an online store or ecommerce conversion rate can have a significant impact on sales and overall business performance. Conversion Rate Experts, a renowned CRO agency was hired by daFlores, a leading online flower delivery service, to enhance their store’s user experience and increase conversions.

The primary goal of the project was to increase daFlores’ conversion rate by identifying and addressing key barriers in the user journey. The focus was on providing brand’s credibility through utilizing social proof, and making website more user-friendly, improving customer engagement, and ultimately driving more sales.

daFlores faced several challenges in optimizing its eCommerce site, particularly given the multilingual and international nature of its audience:

• Diverse customer base: The site needed to cater to visitors from multiple countries, speaking different languages, each with their own specific needs and objections.
• Unclear delivery information: Many visitors were unsure about delivery times, which led to hesitation and order abandonment, especially for urgent orders.
• Credibility issues: Some new visitors were unfamiliar with daFlores and were hesitant to trust the service, which impacted conversion rates.
• Technical complexity of changes: Implementing changes on an eCommerce platform can require significant technical resources, so changes had to be carefully selected based on their likelihood of success.

To tackle these challenges, Conversion Rate Experts conducted extensive user research and implemented specific tests to address identified objections:

• Objection Collection and Analysis The team started by identifying visitor objections using multiple research methods. These included surveys, live chat transcript analysis, customer support feedback, and session recordings. By analyzing this data, they pinpointed key concerns, such as uncertainty about delivery times and trust issues, which were preventing conversions.
• Urgency Enhancement: Adding a Countdown Clock To address concerns about delivery times, the team introduced a countdown clock on category pages with the message: “Order in the next n hours for delivery today.” This small addition not only informed customers about same-day delivery but also created a sense of urgency, encouraging them to place their orders immediately.
• Building Credibility with Social Proof To enhance trust, a static image highlighting daFlores’ 600,000+ Facebook followers was added to the header. This simple proof element conveyed popularity and customer satisfaction, reassuring visitors of the company’s credibility.
• A/B Testing for Validation All changes were rigorously tested using A/B testing methods to ensure they positively impacted conversion rates. Split-testing tools like Visual Website Optimizer were employed to compare the performance of the original site with the modified versions, validating the effectiveness of each change.

The implementation of these targeted strategies led to substantial improvements in daFlores’ conversion rates:

• 27% increase in orders due to the urgency created by the countdown clock
• 44% uplift in sales by adding the Facebook “Likes” image, which boosted credibility and trust
• Enhanced user experience by directly addressing customer objections uncovered through research
• Increased engagement and reduced bounce rates on key landing pages

The daFlores case study offers many valuable lessons on the importance of user research and targeted CRO strategies, but three seem to be the most essential:

• First, gaining insights through comprehensive user research is essential . By understanding the unique objections and concerns of your audience, you can craft targeted solutions that directly address their needs. Utilize a range of research methods, such as surveys, live chat analysis, and session recordings, to uncover hidden barriers to conversion.
• Second, it’s crucial to validate all changes with A/B testing to ensure statistical significance. This data-driven approach allows you to determine which adjustments genuinely impact conversion rates, preventing wasted effort on ineffective strategies. Small changes, such as adding urgency elements like countdown timers or leveraging social proof, can make a significant difference when backed by solid data.
• Lastly, remember that CRO is not just about tweaking visuals or copy – it’s about increasing revenue by enhancing the entire user journey . Prioritize changes that simplify the purchasing process, build trust, and make the experience more intuitive. Adopting a diagnosis-and-prescription approach, rather than relying on generic tactics, will help you achieve meaningful, long-term results in your optimization efforts.

Conclusions

As you see, a typical conversion rate optimization case study is all about improving digital marketing strategies, tactics, and tools for better business or overall marketing outcomes. The educational part is done, now it’s time to apply your knowledge in practice. Draw inspiration from the strategies outlined in the analyzed conversion rate optimization case studies and reflect on how applying them could benefit your business.

Landingi is a perfect tool to be your first touchpoint with a practical CRO. It is equipped not only with a super-simple yet very versatile landing page builder requiring no coding skills but also a bunch of optimization tools for various purposes. Let’s mention the most popular ones:

• A/B testing enables you to experiment with different design elements to see which performs better. For example, you can present two variants of your landing page (usually, they are very similar, yet with one significant difference, e.g. in headline or CTA content, number of fields in the form, etc.) to users for two weeks to see which one is more effective in lead generation.
• EventTracker  allows you to track how your site visitors behave , where they click (and how often), to what point they scroll, which elements (forms, videos, images, CTAs, etc.) engage them most, and so on. This provides a solid data foundation for your future design decisions, hopefully boosting conversions.
• AI package gives you a set of tools for streamlining content creation or recreation – from generating copy for your pages to completing SEO parameters and simple image editing. This way, you can deliver more targeted content with minimal effort and ultimately much quicker, which can result in more traffic, more leads, and, as a result, more sales.
• Translations arm you with capabilities for generating content in various languages quickly . This way, you can instantly create whole pages in different languages to expand to new markets or audiences or even go global.

With these solutions, you can easily increase landing page conversions and the conversion rates of your entire online marketing campaigns involving landing pages.

And to top it all off, Landingi currently offers a free plan or  14-day trials  for paid plans, which is perfect also for learning to build landing pages and optimize them for higher conversion rates. See more details on our pricing page. Good luck!

Ready to go? Let’s get started!

Join us and create the best-converting landing pages

Content Writer

Related articles

Landing Page Conversion Rate: Average, Good, & How to Improve

14 Startup Landing Page Best Practices to Boost Conversion Rates

13 Healthcare Landing Page Best Practices to Boost Conversion Rates

14 SaaS Landing Page Best Practices to Boost Conversion Rates

Forbes app— UI/UX redesign case study

Amrita Pathania

Right off the bat, I’m not affiliated with Forbes in any capacity, and the views for this case study are strictly my own. Since I don’t have full access to all the user data that influenced their current design, this case study is not fully comprehensive. This case study was done to enhance my learning experience and challenge myself to redesign it to serve a specific purpose.

WHAT IS FORBES?

Forbes is an American media and publishing company that provides daily news coverage on business, technology, financial markets, lifestyle, and a wide array of other topics. Forbes is also widely known for its lists of the world’s richest people, the world’s leading companies, and the richest celebrities.

Forbes is published in 40 different global editions in 70 countries and has a 6.4 million U.S print readership, 71 million unique visitors to its website, and 60% mobile/tablet traffic.

WHY THIS REDESIGN?

After continually hearing about COVID-19, mindless scrolling through social media, and feeling guilty for having ‘wasted’ the day, I wanted to break the cycle and be productive by devoting my time to reading and learning.

Once while searching for some articles, I stumbled across an article on Design Thinking by Ralon Fatehi published on Forbes . I found the content so informative and relevant to the topic that eventually explored a few more exciting categories and read 4 more articles.

I prefer reading on my mobile phone, so I even decided to download the app but found that there were way too many Forbes apps to choose and install, such as Forbes Asia, Forbes India, Forbes, etc. I finally downloaded Forbes because it had maximum downloads. Still, despite being familiar with complex interfaces and features, I faced a lot of trouble navigating through it and finding relevant stuff. I didn’t find any of my preferred categories or related articles that were available on the website. There was no personalization and had a low content discovery. Also, the design felt outdated with poor organization, labels, layout, and consistency.

After this exploration, I set out to reimagine the Forbes app and improve the experience in any way I could.

GOALS AND MOTIVATIONS FOR THE REDESIGN

My goals for the redesign:.

• To deliver a personalized experience and intuitive user interface
• Propose a more engaging and seamless reading experience so that users are comfortable accessing news and articles.

My personal goals:

• Take full ownership of the various roles involved in designing a product such as a User Researcher, User Experience Designer, UI Designer.
• Enhancing my learning experience by challenging some design decisions and addressing their solutions.

APP ANALYSIS

Since I had already used the app and had some idea about it, I decided to do an in-depth analysis of the app first . I wanted to understand the functionalities, overall architecture, and navigation.

Through the analysis, I was able to identify some clear usability issues and pain points . I listed all of them to validate them after my User Research.

UNDERSTANDING THE USERS THROUGH USER INTERVIEWS

Digital users demographic.

Forbes’s monthly unique visitors on all the digital platforms are around 46 million, with 58% males and females around 42% , and 43% of the users’ age ranged from 30–49 years old.

Conducting User Interview

I started my user research by conducting user interviews with 7 users, which vary from daily active users to infrequent users of any news app to understand what motivates or demotivates them from reading the news and their news consumption habits.

I conducted some telephonic interviews while some I ran in person .

The male interviewees’ age ranged from 19 to 49 years old , while all 3 females ranged from 20 to 38 years old , which I felt was a fair representative sample of Forbe’s current user base.

Some key insights from the interview-

• Almost all the participants read the news twice a day , mostly at night, while clearing up all the notifications .
• Most of the participants said that notifications grab their attention, and eventually, they end up opening the app while some even felt that endless notifications could get annoying .
• Most of the participants want to browse just the headlines to stay updated quickly. If a headline grabs their attention , then they read the entire article , so they want it to be clear and to the point.
• The features they use most often are saving and sharing the articles.
• Most of them said that they want their app to be customized but would always want to be aware of vital information such as Breaking or Trending news .

THE NEXT STEP WAS TO UNDERSTAND THE EXISTING USERS

Going through the reviews.

I started looking for reviews on the Play Store. There weren’t many downloads of the app (100K+), so I only found a few relevant reviews, but luckily I did find some on their website and a few other websites . I even went through some reviews of the competing new apps (with 1M+ downloads) to know their best features, attracting and retaining their users, and even the ones they missed out.

Usability Testing

After the user interview, I asked the same participants (7 participants) to test the Forbes app ( Virtual and in-person Usability Testing ). I wanted to see how they will interact with the app’s features. ( No one had used the app before. I wanted to test the app with someone familiar with it, so I asked 4 of my participants to download and use the Forbes app instead of their everyday news app for 2 days )

Some of the tasks that I gave them during the testing were-

• Open the app and read the full news article that you find interesting.
• Turn on the notifications.
• Choose one magazine of your interest and then buy it.
• Watch a video that you find interesting.
• Search for a news article about food delivery apps from the “Latest Stories” section.

DEFINING THE PROBLEM

After identifying and analyzing pain points through user research, I defined the following pain point that most users had trouble with.

Pain Points common to most of the users-

Pain point 1- incomplete mobile app.

Multiple users clearly expressed that they would prefer the website or mobile site , as the Forbes app lacks the full set of features as the desktop site version. Users pointed out that the mobile app was not as user-friendly as the website . They also suggested if the app follows the website’s footsteps, they will prefer the app then.

“I am disappointed, but there’s a web version, and I rarely face any problem with that”

Pain Point 2- Confusing and cluttered UI

Most of the users complained that UI made it impossible to read, and they had to keep scrolling horizontally to find a relevant news . Font and spacing made it look overpopulated . Most of them found the body text font small and the heading font quite large , leading to a terrible reading experience.

“The moment I clicked, I felt like I was fighting to read an article”

Pain Point 3- No categorization

The user wanted more segmented news so that they can browse through various categories. They felt there was no organization of articles, videos, or magazines.

I know the content is great but can’t find any, no categories! Why would I waste my money on this?

Pain Point 4- Poor access to magazines

Almost everybody showed their frustration about not having enough access to magazines. Every user expressed a need to have at least a proper laid out table of contents to get a glimpse of it. They also felt that “ 3 min” timer created confusion and forced them to take quick action as they were unaware of where it actually starts. It even kept blocking the screens everywhere while navigating through magazines.

“Gives us a huge timer of 3 min that blocks a big portion of a screen, what am I suppose to read!”

Pain Point 5- Notifications

Users expressed that endless pop-ups and notifications are annoying. It gets challenging for them to keep track of all the news articles updates they get every other hour.

Needs of the users-

Need 1-customization.

Participants expressed that they wanted to have more customization options for font size, theme, notifications, categories . They want the content shown to be prioritized based on their preference .

Need 2- More diverse features

The users wanted more features other than cropping and sharing, such as saving, commenting, reading offline, reporting .

Competitive Analysis

Note: Since all the news apps require a premium subscription to have full access to the key features, it got challenging to figure out features they hold. Though I tried researching the premium subscriptions and what each app offered, this analysis may lack some of it.

I did the Competitive Analysis by listing all the essential features in a structured tabular format to identify the competitors and mapping out their strengths and weaknesses. I did it in two parts , first consisting of direct competitors while next was within all the Forbes apps . Since it is published worldwide, it has continent wise and country wise apps too ( around 13 apps) . For this, I chose the ones with maximum downloads and features.

IDEATION AND PAPER PROTOTYPING

Affinity mapping.

Next, I compiled all the feedback, insights, and pain points listed above and grouped similar ones . This helped me brainstorm and develop potential ideas and gave a clearer view of what was important to users while keeping in mind the business goals and objectives .

Paper Sketches

For paper wireframes, I carefully went through the UI of Forbes’s website and mobile site, its competitors, and other news and magazine apps . After making some observations, I sketched out all the possible layout and finally came out with the one that worked the best. This allowed me to prototype solutions for the main screens before committing to high fidelity designs.

Now that I had a better understanding of who I was designing for and felt equipped with my background research, I moved on to the good stuff!

UX SUGGESTIONS AND THE REDESIGN

1) addressing “latest” screen, proposed solution.

Bottom navbar -Providing easy navigation was my top priority while starting this redesign. Therefore, I added additional content from the website , prioritized the core features , and then resurfaced all of them behind 5 tabs at the bottom navigation.

“Latest” screen - Divided the “ Latest” screen into various categories using a tab bar . It allowed me to organize content into a manageable layout and easily access any category that was only available on the website.

“For You” section - It’s a customized screen that starts with the top 4 briefings as 5/7 users expressed that they would always want to be aware of the Latest/Top news, I prioritized it and added some of it at the top . I further added all the categories users are interested in , which can be easily customized by navigating to the “My Post” tab.

“Top News” section - This section gives a glimpse of all the latest happenings and articles organized into categories to provide the user with an idea about the content. I also added categories like “Popular Reads,” “Editor’s Pick,” quote of the day, inspired by the website as they are the most visited and the site’s main attraction.

2) Addressing “News Article” screen

Layout - Added a proper visual hierarchy similar to most of the news apps. This creates a predictable reading path that users already know and are familiar with.

Following authors - Users can directly follow the authors , and it can be easily edited by going through the “My Post” tab in the bottom navbar.

“Highlights”- Added this feature to let the users highlight essential parts of the article and access it whenever they want to. Highlighted details can be easily found by navigating to the “My Post” tab.

This feature will give users a reason to return to the app , eventually leading to better engagement .

Customize while reading - Added more features that let the user customize his screen even while reading an article. Most users expressed that they usually have to leave the screen to switch to dark mode, interfering with their reading experience. Some even said that once they leave the screen, they get distracted, and they no longer feel the urge to reread it.

3) Addressing “Magazine” screens

“Magazine” screen - 5/7 users expressed their frustration about the “Magazine” screen’s low content discovery , so I added a proper table of contents on the main screen itself to inform the reader on what articles and categories are featured in the magazine. I even included an FTA that lets the user select magazines by dates.

“Magazine Store” screen- Since some users wished for a real-world experience for buying and exploring a magazine , I designed this screen. It let user simultaneously explore all the magazine options.

“Magazine Detail” screen- Here I added a “Contents” FAB for quick access and to give readers a roadmap for what they should expect . So if hyper-focused readers are wondering what Forbes has to say about what they are interested in, they can find it immediately.

“3 min” timer- I completely removed it from all the screens except the “Magazine Article” because 6 /7 users felt that it hinders their decision-making and forced them to take quick action as they were unaware or confused about where it starts.

4) Addressing “Video” screens

“Video” screen - I basically added more video categories from the website and organized it in a way that prompts users to explore more of them, driving better engagement.

5) Addressing the “My Post” screen

Added a “My Post” tab in the bottom navbar and divided it into 4 sections “Save,” “Highlights,” and “History” that let the users create personalized collections of articles/news and save them for future reference if they can’t commit to reading it at that moment. “Following” lets users customize their “For You” section at any time.

The focus of the tab is to make content accessible, the moment it is needed.

6)Addressing “Notifications”

7) other screens, 8) dark mode.

Since all the users expressed that they would love to have a night mode, adding it was necessary. As discussed above, I made it quite accessible and screens can be switched from Standard to Night anytime. Here are some of the screens with dark mode-

Want to try out the app?

Validation testing.

To validate my app, I surveyed 6 people with my prototype . I gave them around 11 questions on each of the features to test the redesigns performance and usability.

I conducted the test in person . 2 of them had already used the app while the other 4 had no idea about it.

Problem 1- Failed to discover FAB to select a magazine by date

Most users said that they didn’t even notice that FAB because they were looking for something near the magazine for the whole time. Some said that they ignored the button placed at the bottom, thinking it for the table of contents.

Solution- Changed the position of the button and placed it near the magazine so that users can connect the FAB to the magazine.

Problem 2- Got confused to find the latest magazine (May, 2020) through a horizontal scroll

Most of the users asked, “For which date should I look for?” and expressed that the current format of displaying the date was confusing . Since it had a date and month (30 May, 2020), users misunderstood it as a magazine published weekly or after a brief span.

Solution- Changed it to month (May, 2020) to clarify that it’s a monthly magazine.

Problem 3- Failed to use FAB to add an author to their following

Users failed to instantly recognize the button to add a category and misunderstood it for editing them. This prevented them from using it.

Solution- Changed the icon to a much clearer plus icon .

What was the main challenge in the project?

The secondary research about the brand, i.e., collecting some demographics, data, vision, etc. was the most challenging part. As Forbes itself is an excellent source of content and analysis, for every topic, all I can find was articles published by Forbes rather than the ones about Forbes .

Reflection and lesson learned

At first, I was a tad nervous as I knew this would be a lot of work. But, despite my fear and nervousness, I knew this was the perfect opportunity to hone my design skills.

Looking back on the whole process, redesigning this app and working on this case study reminded me that users are always the center of every design decision and the impact the smallest of a thing can have, such as changing an element’s position . I learned about figuring out what works and what doesn’t and implementing them, and the best part is doesn’t end. The learning process is continuous .

And that’s a wrap. Thank you for reading!

I had a lot of fun doing this project, and I hope you enjoyed reading it too. Be sure to 👏🏽 below (You can give 50 claps at once, click and hold on the clap button ) and leave your comments and suggestions.

If you have any feedback or want to chat with me, drop me a message at [email protected] or connect on LinkedIn .

Written by Amrita Pathania

Senior Product Designer at SaryI Ex-Swiggy | IIT Roorkee'21

Text to speech