Background image
logologo symbol

4 - Connecting to the World

Design UI - Redesign

Description

Alright, now that you learned about accessibility and smart components in Figma, let's take it up a notch and use our knowledge and skills to redesign a website, turning some "meh" designs into "WOW" designs!
But why does redesign matter? Think of a website that's not quite cutting it. Maybe it's hard to read, it's cluttered, or it doesn't work well on your phone. A redesign isn't only about making a site look better, it's about making it WORK better for everyone.
How to redesign, step by step:
  1. Look before you fix. Go through the website like a real user would. Try to do something real on it, for example find a product or an opening time, on desktop AND on your phone. Write down everything that annoys you.
  2. Name the problems. "It looks old" is not a good critique. Use the 10 usability heuristics (in materials) to name what is actually wrong, for example: "No consistency: there are 5 different button styles" or "No feedback: nothing happens when I click add to cart".
  3. Check accessibility. Take screenshots into Figma and run Stark on them, just like in the Accessible UI guide. Bad contrast and tiny text are some of the most common problems on old websites.
  4. Pick your top 3–5 problems and focus on them. You can't fix everything, and you don't need to.
  5. Redesign using what you learned: clear hierarchy, consistent typography, good contrast and your smart components.
  6. Compare. Put the old and the new design side by side, so anyone can see the difference in 5 seconds.
Keep the content! A redesign is not a new website. Keep the same purpose, the same main content and the same brand. You can refresh the brand, but people should still recognise it.
What about AI?
You can use AI to help you find problems, for example upload a screenshot and ask which usability heuristics the page breaks. It can spot things you missed! But don't just copy its list, check every point yourself on the real website, because AI often guesses. And the redesign itself has to come from you.
By the end of this project, we'll have a website that looks fresh and modern AND is super user-friendly. Let's dive in!

Topics

  • How to redesign a website
  • What matters most when redesigning a website
  • Critique with the 10 usability heuristics
  • Accessibility check with Stark
  • Using AI to find problems, and checking its work

Goals

Knowledge

Understand how to use your UI knowledge to find flaws in a design and improve them
Understand how to name design problems with the usability heuristics

Skills

Be able to use your Figma tools to improve a design
Be able to critique a website and explain your design decisions

Idea for return

SUBMIT:
  • FIGMA URL
THE TASK:
  • Pick one of the websites below, or suggest your own "meh" website to your teacher.
  • Write a short critique of 3–5 problems, named with the usability heuristics, plus what Stark found.
  • Redesign the website: at least one desktop screen and one mobile screen.
  • Present a side-by-side comparison of the old and the new design, with a short note on how your design fixes each problem.
Websites you could redesign:
    • The homepage is busy and cluttered, there is so much going on that it's hard to focus on what matters. Different font styles and sizes make it feel messy, and the page is heavy with text, prices and promotions. The mobile version could be a lot better too.
  2. imdb.com, the pages for movies and TV shows
    • These pages are packed with information: ratings, cast, videos, ads, recommendations... all fighting for attention. Try to find something specific, like the full cast or where to watch the movie, and see how long it takes you.
  3. Your own pick
    • A website you use that annoys you. Ask your teacher before you start.