website redesign case study medium

UX Case Study: Improving customer engagement with Website Redesign

This case study lays out step-by-step approach towards redesigning a website keeping user-accustomed website standards intact; so as to improve user-interaction and eventually boost conversions..

Tanvi Punjabi

Tanvi Punjabi

TLDR- Too Long (but please) Do Read.

Let’s begin:

For any user-driven e-commerce website, a consistent digital experience not only helps to carve a strong brand identity for user but also enables them to seamlessly perform the task, and this makes the website more “usable”.

Even today many website redesign case studies are perceived as iterated versions of modifying the position and placement of icons, logo, symbol and other visual cues that communicate concepts and functionalities on your website pages. As a result, the debate on presenting a redesign case study for a portfolio project, still stands controversial !

But, according to Mike Locke , Principal UX Designer @ Movement Mortgage , here are a few pointers to cater while you approach a Redesign of a Website:

  • Don’t make drastic changes to the website, especially if the website is fairly designed pretty well. Consider redesigning using the web standards that users are accustomed to experiencing on other e-commerce websites. We don’t want to increase the learning time for the product, because chances are- Regular users might visualize the website based on how previous versions of the same website was configured ; New users might have a preconceived blueprint basis other competitor e-commerce website design - and in both the cases, we don’t want to misalign the user’s mental model.
  • Have a good understanding of what’s currently there so that the redesign is a better version of the current website and not just another iteration . But then again, developing a plan to reach towards the better version (depending on the goal) might need several iterations.
  • Let the design aesthetic of the website remain untouched, unless it is too cluttered. In visual terms, design aesthetic can be attributed to factors that comprise a design’s pleasing qualities- pattern, balance, movement, colour, shape, scale, visual weight of different elements etc. One good way to implement this is to not play with components of the website, especially from branding context- tone, colour, typography, iconography etc.

This might end up altering the brand attributes that stand as functional and emotional associations that a user earmarks with a brand, that in turn establishes brand identity.

  • We don’t know paint points users face while interacting with the website-whose using it, how they’re using it, what they like/dislike. So, if we don’t know yet if a website or web app isn’t working well, then why are we changing it?

This means we do not want to break the harmony between stunningly orchestrated elements that comprise the anatomy of the website- header, navigation, slider, footers to name a few.

  • Can we redesign smarter? Meaning, redesigning less while you’re at it? Absolutely. Just like Social Media, Manufacturing, Human Resources- you can pretty much apply the ‘Pareto Principle’ to redesign- to get 80% impactful outcomes from 20% major drivers !!
For instance, Website Redesign, you can keep/ introduce a noticeable CTA button, elements that depict a clear value proposition and remove vestigial elements like repeated social media icons or those that aren’t being used — in order to help the user quickly reach their goal.

Product managers would agree that 80% of their users just use 20% of the App/ Web features; and so they don’t incorporate every possible feature demanded by the stakeholder in the product.

Keeping these insights in mind, I’ll document the redesign process for an Ecommerce website and lay out one approach using which we can improve customer interaction per visit so as to boost conversions and ultimately increase sales!!

So, what are we making more Usable today?

Task is to redesign The Perfume Shop’s Product Page for CHANEL COCO MADEMOISELLE Eau de Parfum Intense Spray . We are going to use insights from two approaches to understand areas of improvement and implement possible measures which would increase user interaction with the website to provide swift yet decisive shopping experience.

Before we proceed, here’s a quick Overview of Website Redesign Process, which covers- Research, References, New v/s Old Design, Information stack and finally Heatmap(more on both ahead) on Figma. Willingly, zoom-in :)

Now that we’ve established the basics, lets put our thinking hat on and dive straight into solving the HOW!

How do we redesign the website so that users engage more with the product and ultimately buy the perfume?

I. Using heuristic analysis to improve UX :

Heuristic Evaluation refers to practical shortcut methods to make not-so-optimal yet relevant decisions quickly.

In UX design, Heuristic Evaluation helps to systematically gauge a design’s/product’s usability based on how effectively users are able to navigate during interaction to complete a task on the website. Essentially, in the process, the designers prepare a checklist of criteria to bring improvements in design.

Here is a list of problems that obstructed my buying decision while interacting with the website:

  • Information Underload : As soon as the users arrive at the Product Page from the Products Category Section , they get to see the Checkout Section with no details of the Product. Users have very little information of what they’re going to buy- what the perfume smells like, what is it made of, what skin type it suits-which means there’s a dire need to provide users with that information, either before or after the checkout page.
  • Brand Identity : On arriving at the Product Page, there is lack of any form of visual content that captures users attention or educates them about the Brand.

And hence introducing a Hero Image containing the Feature Image with a clear call-to-action can help us not only establish product identity but also create a better first impression.

  • Hierarchy : Users are bound to pay more attention to the information that appears first. This means that information that appears higher stands as a deciding factor to whether or not the users will scroll further to know more about what they are buying.

The best to way to ensure user retention is to ease their product buying decision by providing relevant product information .

Even if we add a Hero Page to establish Product significance, we cannot push Branding related information- brand attributes right after that, and at least not immediately after Checkout Section if Product information is not provided Prior Checkout Section. It makes sense to re-direct Branding information after users are familiar with what they are purchasing, i.e., after listing Product Details.
  • Sequence : A quick glimpse of the entire website makes the user discern that ‘Branding’ section (feature images + descriptive content) is given more priority, not because it appears on the top but seems to occupy too much real estate; almost immediately after the Checkout section.

While it can be pretty helpful to establish affection towards an elegant Rosy Perfume, as an e-commerce website, it should encourage user to shop the perfume. This again brings us to introduce easy-to-understand product details.

  • Visibility : Information like Quantity based Perfume Points, how long it lasts, tax details etc. are presented indirectly; meaning they aren’t directly visible in the Checkout section and thus users might miss out on useful pointers that would otherwise encourage them to purchase Perfume. This can be seen below:
  • Repetitive information : Content below ‘The Film’ section (in the Branding Section) and content in the Description Section is rephrased to imply the same thing leading to redundancy of information. This can be seen below:
  • Grouped data : Information pertaining to the range of products offered by the same brand is just listed in a single statement in the Branding section; instead, the same can be listed as Individual offerings by the Brand; and with this, users can buy complete range directly and the brand can leverage ‘cross-selling’ opportunities. So, again this opportunity can be explored further. This can be seen below:
  • Trust : Other than Reviews, there is no regards to social proof been made. Social proof always wins benefit of doubt and stands powerful when it comes from someone your prospect knows. This can be seen below:
According to a Nielsen survey , ~82% of Americans say they seek recommendations from friends and family before making a purchase and ~67% say they ’re at least a little more likely to purchase a product after a friend or family member shared it via social media or email.

Now that we’ve listed opportunities of improvement using Heuristics Analytics, lets redesign the website Information Stack so as to improve customer engagement with the website.

1. Hero Page : As soon as the user arrives on the main Product page, we don’t want to attack the user towards buying the product before establishing a first impression. We want to enlighten them with necessary information critical to guide their purchase decision.

“Our first impressions are generated by our experiences and our environment, which means that we can change our first impressions by changing the experiences that comprise those impressions.” — Malcolm Gladwell

A hero page or a Feature Page with a concrete product description , a clear call-to-action and a social proof will help users not only understand what is the landing page about but also encourage them to scroll further through concept of brand belief.

2. Top navigation is also modified to suit better user convenience and Search is given prominence as it facilitates Perfume Search in a fastest way. Other than the Company’s Logo (The Perfume Shop) which redirects users to the Home Page- the Search Bar, Login Button and Cart button are situated next to each other-all towards the right.

This facilitates all the clickable buttons towards the right.

