WEB DESIGN CHALLENGE: Testing Your Redesigns!

Flux Academy · Beginner ·🛠️ AI Tools & Apps ·5y ago
Skills: UI Design80%

Key Takeaways

Redesigns the TopStackResume website using Webflow for a web design challenge

Full Transcript

on today's episode we're going to cover a redesign of this website this is a resume writing service that flux academy students did and we're going to pick five winners and those winners were actually going to build those sites and a b test them against each other to see which one is not only the best design but actually converts the best for this business stay tuned hey friends what is up so every month we are having a web design challenge for our students in flax academy but this month december was actually a special month because we had a company reach out to us the company is top stack resume which does a resume writing service and they've asked to have our students do multiple redesigns for their website so that we can a b test them to see which is the best redesign and of course the winner of the most converting website will actually get paid by the business owner so this is really really interesting project and i want to cover the top five that i chose we had like over 30 applications from our students but before we dive into it let me show you the website so this is actually currently the the website and most people who land on this website it might look a little bit overwhelming because it has lots of data here and then you scroll down shows you what they're doing this site is a little bit overwhelming however most most of the people who visit this website convert within like one or or a few days so this website already is converting so we're gonna try to see how can we improve this and i think the challenge is going to be if you look at this it is overwhelming because there is so much data here right a lot of things are just jumping in your face however there's a lot of things here that kind of reduces risk like you know uh great reviews uh based in the us donations risk free there's a lot of things here that are based to reduce your risk right a lot of logos of really great companies so i think the main challenge here is going to be how are we going to make this a little bit more clean and minimalized so that people will have better user experience going through this however we need to keep those kind of like security signals or trust building signals here so that people will still keep buying so that is the challenge now before i'm going to dive into the top five that i chose to run with this a b testing i actually want to show you some of the examples that didn't make the cut because i think this is really important to talk about you know what to think about when you're designing or redesigning a landing page because some of the some of the redesigns kind of missed cue like really key things that i think that you should keep in mind so let me show you some redesigns that didn't make the cut here's one example and this is just no you land on this and it says magnify your profile explore your dream career and you see kind of a magnifying glass and you see a person now this there is no call to action or any other subtext you can scroll to learn more and there's a button place order about what am i buying here so this website kind of took it so minimalistically that i don't even know what the service is there they don't even tell me what the service is they decided to keep this accredited business badge but again i'm completely lost at what is this website for another example is this one this one it looks beautiful right there's a nice image like the layout is basically good there's good hierarchies here and it says let's get you hired we help you boost your chances of landing a dream job but then how like what are you doing what is the actual they don't even say like we do resume writing it just doesn't say anything like get started who is going to click get started doing what i don't even know how are you going to get me hired so again this is a redesign that looks well but it's very confusing and it won't help people purchase make purchasing this isn't because they lack actually the the right information about this the last one that i want to show you is this one it says succeed more by having a right resume designed to help you get more interviews and succeeded in the next phase of your career and then build your resume this this is confusing this kind of feels like maybe a sas service of web resume building maybe it's kind of like a template and i drag element or maybe it's a design software because it mentioned that you know if if my resume is designed to get me more interviews so maybe this is something about design so again these redesigns are actually a little bit confusing me versus helping me understand what am i buying here so those are some of the reason that i didn't choose them so i'll get you back to this is what we were trying to redesign there's good image here in the background but too many things going on here let's see some of the five redesigns that i like so let's actually start with this this is a redesigned by mathias and basically says we write your resume so you get more interviews so you you get you understand what they're doing you understand you know what the benefit is it's very clean like nice pretty woman looking directly at you color combination is solid you know blue dark blue is very kind of like business um in a combination with orange like very solid color palette get your resume now i'm not sure that actually tells me to purchase now but it's very very clean you get straight into logos which are very nice and clean not one on top of the other like in the original design you scroll down and you get some more reason to work with them so they've kind of like built out the trust factors in phases they didn't just put them all in your face in one moment they kind of build them into a sequence right pay after you've done um usb sound limited revisions and then you get to client testimonials um our five step process so what i like about this this is very clean it takes you through the process is you scroll they're not dumping too much information at you all at the time it's very very clean and simple very good hierarchies very minimalistic color palette very clear you know pricing packages i'd maybe put in some kind of hierarchy because you know if this is recommended i'd only show one buy button in very strong blue the fact that i have here four buy buttons is a little bit disoriented maybe all of these buttons i would make them kind of like ghost buttons which means just the outline um i would show them just to create more emphasis on the the button that you actually want to get people to buy on um but overall i think this is a very very very clean and well-designed redesign and i'd love to see how this one performs now the next one let's go through here so the next one was done by dang and this one here uh they they kept the same image the same original image but change the layout so that you can focus on the text and you can see the image the image i think is good right you see somebody shaking the hand of somebody you can imagine that maybe it's the first day in her job so she just got a job so that's nice get more interviews and succeed in your next phase of your career now note here i think what dang did is interesting this this layout looks still very clean you know the hierarchies are clear you see the image first and then you get this font which is a very like nice elegant um serif font which kind of makes this looks premium right it looks like it's it's you know it's established and it creates trust i think using this kind of a font in this context he did manage to keep you know the high score rating and this badge that you pay only after you're satisfied so there are some trust factors here even though the design as it is looks pretty clean and not too overwhelming so i like this we scroll down then we get to the see the logos and you can see extended lists so that's nice then another section about why choose you so photos of real people i like this i like this another section dedicated only to customer success now they've put a video here that i don't think the original they have here like two videos i don't think the original site had two videos so i don't know if they'll be able to actually put a video here when they're testing this in in a few weeks but we'll see we'll see redesign the how it works so step one step two step three very clean pricing and you can see what i've talked about earlier when they're recommending this pro and the selected plan is very different from all the other ones i would actually make the text here black just to create more contrast here i think the text is is getting lost but otherwise i think the design this redesign by dang is very very premium which i think will kind of even help um selling this so i think this is also a very very good redesign all right the third redesign that i want to show you was designed by bass and this redesign we're actually seeing the person looking at us which is nice it creates kind of a immediately emotional connection professional resume writing service this is very clear at the top you know what they're doing you see a lot of the trust factors right trust pilot uh you see the rated 60-day so bas managed to keep a lot of the trust factors inside while not overwhelming because the hierarchies are still very clear you look at the woman first you see the title and then you see the button and in the back button he added the pay after you're 100 satisfied to the button so think about that that really is actually a smart move not a lot of people would just you know make a very long button and i'm not sure that it always works however when you put it here it does kind of feel like it's it's risk-free right i'm going to place the order but i'm not going to pay yet so i think this is very likely to to be high converting bas also put this kind of like top bar here with even more trust factor but some of them are kind of basically repeating what he has here so i'd like i just scroll i don't know if we need this top bar because i find it a lit repetitive but um we'll see we'll see um he he also added here all the writers are based in united kingdom um explored more kind of like the benefits in kind of a more long-form article um type thing where you can actually see the the cv and then i'm not really sure why he did this he i i guess he tried to minimize what you're seeing because there's four different price packaging but he's not showing all of them my gut feeling is if you hide it under where people have to click maybe they're not going to click most likely they're not going to click however you know let me see what is the left right the left one is the basic one so he left out the basic ones which is probably the cheapest one so my bet is this will push people more into the more expensive packages which might not be a bad thing right if you reduce what people focus on you make them focus on the more expensive thing maybe that's actually a good thing more of the features here and then the faq some more trust factors some more testimonials and reviews and then finishing up with another dream dream person that got their dream job so it's it's very nice i think this is a really very very solid redesign i think he managed to keep a lot of the data without minimizing too much while making it way more cleaner um and well thought out and all right so the next one is from juhi and juhi took another approach basically she started with rather than a very very short uh title like you know four letter professional resume writing four words or maybe what we had here like here we had three three lines but she actually made like a chunk of paragraph that says we perfect your resume cover letter linkedin profile and more so that you can do what you're best at doing your job so while this is long i actually like titles that give you all the content and tell a little bit of the story so i actually like this also with with the photographs she kind of made a collage of people being interviewed people maybe writing your resume and people maybe reviewing it or so i think there's a nice way here to kind of tell more of the story of what's going to happen what are you buying what is the outcome so i like this um which what is weird from i'm not sure if it's weird but um juhi chose to put here a few pricing so that's she kind of added another step instead of just buy now because she didn't she didn't put a lot of um you know a lot of trust factors he did put pay after you're done and 100 satisfied but she added another step so you first view pricing and only then you purchase versus all of the rest including the current site which just directly sends you to checkout i'm actually curious to see how that will perform note she didn't use you know any of the logos or other trash factory immediately she was kind of like say goodbye to your job hunting she kind of arranged it in very techy features kind of way and then services where probably i assume this left menu is probably sticky while you scroll through all the different services here and then and then you get into the more i guess trust building section which is what our customer says and you see the logos here and then you get into the pricing packages i actually think it's a little bit long to see all of the features before you even get here and we also have we also have the problem which we talked about before where you're not really directing me you're not really telling me what to do and from experience whenever you tell people directly what to do there's more chances that they'll do it and if you want to convert them into something specific just make something more prominent so that will know what to choose or know what your recommendation is all right so that was juhi's redesign and the last one is from celine now celine this is really beautiful redesign kind of similar uh to mathias and in the color scheme dark blue and orange she is suffering from what we've covered before where it doesn't the title the title here doesn't really say what it is right stand out in today's hiring get more injury she doesn't say this is uh resume writing it but she does i will i think we will change this because the redesign itself and we're going to cover it is so good that i do want to test out this redesign but we've we gotta put more context into what the site is in the in the title here because you're not just gonna click order now if you don't even understand what what it is that you're buying um but she started with the video she put the customer reviews here and all the risk-free and still maintained a very very clean layout that feels feels very clean very trustworthy logos coming right afterwards then i think this redesign is really great i mean the layout makes it fun the hierarchies you go when you read one after another you see the services very readable with this list and the icon i i think that the design here is again very very good i think the only thing here again as we've covered before very clean which one is the recommend which one you should click this one has very clear differentiation from the other two so i think a lot of things here in this redesign are beautiful they work very well she made a very good use of the very minimal palette that you chose so i i really really like this and i think this will actually do very well considering that we will change the title all right so those are the five winners we're gonna link below they've made presentation explaining the process be behind their redesign so i encourage you to go through them and and read them and check them out you will learn more about their thinking process um and i'm pretty sure you'll get some more insight the next phase in this challenge is we're actually going to build out these websites we're going to put them live we're going to a b test them and we're going to follow up in probably either a month or two to let you know who was the winner and who actually converted more i'm actually very very curious about this if you want to learn with us if you want to become a better web designer check the link below to learn more about our programs and of course subscribe for more great youtube content we'll see you on the next video bye

Original Description

We're so excited to share this month's web design challenge with you guys. It's a very special one. This time around, the company TopStackResume reached out to us to be the test subject for our students' redesign challenge. Basically, our students were tasked with redesigning the TopStackResume website. We picked the top 5 redesigns who will actually be building out their designs in Webflow. These live webpages will then be A/B tested by TopStackResume to see which design converts best! The current TopStackResume website: https://bit.ly/2LWyTIm Top 5 Student redesigns: Juhi Khatri: http://bit.ly/3qQjXdA Celine Winkel: http://bit.ly/39VHJxG Matthias Cordes: http://bit.ly/3a6VE48 and https://youtu.be/He1AvFL6FL0 Bas van Straaten: http://bit.ly/3iMn4jQ Dang Nguyen: http://bit.ly/3caRzPe Timestamps: 00:00 Intro 1:13 Going over the current site 2:10 The challenge 2:30 Reviewing your redesigns 5:10 Top 5 redesigns - Learn how to build custom websites with Webflow FAST: https://bit.ly/WebflowWebclass2020 - Find me on other social media platforms: Instagram: https://www.instagram.com/ransegall/ Twitter: http://twitter.com/ransegall LinkedIn: https://www.linkedin.com/in/ran-segal... - Gear & Book Recommendations: http://bit.ly/2ohFOuj #webdesign #websitedesign #webdesign2021 Thanks for watching the video!
Watch on YouTube ↗ (saves to browser)
Sign in to unlock AI tutor explanation · ⚡30