3. Checkout Page : Some visual changes made to the UI as follows:

  • Roll-over image is added to give users Front and Side view of the perfume.
  • Clear information about Perfume Points based on the quantity of the perfume was mentioned.
  • Standard delivery in 3–5 working days and within 10 days essentially relays the same message, leading to redundancy and hence ‘Standard Delivery in up to 10 days’ was removed.
  • A separate ‘Buy Now’ button was added as a Ghost Button as compared to ‘Add to Cart’. ‘Buy Now’ cuts the extra step of first redirecting to Cart and then to Payment page.

4. Testimonials : A new customer Testimonial Page was added with Reviews from some of the customers who are regular users of the product.

A common list of famous Bloggers who are adept at summarizing their experiences around the usage of Perfumes was also mentioned.

5. Product Highlights : The Original Website contains Product Description similar to the Description present near the Product snippets in the Branding section.

A separate Product Highlights page was added answering questions related to Product usage reflecting information that users seek before making a product buying decision.

6. As a part of Branding, only ‘The Film’ section with a concise description of what the video is about was included.

The Sale Offer valid on the Range was also mentioned.

7. Exploring the complete Range: Other related products sold by the same brand with a clear-cut description and CTA were added.

8. FAQs: Original version of ‘The Perfume Shop’ website has FAQ page at a holistic website level and caters to problems users face while using the website. However, it lacked FAQs catering to usage of the specific Product (Category Level) and hence queries related to the same were added.

This provides adequate product related knowledge to users and helps to retain them.

Introducing the above sections might increase the scrolling time and that’s okay, because fun fact is users can’t look at the website without scrolling and even the Google Algorithms indexes and eventually ranks pages with relevant quality, long-form content. So, it’s a win-win situation for us!!

II. Analyzing heatmap to improve visual experience:

Heatmap gives designers a visual overview of different form of user interaction while they use your Website/App . These movements essentially translate to direct / indirect actions that users take- like while interacting using a mouse (click/scroll/zoom/hover etc.) , skimming with eyes (short / prolonged duration) or even via cameras. (to record visitor traffic)

Designers use heatmap tools to generate a graphical representation of data which is visually depicted in the form of color-coded values. These values serve as “hotspots” that correspond to intensity of user interaction with a particular part of your website . As a result, greater the interaction, brighter the area.

This is how designers comprehend which areas of the page get a lot of action and which don’t. This way, we know which areas need improvement since many of the usability and accessibility issues become clear.

In order to analyze “hot” and “cold” spots, I made use of UX Heatmap Plugin and shared the Link to the Website Design with 4 colleagues from my design cohort, 3 seniors working in Digital Marketing Domain and 3 cousins who suffice behavior and personality- each belonging from below two categories:

Let’s analyze Heatmap (shown below) bit by bit, but remember, the deeper we go inside the concentric circle, the brighter the color, the more the user attention and consequently the better the usability.

1. First things first, we gave the Search Bar more prominence in the Redesigned website by rearranging it to occupy the central position, and clearly it has reaped the benefits of getting users attention, as indicated with more brighter colors towards the center.

In the old version, this central position is occupied by the Brand name which on clicking leads the users to the Home Page.

2. Secondly, users have shown attention towards the sample image on the left, which implies users are interested to view more such sample sizes.

This is why I’ve incorporated two other image samples- side view and front view and clearly users have clicked on it to view the image in a bigger dimension.

3. One thing designer should take a note of is that the CTA should align with maximum user attention. In the old version, this isn’t true. From the apparent user flow, users have shown more interest on the ‘Perfume Volume Quantity’ and the ‘Perfume Points’ than the CTA.

And hence both these details have been pushed above the CTA and have resulted into structured user flow as can be seen above.

4. The old version of the website caters neatly to new users with all the Reviews; however, it does not cater to returning users who might as well want to write their experience.

However, from above, we can see a spike in user attention by adding ‘Write a Review’ section in the newly designed Customer Review Section.

5. The Customer Support section of the old version of website neither provides users with customer support number nor does it leverage email subscription and hence the redesigned FAQ version caters to both-user queries and email subscription.

6. Lastly, impressions of users clicking on non-clickable content in the ‘Product Description’ means on one hand-either the users are lost looking for a way out or an alternative, or on the other hand- want to know more in detail about it. And so, its wise to talk about it in the form of rich content to describe the Product in further length. This can be seen below:

Well, if you made it till here, my friend, a BIG Thank-You to you. Cheers!