Playlist

Uploads from Flux Academy · Flux Academy · 0 of 60

← Previous Next →
1 Finding Great Partners As A Designer
Finding Great Partners As A Designer
Flux Academy
2 Distributing Your Content So Others Will Find It
Distributing Your Content So Others Will Find It
Flux Academy
3 Productivity & Pricing Workshop In Jerusalem
Productivity & Pricing Workshop In Jerusalem
Flux Academy
4 What Is Product Market Fit
What Is Product Market Fit
Flux Academy
5 Money, Impact Or Fun?
Money, Impact Or Fun?
Flux Academy
6 Scared Of Similar Logos
Scared Of Similar Logos
Flux Academy
7 I Suck At Scheduling
I Suck At Scheduling
Flux Academy
8 Giving Up Your Loyal Clients
Giving Up Your Loyal Clients
Flux Academy
9 Trying A New Business Model
Trying A New Business Model
Flux Academy
10 What Clients REALLY Care About (3 Types)
What Clients REALLY Care About (3 Types)
Flux Academy
11 How Much Money Can Designers Make?
How Much Money Can Designers Make?
Flux Academy
12 Holidays Suck! (for entrepreneurs)
Holidays Suck! (for entrepreneurs)
Flux Academy
13 Increasing Self Awareness With Meditation
Increasing Self Awareness With Meditation
Flux Academy
14 It Pays To Eat Out
It Pays To Eat Out
Flux Academy
15 Better Way To Build Landing Pages? (iGloo Review)
Better Way To Build Landing Pages? (iGloo Review)
Flux Academy
16 Thoughts On Collaborative Design (Figma 1.0 Review)
Thoughts On Collaborative Design (Figma 1.0 Review)
Flux Academy
17 New Ideas During My Time Off
New Ideas During My Time Off
Flux Academy
18 Who Are You? | #SenKimsin
Who Are You? | #SenKimsin
Flux Academy
19 I Don't Know What Works
I Don't Know What Works
Flux Academy
20 Thinking About The Next 5 Years
Thinking About The Next 5 Years
Flux Academy
21 Cool Features Are Not Enough
Cool Features Are Not Enough
Flux Academy
22 All Cars Are GONE! (Yom Kipur 2016)
All Cars Are GONE! (Yom Kipur 2016)
Flux Academy
23 Thinking For A Living
Thinking For A Living
Flux Academy
24 Stuck In Shallow Work
Stuck In Shallow Work
Flux Academy
25 Trying To Challenge Myself
Trying To Challenge Myself
Flux Academy
26 VR Design: Getting Started With Unity 3D
VR Design: Getting Started With Unity 3D
Flux Academy
27 Communicating Clearly
Communicating Clearly
Flux Academy
28 Skills VS Assets
Skills VS Assets
Flux Academy
29 Setting Payment Milestones
Setting Payment Milestones
Flux Academy
30 Designing Cover For My New Marketing Book
Designing Cover For My New Marketing Book
Flux Academy
31 Learning From Negative Feedback
Learning From Negative Feedback
Flux Academy
32 Everyone Here Loves Webflow
Everyone Here Loves Webflow
Flux Academy
33 Future of Design Industry (KiKK festival day 1)
Future of Design Industry (KiKK festival day 1)
Flux Academy
34 Beauty Matters (KiKK Festival Day 2)
Beauty Matters (KiKK Festival Day 2)
Flux Academy
35 The Power Of A Story
The Power Of A Story
Flux Academy
36 You Get What You Pay For
You Get What You Pay For
Flux Academy
37 Photography For Designers
Photography For Designers
Flux Academy
38 Starting A New Blog
Starting A New Blog
Flux Academy
39 Hard Work is a LIE!
Hard Work is a LIE!
Flux Academy
40 Principals Of Poster Design
Principals Of Poster Design
Flux Academy
41 How We Party In Thailand
How We Party In Thailand
Flux Academy
42 10,000 Subscribes. What's Next?
10,000 Subscribes. What's Next?
Flux Academy
43 Startup Logo Case Study: Nexar
Startup Logo Case Study: Nexar
Flux Academy
44 Super Talented, But Fired
Super Talented, But Fired
Flux Academy
45 Cracking Under Pressure
Cracking Under Pressure
Flux Academy
46 Frustration Is An Opportunity
Frustration Is An Opportunity
Flux Academy
47 How Much $ Am I Worth?
How Much $ Am I Worth?
Flux Academy
48 Are Contracts Worthless?
Are Contracts Worthless?
Flux Academy
49 Blog On Webflow VS WordPress
Blog On Webflow VS WordPress
Flux Academy
50 iPhone App Design In A Day (Sketch + InVision)
iPhone App Design In A Day (Sketch + InVision)
Flux Academy
51 2nd Version Is Always Better
2nd Version Is Always Better
Flux Academy
52 Creating Your Dream Job
Creating Your Dream Job
Flux Academy
53 Designer Exploring Jerusalem
Designer Exploring Jerusalem
Flux Academy
54 Designers Hourly Rate
Designers Hourly Rate
Flux Academy
55 My Country Doesn't Value Design
My Country Doesn't Value Design
Flux Academy
56 Designing My Week For Deep Work (Time Management Hack)
Designing My Week For Deep Work (Time Management Hack)
Flux Academy
57 Big-Shots Get Rejected Too
Big-Shots Get Rejected Too
Flux Academy
58 Designing A Landing Page With A Hammer
Designing A Landing Page With A Hammer
Flux Academy
59 Becoming A Superstar Designer
Becoming A Superstar Designer
Flux Academy
60 Negotiating Deadlines With Clients
Negotiating Deadlines With Clients
Flux Academy

Related Reads

📰
How I Built a Blank Page Detector for PDFs with Vue 3 and Canvas
Learn to build a blank page detector for PDFs using Vue 3 and Canvas to automate the removal of blank pages
Dev.to · sunshey
📰
What I Learned Building an AI Resume Optimizer — And What Recruiters Actually Told Me
Learn how to build an AI-powered resume optimizer and what recruiters think about AI-optimized resumes
Dev.to · dayu2333-jinyul
📰
The Language Barrier That Made Me Use AI Better
Discover how overcoming language barriers with AI can improve development workflows and community engagement
Dev.to · FromZeroToShip
📰
I Stopped Running Playwright in Cron and Built a Screenshot Archive Instead
Learn to automate website screenshot capture without relying on cron jobs, using a Python workflow with Playwright
Dev.to · Cizze R

Chapters (5)

Intro
1:13 Going over the current site
2:10 The challenge
2:30 Reviewing your redesigns
5:10 Top 5 redesigns
Up next
15 NotebookLM Hacks That Change How You Work
SCALER
Watch →