Keep Designing, Keep Sharing. (-:

Tanvi Punjabi

Written by Tanvi Punjabi

Content Marketing Strategist | Content Writer

Text to speech

website redesign case study medium

UX Case Study: Eco-Stylist Website Redesign

Mingming Wu

Mingming Wu

With the increasing awareness towards eco-friendly clothing, sustainable and ethical fashion has become a new trend in the last couple of years. It is the mainstream emergence of a longtime movement aimed at offsetting the impacts of the fashion industry on the planet and humanity. Eco-Stylist is one of its primary advocates. It is an existing startup that provides an online marketplace and styling guide for ethically and sustainably made clothing.

Our task was to identify problems with the current Eco-Stylist website and design a solution to make it easier for eco-conscious shoppers to shop stylish, responsibly sourced clothing based on their core values: Sustainability, Fair Labor and Transparency.

Usability Evaluation

To better understand the user’s thought process and perspective, we conducted a usability evaluation to identify potential problems with the existing Eco-Stylist website, by looking at a combination of learnability, efficiency, memorability, error management, and satisfaction.

After the evaluation, we found the following major problems listed below:

  • It is misleading to name the clothing collection division of the website as “Shop Men”, meanwhile also providing women’s clothing within it.
  • No account is created to save users’ preferences.
  • No customer review section is available to help users better understand the product.
  • Secondary Navigation or Breadcrumbs are not provided on every page, so that users may easily get lost during the shopping process.

Simultaneously, we took to social media and conducted a user survey to help us screen for users for follow-on user interviews. We received a total response of 66 users for our survey and after screening their answers, we followed up with 16 users for one-on-one interviews.

Competitive and Comparative Analysis

Competitive and Comparative Analysis was conducted with other online companies where shoppers can get responsibly sourced clothing options curated for their look.

User Interview

Based on our usability evaluation and feedback from the survey screen, we hypothesized that shoppers struggle to use online services to buy eco-friendly and ethical clothing. We set out to test this hypothesis by conducting one-on-one video interviews with shoppers who have vast online shopping experience. The core of the interviews questions were:

  • On the survey, you said you shop at “x”, what about “x” motivates you to shop there? Can you prioritize those qualities of “x” in order of importance?
  • What method do you prefer to shop for clothes? Why? What do you like/dislike about that experience?
  • Take me through the process when you last purchased a piece of clothing.
  • How would you describe your awareness of the manufacturing practice of sustainable and ethical clothing brands? How does that influence your purchasing decisions?
  • Have you bought recycled/used clothing in the past five years? What did you like about that purchase? What did you dislike about it?

We also wanted to understand shoppers’ online shopping behavior patterns, their awareness of shopping for eco-friendly and ethical clothing, and their experience with sustainable and ethical clothing practices.

Research Synthesis

Through looking at shopper needs, pain points, and empathizing with their personas, we began to brainstorm several new features. We used affinity mapping to narrow down our list of feature ideas, and dot voted on them to narrow them down even more.

Through user interviews, several patterns began to emerge:

  • There is a trend of general concern for accurate sizing and fitting.
  • Shoppers don’t go out of their way to research clothing manufacturing ethics, but are open to learn and change their practice.
  • Reusing clothes is one of the greenest ways of being sustainable, which also makes this sustainable and ethical practice affordable and cost-effective.
  • Price is an important factor influencing shopper decisions.
  • Shockingly, but not surprisingly sizing and fitting turned out to be the overwhelming concern from the user interviews. Given the fact that online clothing retailers struggle with high return rates, which is about 20% of all purchases, sizing and fitting is an inherent problem for shoppers shopping online. Especially for retailers like Eco-Stylist, which provides a marketplace with a collection of different brands, one size does not fit all.
“The biggest thing is like not really knowing how something will fit or look like. Like I bought this black jacket online, and when I saw it, it was like, huh, it was running much smaller. So that is to me, like one of the big drawback is the accuracy.” “Online shopping got high chance that does not fit and I had to go to the post office to return.”

Based on the user interviews, we developed two personas and a storyboard.

Problem Statement

Shoppers need a way to easily educate themselves about responsibly sourced clothing and purchase this clothing online with confidence.

Create a solution

Eco-Stylist’s website will help online shoppers find the perfect fit in a marketplace setting, allowing for extreme clothing personalization, and provide access to information on sustainable and ethical clothing as an educational platform open to the public.

As a result, we decided to prototype the following new features: Personal sizing and fitting evaluation, Personal style evaluation, Customer review with detailed questionnaire about sizing and other qualities, and Worn wear with story sharing.

The landing page was created with an Education division and a Collection division, the two major focuses of the website. Before entering the Collection home page, a series of slides would pop out for Personal sizing and fitting evaluation and Personal style evaluation. The data collected from these slides would also help us better understand shoppers’ needs, and recommend products that they might like or might be perfect fit to their size and body type.

On the product page, we would recommend the best-fit size for that specific product, based on our evaluation and data collected from customer review. The product would be presented with models with different body types by simply clicking the body type icons. The Customer review section on this page would provide shoppers with access to detailed feedback and uploaded photos of other shoppers who already purchased this product.

Another feature on the product page is the “like” button. Once shoppers “like” the product, this product would be automatically saved to the shoppers profile. The system would send emails to shoppers when it was on sale or other special discount.

User Testing

Next, we conducted the user testing of the mid-fidelity prototype on the website, taking videos of their actual usage and having the users talk through the thought process as they use the prototype. According to the testing results, we revised features as below:

Home Page: Header Transparency

Home Page: Button Color

Profile Page: Add Style Photo

Product Page: Popup Window @ Checkout

Review Page: Redesign Rating System

  • Sizing & fitting was a user need, but we could not create a compelling-enough prototype in the limited timeframe and user testing. It would be nice to be able to spend more time exploring this feature in depth.
  • Work more intently with stakeholders to ensure that designs are cohesive with business strategy. We were too far along in the process to pivot upon discovery that we may not be in sync. Possibly consider facilitating site redirect, while still maintaining personalized features.
  • Build out gender customization options for the purpose inclusivity, allowing users to have options curated for male, female, neutral/unisex attire, giving shoppers complete control of the personalization of their style.

Mingming Wu

Written by Mingming Wu

UX Designer, Architect.

Text to speech

website redesign case study medium

Case Study: E-commerce Website Redesign

Michaela Misske Maia

Michaela Misske Maia

The second project at Ironhack UX/UI bootcamp asked us to redesign the website of an E-commerce .

My group decided to go with a bookstore owned by a friend of one of our team members. Xolo Books is an online independent bookstore aimed at encouraging readers to read stories by and about BIPOC (Black, Indigenous and People of Color) as well as other marginalized groups.

First off, we had to understand the user’s as well as create an understanding of the business itself. Therefore, we started our project by conducting an interview with the stakeholder of Xolo Books, as well as interview 8 people. Since the interviews seemed like they did not offer us enough material to base our design decisions on, we launched a survey with 6 questions regarding the Xolo Bookstore website. We got 10 responses and were able to include the replies into the Affinity Map and Empathy Map.

Business Analysis

In order to further understand the business we had to carry out a competitive analysis. Given our research and the bookstores that were mentioned during the interview, we included the competitors Bookshop.org Books and Books Amazon and Barnes and Noble. The feature comparison allowed us to see which features the competitors offered as well as what could possibly reveal itself as a business opportunity.

To deepen our market analysis, we carried out a branding comparison . When looking at the range of authority, for example, we saw that all of Xolo Books’competitors offer physical books, audio books and E-books.

Taking into consideration what we found out through the Feature and Branding comparison, the market positioning exercise allowed us to identify where Xolo Books is currently positioned compared to its competitors. The blue circle shows the market position Xolo Books would be aiming for. Its main focus on being more innovative.

  • Identifying characteristics regarding the Branding Comparison.
  • Coming up with answers that categories the features in the Feature Comparison.
  • The market positioning exercise seemed a bit of a challenge as the positioning of the companies felt very subjective.

Synthesizing Interview Results

Creating Affinity Diagram — we divided the data we got into 4 categories: Gains, Pains, Habits and Demographic.

For the gains , we identified:

  • Fast shipping
  • Being able to buy books online

Some of the pain points that came up were:

  • Delayed shipping
  • Waiting for books to be back in stock
  • Missing search bar in homepage
  • Bookstores mission statement not clear

Empathy Map

To deepen our user research it was time to focus on what the users see, say, do and hear .

To make sure we didn’t offer a biased solution, we included the perspective of both the user in blue and the stakeholder in red. However, we later learned that the Empathy Map should only entail the user’s perspective, not the stakeholders. The designer’s main job is to represent the user. Therefore, it is crucial that a designer’s work is not influenced by what the stakeholder wants.

User Persona

We went on to do the User Journey in which we had to get into the user shoes and empathize with their actual experience while “Looking for a book”.

Once we did the journey map, it was time to define the Problem Statement

The Xolo Books website was designed as a gateway to finding new books and authors that would otherwise be overlooked. We have observed that the Xolo Books website is not utilizing it’s interface fully — the homepage could include a search bar, share when a book will be back in stock, and suggest other books the customer might enjoy. Not having these features immediately can cause frustration, which could lead to lower sales for Xolo Books.

Followed by the How Might We Statements

Initially, we started identifying the “how might we statements” before having defined the Problem Statement. This proved the inherent urge people often feel towards wanting to come up with a solution. As a UX/UI Designer, it is crucial that you start with defining the problem first before making assumptions about what the solution should be.

Lean UX Canvas

Creating a Lean UX Canvas is a great exercise to put everything you have so far into perspective.

Moscow Method

A site audit allows us to get an idea of what content is already on the website.

Card Sorting

Card Sorting is a great tool for getting a better idea of how people would organize a site’s information. We decided to go for a closed card sorting approach in which the categories are already predefined and the participants had to simply group the 20 subcategories.

Once we got the results back from our card sorting, we were able to create a Site Map in which we reorganized the website’s content, creating the skeleton for our redesign project. This included us taking out certain areas as well as including new ones. Our group decided to include a Site Map for the original website layout as well as it allowed us to get a better idea of what site structure we were dealing with.

For the userflow we choose one specific goal for the user which was buying a book on the website Xolobooks . With the help of flowchart symbols that represent different types of actions, we can show how the user will interact with the product and define how he or she will be able to accomplish the task.

User Stories

User stories are one of the last steps in the defining process of Design Thinking.

Ideation and Concept

We applied crazy 8 to come up with some ideas on how to create the flow of purchasing a book. We then presented our versions and voted on which one we’ll apply. Lauren and I then went on to do some concept sketches regarding the actual flow within the website for buying a book.

Concept sketching amongst the team. Each one of us sketched how they imagined the user flow to look for the goal of purchasing a book. Based on what was decided on the sitemap, we were able to come up with possible scenarios as to how

Lo-fi Prototyping

Before going ahead and creating a hi-fi prototype, it is important to test the lo-fi prototype. This is often done with a simple pen and paper, avoiding details such as coloring and a lot of text. This allows designers to quickly draw down the user flow and show possible interactions to the users without spending a lot of time and money on it.

By keeping the lo-fi design simple, designers can make quick changes to things like the layout or the user navigation based on user’s feedback.

Once we had drawn out the different frames involved in purchasing a book, it was time to test our Prototype with potential users. For lo-fi prototypes, 3 users are suggested. The feedback we got was the following:

  • Would like to see a category with popular/bestseller books
  • Are missing a book review section
  • Found the number of categories a bit overwhelming
  • Thought the website feels easy to use

Sticking to the lo-fi prototype and not already building in some elements that represent a mid-fi prototype

Mid-fi Prototyping

Once we choose the path we’d like the user to go in order to have an easy experience purchasing a book, it was time to create the mid-fi prototype on Figma. To take a look at the prototype on Figma, click here .

Quantitative and Qualitative Feedback

Testing our prototype on Maze allowed us to get quantitative data. We created 3 tasks for the user.

  • Can you click through all the filters offered in the bookstore?

2. You want to find out more about the owner of the bookstore and see if you can find answers regarding some questions you have about their mission.

3. You want to purchase the book “Born a Crime: Stories from a South African Childhood” by Trevor Noah. How would you go about it?

Overall, 60% of users had a positive experience while testing our prototype, meaning that they were able to intuitively navigate within the design and carry out the task of purchasing a book.

Since we only had 3 weeks to carry out this project, there are a few things our group would do if we had more time…

  • Reorganize categories
  • Make it feel less overwhelming
  • Sort by new and used books
  • Include a prototype design of an order confirmation email with tracking information
  • Carry out further tests
  • Apply the feedback to a hi-fi prototype

Regardless of the size of a business or website, there is still a lot that goes into carrying out user research and identifying the problem. Throughout our process, we ended up getting sidetracked from the problem statement and HMW statements. This was a big learning curve for us! It was only by the end of the project that we realized that we had taken into account more aspects mentioned by the stakeholder and not enough from the user. When doing the Empathy Map, for example, it is important that you only include insight from the users, and not the stakeholder.

Michaela Misske Maia

Written by Michaela Misske Maia

Text to speech

website redesign case study medium

Redesigning my College Website — UX Case Study

Jasprit Kaur

Jasprit Kaur

Introduction

Redesigning the college website is a challenge set by our professor. U.V Patel College of Engineering, also known as UVPCE, is a private engineering institution in Gujarat. UVPCE’s reputation is based on its innovative curriculum and teaching approaches.

I had 20 days to design all the important and most relevant pages that are most likely to be visited by the target audience. The main goal is to develop an efficient website with easy user flow.

Since this was a solo challenge, I performed roles including UX Research, UX and UI Design.

Let’s start from foundation research

The first thing we need to know is who our target audience will be? or Who will be visiting a college website?

Prospective students, current students, parents, and faculty will most likely use a college website.​

Now that we know our target audience, let’s start surveying them to get an understanding of what their problems are with the site and what they think about the current site. What things do they want to improve?

1. Primary Research​

I conducted interviews with my 5 friends and 3 parents and asked them the same questions. This was an open-ended interview. I took notes from each perspective. And came up with some important information that a college should list alongside their current curriculum.​

  • College should be anti-ragging.
  • Quality of hostel food and canteen.
  • Frequent student activities i.e. camps, industrial visits, fests etc.
  • Placement packages.
  • Medical facilities for hostel residents.
  • Transport facilities

2. Secondary Research​

Top factors a student consider while choosing colleges:​

  • Academic Majors Available
  • Location of the college is necessary
  • On-Campus Facilities & Amenities — Availability of pharmacy, grocery, transportation, ATM, general store, etc.
  • Student Activities
  • Career Services — What type of companies come for placement?
  • Average Salaries of Graduates

The conclusion from Research Phase

From all the research and interviews, I concluded that users’ most common problems are difficult navigation between pages because they take a long time to load, not so detailed information about college placements, facilities, availability, and an unattractive user interface.​

Solutions to user problems — Built and easy navigation for all types of users, detailed information and attractive interface.

Phase I: Empathize

After the research and interviews, we want to see what our audience feels. I have taken each person into two different groups. One is a UVPCE college student and the other is a parent who is looking for the best college for his son.

1. Empathy maps

Empathy maps are easily understood charts that explain everything I have learned about a particular type of user during interviews — this will break down each interview into digestible pieces of information.

2. Pain points

Some of the common pain points I found are:​

1. Lack of detailed knowledge 2. The unattractive appearance of the website, 3. Poor information architecture means that the website is not arranged properly.

3. Personas

I used the data from the online research and interviews to create personas. The fictional characters are representative of the real people I interviewed and their thoughts, feelings, and actions. For the rest of the design cycle, I referred to these personas when making design decisions.

Phase II: Define

Problem statement.

To define and to get a clear understanding of our problem, we create problem statements. Problem statements provide clarity about my users’ goals and help me identify constraints that prevent users from achieving those goals.​

1. Kiran is a parent who needs the detailed website of UVPCE because he wants to give the best education to his son.​

2. Sakshi is a student of UVPCE who wants her college website to look nice and have an easy user flow because the current website is boring and the layout of the pages is not so good

Information Architecture

Now we have a clear understanding of the issues, so let’s start planning the navigation and creating a blueprint (information architecture) of our website. In short, how we will arrange the pages to allow the user to navigate easily.

After I have designed the blueprint of the website, it’s time for sketching.

Phase III: Ideation

After so many ideas and attempts, brainstorming solutions, while sketching, I found some useful design and tried to make the website less noisy. This is my final sketch. I sketched out all the important pages that users are most likely to visit.

Now I have an idea of how to solve the problem, I’m ready to enter the prototype phase.

Redesigning the college website is a challenge. I have to deliver a redesign and new information architecture (IA) and interactive prototype of the U.V Patel College of Engineering (UVPCE) website. The redesign was created through a lot of research and interviews with my college friends. I tried to create a user-friendly website for all visitors such as students, parents, and faculty.

Thank you, guys!

Jasprit Kaur

Written by Jasprit Kaur

Full Stack Engineer ( jaspritk.github.io )

Text to speech

website redesign case study medium

U.S. Department of Interior | Website Redesign | Case Study

Christian Keyes-Garcia

Christian Keyes-Garcia

Project Overview

The DOI website presents far too much information and clutter making it very difficult to navigate. The UI is poorly designed and it’s difficult to initially understand the purpose of the website.

Rethink the information architecture and redesign the UI to a simpler layout. Making the information on the site more aesthetically pleasing, more accessible and easy to understand.

Information Architect, UX Researcher, UI Designer

Figma, Miro, Adobe Photoshop, Affinity Designer

Goal: To understand the primary issues with the Department of the Interior’s website to focus redesign effort. Process: Proto-Persona|User Testing|Prioritization|Heuristic Evaluation

Proto-Persona

The research process started by creating a Proto-Persona that gave a better understanding of the needs of the user as well as the type of information that would be important to highlight for the website.

Margaret Harris is graduating from college with an interest in a career working with public lands. She wants to learn how to become involved so she visits the Department of Interiors website to look for potential internships. She takes some time to learn more about the DOI Secretary and about the history of the department. However, she struggles with trying to search for jobs on the website.

The workflow was determined for the desired outcome of finding a job based on the proto-persona created for the research process. This provided insight into the confusing and information heavy path the user would need to take in order to find the websites job board. It showed the large amount of steps a user would need to go through on this particular path.

User Testing

After establishing a Proto-Persona, multiple user interviews were conducted to a establish key empathy points for the users of the DOI websites: gauging if the navigations was clear to the user, whether the user could figure out how to apply for a job, and whether the purpose of the website was clear.

Focused testing was also done for the navigation menu to determine if users were able to intuitively find desired information. This gave even more valuable insight into the aspects of the DOI’s current website that would help with making necessary changes to the overall UI.

Insight Prioritization

After gathering data from the user tests insights were produced and then prioritized to address the primary concerns and important questions the test users encountered while performing the tasks that were presented for testing.

Annotations and Heuristic Evaluations

As part of the research process, annotations were made and a heuristic evaluation of the current DOI website was performed. These help to further pinpoint specific issues present on the website as well as pain points that would be present for users. Again, providing additional insight into what changes were necessary for the redesign of the sites UI.

The footer of the website is taking up too much space and some of the elements of the page are confusing. There is no clear indication of the purpose of some of the elements and there is confusion regarding to what some of the cards link.

Restructuring

Goal: To redesign the Information Architecture of the site based on research findings Process: Card Sorting|Site Mapping

Card Sorting

This was a very defining part of the redesign process. This part was instrumental in creating a more intuitive Information Architecture for the site. As well as consolidating the overwhelming amount of information present in the primary, secondary and footer navigations.

Once a more defined and intuitive IA was established through card sorting, a site map was made to layout the flow for the primary, secondary and footer navigations for the DOI website.

Logo Redesign

The original logo was very cluttered and hard to interpret when small. To match with theme of simplifying the redesign of the DOI website, the logo was also redesigned to a more simplistic style. It was drawn using a fish with mountains for the dorsal fin as well as a tree and a river that ran through the center of the fish. It represents the purpose and responsibility of the DOI well while staying in-line with the simplification of the overall DOI redesign.

There were multiple iterations of the logo redesign, each one keeping to the redesign concept as well as the established style guide (shown later in the case study).

Wire-framing was done for both mobile and desktop versions of the DOI website. The design was made to simplify the navigation menu for both versions as well as simplify the UI of the body contents and footer. The wireframes laid the foundation for the later iterations of the mobile and desktop versions of the website. It also provided help with visualizing how the website information would be presented in the redesign.

A style tile was developed based on the existing Department of the Interior website. This was created to establish a consistent UI, branding and style to be used throughout the process of iterating on the website redesign. The visual design elements included imagery that capture the purpose of the DOI, a color palette, typography, iconography and graphic elements.

5-second A/B Testing

A/B testing was conducted to gather feedback on the new navigation menu and footer elements for the redesign. Test users preferred the slightly less cluttered footer, with the social media icons centered in the footer. And the feedback for the main nav menu was positive feedback without providing and suggestions on changes that needed to be made.

With the feedback from the A/B testing and the visual design elements established on the style tile, it was time to move towards creating Hi-Fidelity Prototypes. The first iteration of the Hi-Fidelity prototypes implemented the feedback gained from A/B along with the visual design direction laid out by the style tile.

Additional user testing was then conducted on the first iteration of prototypes for both desktop and mobile. User testing provided feedback regarding the interaction with the cards present in the body of the homepage as well as interaction with the social media icons in the footers of both the desktop and mobile versions. Additional interactions were added to be inline with the information gained from user testing.

Once the Hi-Fidelity prototypes were complete, the next step was to create a UI Kit to serve as a style guide for the visual design elements of the redesign. This is a living document that can be updated going forward to help further develop the website. It also acts to ensure the style and branding continue to be consistent for further development across the entire DOI website.

Conclusions

Challenges Faced

  • The initial and primary challenge faced was the lack of IA present on the current DOI website as well as the overwhelming amount of information present that a user needs to trudge through to find anything really purposeful the user.
  • Figuring out how to consolidate the information present on the site and present it in an intuitive way that would add meaningful interaction to the user. Part of this was redesigning the IA and representing this effectively in the prototyping phase of the project.

Final Thoughts

  • Having a well defined style and IA based on extensive research provides an outstanding basis to then effectively develop compelling ideas for a redesign such as this.
  • Providing card options for users to interact with helped provide a more direct path from the landing page to the information the user visited the site to find. It also helped with creating a more streamlined process of converting the desktop layout to a mobile layout.
  • Keeping the design consistent throughout out the process was a challenge but an important principal to keep in mind. Keeping the design consistent avoided causing additional confusion and provides a much more satisfying and rewarding experience for the user.
  • The Department of Interior’s website is a gross oversight in terms of proper design and accessibility for users. There is a big opportunity to redesign the website to bring in more users and connect them with an important part of the U.S. government.

Christian Keyes-Garcia

Written by Christian Keyes-Garcia

Text to speech

Home Case Studies

Case Studies

Key Medium specializes in building quality websites with headache-free maintenance, integrated web analytics dashboard, and a holistic strategy for nonprofit organizations, businesses, and government agencies. When you partner with Key Medium for your website, you’re investing in a world-class online experience that generates engagement and growth. For proof that our creative, strategy, world-class talent , and technology drives growth, read the case studies below.

Go-to-market campaign for a mission-driven B2B SaaS Startup

  • Go-to-market campaign for a mission-driven B2B SaaS Startup

Employee Cycle saw a 70% increase in organic traffic value and a 28% expansion in keyword coverage in Search as a result of Key Medium’s content and design strategy, web analysis, SEO and UX improvement, and GTM and lead gen strategy.

May 14, 2022

Award-Winning Website Transformation for The Forbes Funds

  • Award-Winning Website Transformation for The Forbes Funds

Website redesign and cohesive brand messaging unlocks transformations for a regional nonprofit ecosystem in the Greater Pittsburgh region

May 4, 2022

Brand refresh and website redesign help grow membership, awareness for the Bicycle Coalition

  • Brand refresh and website redesign help grow membership, awareness for the Bicycle Coalition

Read on about how we helped a 48-year-old coalition grow membership and improve the health, wellness, and communities in Greater Philadelphia.

February 11, 2020

Mobile-first website design for an anti-vaping campaign for youths in New Jersey

  • Mobile-first website design for an anti-vaping campaign for youths in New Jersey

Read how a State Department of Health was able to raise awareness of–and encourage youths towards cessation of smoking and vaping.

November 30, 2019

Rebranding and redesigning for maximum impact: an online resource ecosystem that equips communities to literally grow

Rebranding and redesigning for maximum impact: an online resource ecosystem that equips communities to literally grow

Read on about how our pro bono rebrand for the Public Interest Law Center’s Garden Justice Legal Initiative project has worked to equip communities to grow community gardens and open green space.

October 11, 2019

Award-winning design strategy for Community Integrated Services helps young adults with disAbilities

Award-winning design strategy for Community Integrated Services helps young adults with disAbilities

Read more about how we created a new user-friendly digital experience appropriate for Community Integrated Services’ target audience.

September 27, 2019

New microsite design and enhanced UX moves the needle for women in nontraditional careers

New microsite design and enhanced UX moves the needle for women in nontraditional careers

Read about how we implemented enhanced user experience design along with new messaging to promote awareness of nontraditional careers in Philadelphia for women in construction, transit, and manufacturing to move the needle.

September 25, 2019

Simplified user-friendly website for SEPMA with a sleek new mobile-first design

Simplified user-friendly website for SEPMA with a sleek new mobile-first design

Discover how we helped Southeastern Pennsylvania Manufacturing Alliance with their SEO and content strategy with a clean microsite to increase membership.

September 2, 2019

Back-end development transformed Philadelphia Works’ website into a multi-award-winning platform

Back-end development transformed Philadelphia Works’ website into a multi-award-winning platform

Read more about how we developed a specialized, custom website with a progressive web application, a custom WordPress theme, and mobile-first optimization that helped drive results for 3.5 years by aiding Philadelphia Works in defining and communicating its offerings.

August 31, 2019

Award-winning, mobile-first website improved city-wide vocational education awareness

Award-winning, mobile-first website improved city-wide vocational education awareness

See how we implemented a cutting-edge design strategy to ease the pains of career discovery, vocational skills training registration, and supported system-wide and regional goals for Pennsylvania CareerLink® Philadelphia for 3.5 years, reaching over 146K users.

April 1, 2019

Key Insights

Website Design Case Study by Philadelphia's leading web design company

Design and Branding

Digital Marketing Insights, Advice, and Industry Best Practice

Digital Marketing

Emerging Website Technology Trends and Expert Advice

Purpose-Driven Marketing

Search Engine Optimization Tips, SEO Best Practice & Guidelines

Video Marketing

Website Development Tips and Trends for Organizations and Startups

Web Development

Website Tutorials and Guides for Marketers and Executives

Website Guides & Tutorials

Award-Winning Website Transformation for a Nonprofit Organization in Pennsylvania

Pittsburgh, PA, May 4, 2022 : Website redesign and cohesive brand messaging unlocks transformations for a regional nonprofit ecosystem in the Greater Pittsburgh region

Nonprofit website redesign for Pennsylvania-based philanthropic organization supporting community-based nonprofit human services and social services organizations

Success Cases

Featured resources.

  • Nonprofit web design examples Case Studies
  • Nonprofit Sitemap Design Guide
  • User Experience Maturity Article
  • Using design thinking to foster innovation and impact

website redesign case study medium

Member-only story

UX Case Study: Redesigning an e-commerce website Olivia & Co

Dana Wu

I wrote this case study in details for my portfolio. To check more case studies, please visit my portfolio .

Olivia & Co

Olivia & Co is an e-commerce website based in Australia that provides personalised leather accessories. After changing the ownership, the new business owners would like to conduct a rebranding and build a new e-commerce website with Shopify.

Design process

Market research.

I started by conducting market research to get familiar with the personalised accessories market. Here are some key findings. (Based on a consumer report by Deloitte):

The personalised product improves 40% of customer attachment to the brand, which fosters greater brand engagement and loyalty

The key driver in this mass-market popularity is the rise of e-commerce and other digital touch-points that…

Dana Wu

Written by Dana Wu

UX/UI Designer. UX/UI learning notes please visit: https://www.instagram.com/ux.danadesign/

Text to speech

website redesign case study medium

Case study: university website redesign

Drew Long

The University of Florida offers over 500 degree and certificate programs across its many colleges and departments. But it’s surprisingly difficult to find basic information about these programs. This project is my proposed redesign of UF’s website to make it easier for prospective students and their families to discover UF’s academic programs.

I was really surprised. While their academic program offerings are staggeringly extensive (500+ degree and certificate programs across 16 colleges and 87 schools and departments) — and prestigious (UF is currently ranked as the sixth-best public university, according to US News and World Report), it’s really difficult to explore their academic programs on UF’s website.

Let’s make that a problem statement

How can we redesign the website for the University of Florida to make searching academic programs easier and more intuitive?

My solution, in a nutshell

My mobile-first redesign includes:

  • a straightforward search and filter feature for academic programs ;
  • a design template for easily browsed, high-level previews of academic programs ;
  • a redesigned and simplified landing page for Academic programs; and
  • a redesigned and simplified top-level navigation .

Approach: Understanding the problem

I started with a heuristic analysis , focusing on the pain points for a prospective student. I have been this user, so it was both familiar and somewhat personal. I also performed a competitive analysis , surveying other university websites and identifying examples that afforded users a straightforward search and filter interaction.

Pro-tip: Figma worked really well for me at this stage for note-taking. Click here to see the Figma project file.

I discovered that it took five taps/clicks on my phone to reach a searchable list of academic programs. What’s worse, the path is not intuitive, due to confusingly similar choices (“programs” vs. “courses” vs. “catalog”?) and multiple levels of navigation. Worse still, the path is not equivalent across program levels (as shown in the user flow below, the catalog defaults to Undergraduate). And worst of all, there is no searchable list of graduate-level programs (as shown by the crossed out path in the flow diagram).

User flow reimagined

My redesigned user flow prioritizes the prospective student and integrates program descriptions at all degree levels. This flow also reduces clutter and ambiguity. You’re there in two mobile taps.

Approach: Visual Design

I began with low fidelity wireframes in Balsamiq, based on my redesigned user flow (you can download them here ). I took cues in layout and interaction from other sites that are mobile-responsive, easy to browse and quickly direct the user to a call to action, e.g., find more information, apply, contact the department, etc.

For styling and design of UI elements, I created alternate moodboards that aligned with a selection of tone words from UF’s official style guide. The goal was to adopt a distinctive, modern style that adapts UI elements familiar from other sites, but remains true to UF’s existing branding. This included the logo and primary color palette, which cannot be changed.

I drew primary inspiration from the style and simplicity of interaction of the website of the University of Central Florida . In particular, I adopted a similar layout and typography. For clarity and brevity, I adopted an accordion-style element for program details. I also took stylistic inspiration for the search functionality from online shopping, such as this one when I was refreshing my supply of snappy men’s briefs .

I developed a style guide based on these recommendations, including extensive guidelines for imagery. I had employee access to promotional photography, which made it easy to find authentic and highly specific photos.

Mockups and prototype

Check out the images below for a side-by-side comparison between the University of Florida’s actual website and my proposed redesign. Also, view the final prototype in action here .

I also developed a mockup for each screen at tablet and desktop breakpoints.

Final words

This project was a success on multiple fronts. It gave me the opportunity to focus on visual design, which I had found intimidating before. In particular, I improved my facility with Adobe XD and made my first efforts in Photoshop. Also, it reinforced that the earlier stages of design, including the research, user flows and wireframing, are my wheelhouse.

In the future, this project would require extensive coordination and content generation across the university’s colleges and departments. While I do not know the feasibility of this effort, I think I have created an appealing prototype that would spark a lively conversation in a networking session with anyone on UF’s UX/web design team.

I welcome your feedback and would love to chat about this or other UX opportunities. Thank you for reading!

This was a student project, completed as part of the UI Specialization for the UX Immersion program offered online from CareerFoundry . With gratitude to CareerFoundry mentor, Alex Tostado , for feedback, guidance and encouragement! ¡Muchísimas gracias!

Drew Long

Written by Drew Long

Freshly minted User Researcher and Designer finding my footing after a career in K-12 education

Text to speech

ColorWhistle

Digital Web Design Agency India

white-label-20percent

Explore our Market-Fit Services

We ensure to establish websites with the latest trends as we believe that, products whose value satisfies the needs of the market and its potential customers can be efficiently successful.

Quick Links

  • About Us – ColorWhistle
  • Engagement Models
  • Testimonials
  • Case Studies
  • Agency Services
  • Web Development
  • Web App Development
  • Digital Marketing
  • Travel Website Development Services Company
  • Real Estate Website Development Services Company
  • Education Website Development Services Company
  • Healthcare Website Development Services Company
  • Hotel and Restaurant Website Development Services

Best Website Redesign Case Studies

Category: Case Study blogs Redesign

Date: July 10, 2024

Best Website Redesign Case Studies

Website redesign is one of the situations that website owners find most challenging to address.

You must have created a website for your business a few years ago and it would have looked fabulous back then. Maybe, not so much now.

Luckily, unlike the other industries, the web design industry is very open when it comes to sharing their knowledge and experience.

As a leading Website redesign company , ColorWhistle understands that it is better to do something perfectly than to do nothing perfectly.

That’s why our ColorWhistle designing team collected some awesome website redesign case studies from all over the globe.

Website redesign case studies are a great way to understand an agency’s design process and website redesign cost structure. In the process, it also helps designers and developers to learn from each other.

We hope that these website redesign case studies will inspire you to reinvent your digital presence.

So, let’s find out how to deliver a delightful browsing experience to users.

Popular Website Redesign Case Studies

Explore the top website redesign case studies before you start planning for your website.

Improve Overall Site Architecture and Navigation

The objective of the website redesign case study was to enable easier browsing, and to help users find relevant content easily.

Checkout the case study to find out how they implemented new design combinations while still preserving the purpose of the existing pages.

Before Website Redesign

Best Website Redesign Ideas and Case Studies (Botanica) - ColorWhistle

After Website Redesign

Best Website Redesign Ideas and Case Studies ( Redesign Botanica) - ColorWhistle

Evolving the Dropbox Brand

On October 2017, the new rebranded Dropbox became the talk of the designers community. They are considered to be one of the most talented design teams in the world and are an inspiration to many designers. Their rebrand introduced many color combinations, font combinations and more.

Before Website Redesign

Best Website Redesign Ideas and Case Studies (Dropbox) - ColorWhistle

Introducing the New Walmart.com

On May 1st 2018 Walmart’s new website redesign rolled out. It focused mainly on delivering a modern, stylish, and a convenient shopping experience. This official write-up by the company explains the design changes and how they wanted to create a clean and modern shopping experience for users.

Best Website Redesign Ideas and Case Studies (Before website redesign) - ColorWhistle

Designmodo Launches Massive Redesign and New Logo

Recently, Designmodo, a platform where designers publish their products to sell, underwent a huge website redesign which also featured a new logo. In this write-up you can get insights on how long it took for the redesign and the elements that were refreshed.

Best Website Redesign Ideas and Case Studies (Designmodo ) - ColorWhistle

Redesigning a Digital Interior Design Shop

In this website redesign case study we get detailed insights on how to research and plan for redesign. The writer of the case study is the designer of the project. So we get to hear how the redesign went from his point of view. He also gives us useful tips on how to collaborate with developers during the redesign phase.

After Website Redesign

Best Website Redesign Ideas and Case Studies (Design Cafe) - ColorWhistle

The Inside Story of Reddit’s Redesign

Reddit, the website that has something for everyone recently had a facelift. Users of Reddit are no longer subject to 90s HTML feel, they have something new and fresh. This insider story gives us a scoop on how the redesign plan was formulated.

Best Website Redesign Ideas and Case Studies (Reddit’s ) - ColorWhistle

Bookstore Responsive Website Redesign

This website redesign case study cites the process of redesigning a bookstore website to be responsive so that users can access the website when they are on the go. The purpose of this redesign was to increase sales and membership sign-ups for the bookstore

Best Website Redesign Ideas and Case Studies (kinokuniya) - ColorWhistle

Redesigning the Product Website

This case study explains how a product website was redesigned along with its backend system and its app. We get detailed insights on how the designer refreshed the website to hit target customers perfectly.

Best Website Redesign Ideas and Case Studies (Siesta) - ColorWhistle

Give an Entire Online Shopping Experience Without a Single Scroll

This interesting website redesign case study gives us details on how shopping experience can be delivered to users without a single scroll and how they reinvented the standardized method of e-commerce browsing. You can also find out the technologies that was used during the redesigning process.

Best Website Redesign Ideas and Case Studies (Ubikk) - ColorWhistle

Modernize the Outdated Website

This case study will give you an idea on how to give a visual facelift for a website and optimize the user experience for the most visited pages. The recommendations and inputs will help you get an idea on how to build the basis of a responsive website.

Best Website Redesign Ideas and Case Studies (Holidays Sale) - ColorWhistle

Website Redesign for a Private School

In this case study we find out how the struggles faced by a school website were addressed in the redesign. Some of them included improper admission criteria and how the current website did not capture the unique prospective and supportive culture the school offered.

Best Website Redesign Ideas and Case Studies (private school) - ColorWhistle

How Redesigning HubSpot’s Website Doubled Conversion Rates

HubSpot the huge multi-product, global organization, wanted to redesign their website with the purpose of improving user experience and conversion rate. This write-up gives you a step-by-step process of how they planned for the redesign and successfully implemented it.

Best Website Redesign Ideas and Case Studies (HubSpot’s ) - ColorWhistle

Rebuilding slack.com

Slack , the high-power digital workspace did a major website redesign. One of the senior engineers of Slack has given comprehensive behind-the-scenes work on the website’s rebuilding work. The purpose of the redesign was to improve the website architecture, code modularity, overall performance, and accessibility.

Best Website Redesign Ideas and Case Studies (Rebuilding ) - ColorWhistle

Yoga Outreach Society — Website Redesign

The goal of this website redesign was to add chat features to encourage discussions among the website users, transfer to the WordPress platform, and improve website architecture. From navigation to sitemap, this case study gives in-depth details on how the entire project was planned and executed.

Best Website Redesign Ideas and Case Studies (Yoga Outreach) - ColorWhistle

Cogency Global Website Redesign Case Study

Since their last redesign in 2010, Cogency had added a lot of reading materials. Things got complicated and the website no longer reflected who they were. Also, the website was no longer a profit center and got difficult to navigate. This case study addresses how the issue was resolved through a complete website redesign.

Best Website Redesign Ideas and Case Studies (Cogency Global) - ColorWhistle

Zumba Fitness Website Redesign

The client was unhappy with the existing website as it missed vital information and the customers found the website confusing. Check out the website redesign case study to find out why the website was underperforming and how the problem was fixed with a proper redesign.

Best Website Redesign Ideas and Case Studies (Zumba) - ColorWhistle

Improve E-commerce Functionality

In this case study we find out how the website was shifted to Magento CMS and redesigned to improve overall navigation and conversion. After the redesign, the bounce rate was reduced and visitors were able to find information more quickly.

Best Website Redesign Ideas and Case Studies (ecommerce) - ColorWhistle

What we Learn from these Best Website Redesign Ideas and Case Studies?

  • Design methodologies vary according to the project and what the business wants to achieve. A standard or pre-planned methodology should not be followed
  • When presented with a new brief, every designer will refer to their own research method
  • Redesign projects must define the current difficulties a user faces when browsing the website.
  • Features should be clearly explained with a visual mockup when presenting to the client
  • Never make assumptions

Looking for Website Redesign Services?

Seize and experience the transformative impact of Website Redesign Services & Solutions with ColorWhistle.

Winding up our Top Website Redesign Ideas and Case Studies

Changes are scary.

It can be even more daunting if the current website design is liked by the users. But from time to time, a website redesign is required to evolve and to keep up with the latest trends.

Also, it is important not to be afraid of negative feedback. The only thing that matters is how the website redesign affects the online success of your company. So partner with the right website design agency to avoid design-related mishaps.

If you want to get a general idea of website redesign cost , check out our website redesign checklist blog to know more.

Do you have any queries relating to website redesign services or need a consult, contact our team anytime. We will give you the best possible solution and make your online presence a success.

Which case study was your favorite? Did we miss any? Please share your thoughts in the comments section below.

Professional Website Redesign Agency - ColorWhistle

In quest of the Perfect Website Redesign Solutions Buddy?

Be unrestricted to click the other trendy writes under this title that suits your needs the best!

  • Website Redesign Complete Checklist Guide
  • Winning the Web: Strategies for Business Website Redesign and Growth
  • Website Redesigning: Embracing Personalization and Dynamic Content for Tailored User Journeys
  • Revamping Your Corporate Brand: Strategies for Successful Website Redesign and Branding
  • Large Website Migration Case Studies and Checklists
  • Website Redesign Essential & Benefits Guide
  • Top 11+ Website Redesign Agencies in the UK

What’s Next?

Now that you’ve had the chance to explore our blog, it’s time to take the next step and see what opportunities await!

Read Similar Content

Wish to explore our services, have an idea or project scope, related posts.

Decoding WordPress Website Development ACF vs. Elementor - ColorWhistle

Decoding WordPress Website Development: ACF vs. Elementor

Custom Website Redesign vs Wix Website Redesign-ColorWhistle

Custom Website Redesign vs. Wix Website Redesign – Things to Know

Maximizing ROI Balancing Redesign and Ongoing Maintenance for Enterprise Websites - ColorWhistle

Maximizing ROI: Balancing Redesign and Ongoing Maintenance for Enterprise Websites

CW Content Marketing Team

About the Author - CW Content Marketing Team

ColorWhistle's content team is a group of rockstar writers and curators who create killer content for clients across industries. From blog posts to social media campaigns, ColorWhistle's content team creates content that captivates audience with content that educates, entertains, and inspires. With a passion for creativity and expertise in digital marketing, the team has what it takes to make your brand stand out in a crowded online space. In short, they're the wordsmith wizards that you want on your side for content that on-brand and on-trend.

View Our Services

Have an idea? Request a quote

Share This Blog

You completed some fine points there. I did a search on the issue and found the majority of folks will consent with your blog.

Thanks for discussing your ideas.

I delight in, cause I found exactly what I used to be taking a look for. You’ve ended my four day lengthy hunt! God Bless you. Have a nice day.

You make so many great points here that I read your article a couple of times. Your views are in accordance with my own for the most part.

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Ready to get started?

Let’s craft your next digital story

Our Expertise Certifications - ColorWhistle

Sure thing, leave us your details and one of our representatives will be happy to call you back!

Eg: John Doe

Eg: United States

Eg: [email protected]

More the details, speeder the process :)

Discussion Schedule: Ready for a GMeet Call Discussion Today / Tomorrow Available on a Phone Call Discussion Today / Tomorrow Send me a Calendar to Book The Meeting

IMAGES

  1. LincEdge Website Redesign. UX/UI Case Study

    website redesign case study medium

  2. Website Redesign

    website redesign case study medium

  3. Website Redesign Case Study on Behance

    website redesign case study medium

  4. Website Redesign Case Study on Behance

    website redesign case study medium

  5. Website Redesign Case Study on Behance

    website redesign case study medium

  6. Website Redesign Case Study on Behance

    website redesign case study medium

COMMENTS

  1. UI/UX Case Study- SaaS Website Redesign

    A strong digital presence is key in our highly competitive environment and this story is about a 2-month journey we took as designers to reimagine a 3-year-old website for a fresh, new, updated ...

  2. Non-Profit Website Redesign— UX/UI Case Study

    Role: UX/UI Designer Duration: 1 week Process: Competitive Analysis, Content & IA Audit, Sitemap, Card Sort, User Survey & Prototype Tools: Optimal Workshop, Sketch For this project, I wanted to…

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

    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 ...

  4. UX Case Study: Improving customer engagement with Website Redesign

    Even today many website redesign case studies are perceived as iterated versions of modifying the position and placement of icons, logo, symbol and other visual cues that communicate concepts and functionalities on your website pages. As a result, the debate on presenting a redesign case study for a portfolio project, still stands controversial ...

  5. Medium redesign

    Medium redesign — UX Case Study. ... Not wanting to change a lot in the existing look and feel we wanted to give the user more control of the existing website. About Medium. Created by Evan Williams in 2012, Medium is a microblogging platform for both readers and writers alike. With only 3 free reads a month, one can become a Medium member ...

  6. UX Case Study: Eco-Stylist Website Redesign

    Eco-Stylist's website will help online shoppers find the perfect fit in a marketplace setting, allowing for extreme clothing personalization, and provide access to information on sustainable and ethical clothing as an educational platform open to the public.

  7. Fairtrade Website Redesign

    Fairtrade Website Redesign — A UX Case Study. Working in a team of 4x UX designers in a 2.5 week design sprint my colleagues and I were tasked by General Assembly with the opportunity to work directly with Fairtrade Australia & New Zealand (Fairtrade ANZ). Our brief was to provide Fairtrade ANZ with recommendations and suggestions on how they ...

  8. Redesigning a non-profit website

    Competitor/Comparitive Analysis. To gain inspiration and identify best practices for our website redesign, we conducted a competitor analysis. We began by looking at the websites of several other non-profit organizations including Pencils of Promise, Save the Waves, and Project Open Hand.. One common feature we identified across these websites was the placement of the donate button in order to ...

  9. The Fundamentals of Website Redesign

    Font study for Adobe Caslon and Univers for the website redesign. After doing font comparisons, it became clear that Adobe Caslon should be the title font and Univers would be used for subtitles. Setting the main titles in sentence case gives the brand a more personal feel, whereas all caps creates more of a corporate vibe.

  10. E-commerce Website Redesign (Case Study)

    The second project at Ironhack UX/UI bootcamp asked us to redesign the website of an E-commerce. My group decided to go with a bookstore owned by a friend of one of our team members. Xolo Books is an online independent bookstore aimed at encouraging readers to read stories by and about BIPOC (Black, Indigenous and People of Color) as well as ...

  11. ZARA: A Website Redesign

    Crazy 8's: Crazy 8's is a core Design Sprint method. It is a fast sketching exercise that challenges people to sketch eight distinct ideas in eight minutes. The goal is to push beyond your first ...

  12. Redesigning my College Website

    Redesigning the college website is a challenge set by our professor. U.V Patel College of Engineering, also known as UVPCE, is a private engineering institution in Gujarat. UVPCE's reputation is based on its innovative curriculum and teaching approaches. I had 20 days to design all the important and most relevant pages that are most likely to ...

  13. U.S. Department of Interior

    This was created to establish a consistent UI, branding and style to be used throughout the process of iterating on the website redesign. The visual design elements included imagery that capture the purpose of the DOI, a color palette, typography, iconography and graphic elements. 5-second A/B Testing.

  14. Website redesign for a Creative design agency: A UX case study

    2. Ideation. The early stage of creating the website was the preparation of the framework; which included creating a plan, layout, navigation design, placement of web links, and contact us call for action. In the initial brainstorming process, we looked over a variety of websites for inspiration and identified the pros and cons of each website.

  15. Case study: redesigning a company's website

    Process : The project needed extensive research to understand the different kind of users, competitive audits and to understand what users want to see on a company's website. I conducted an extensive research to assess the current state of the website. This process allowed me to question the need for certain sections/data presented on the ...

  16. Successful Website Redesign, Re-branding and New Website Cases

    1. 2. Website redesign and cohesive brand messaging unlocks transformations for a regional nonprofit ecosystem in the Greater Pittsburgh region. When you partner with us for your website, you're investing in a world-class online experience that generates engagement and growth. See our case studies.

  17. UX/UI Case Study

    If you are not a Medium member you can still read the full case study here. Project: Responsive Website Redesign Role: UX/UI Designer Timeline: 2 weeks Team: María del Rosario, Batol Gholami ...

  18. Case study: An ed-tech's website redesign

    Context ⚡️. Explorin is an Ed-Tech Startup that allows college students to experience several career roles to discover their Dream career through their programs. Their last program was M.C.E.P ( Master Career Exploration Program) in which users can experience 10 different career roles in 100 days including skills, projects, personal growth ...

  19. UX Case Study: Redesigning an e-commerce website Olivia & Co

    The new website has increased the sales by 14.3% compared to last Christmas season, and the company has received great reviews from third party review websites. Reflection. My favourite part of this case study is the market research. When the client has a limited research budget, it is time and cost-effective to use professional market research.

  20. Case Study

    Feb 5, 2020. 1. Timeframe: 3 days. my job: UX/UI Design & photography. client: spreeformat architects. The briefing was pretty straight forward: Spreeformat needs a new web appearance which ...

  21. Case study: university website redesign

    Bootcamp. ·. 5 min read. ·. Mar 5, 2021. --. The University of Florida offers over 500 degree and certificate programs across its many colleges and departments. But it's surprisingly difficult to find basic information about these programs. This project is my proposed redesign of UF's website to make it easier for prospective students and ...

  22. Best Website Redesign Case Studies

    Website redesign case studies are a great way to understand an agency's design process and website redesign cost structure. In the process, it also helps designers and developers to learn from each other. We hope that these website redesign case studies will inspire you to reinvent your digital presence.

  23. UX/UI Case Study: Redesigning an E-Commerce Website

    An e-commerce website is often the best way to promote the shop, as search engines do support local businesses. It is also a great way to increase sales and revenue by offering services such as ...