Refactoring UI: WSS

For this edition of Refactoring UI, we're going to redesign WSS's plan details page, sharing lots of tips on hierarchy, table design and scannability.
📬 Updates/Submissions: refactoringui....
🔥 Design tips: / steveschoger
👨🏻‍🎨 Sketch files: www.dropbox.co...
👨🏼‍🔬 Multiply blending mode CodePen: codepen.io/ssc...
🎨 Sip (color picking app): sipapp.io/
👀 Icon sets:
Heroicons UI: github.com/ssc...
Zondicons: www.zondicons.com/
Entypo: www.entypo.com/
😍 Inspiration:
www.shopify.ca...
slack.com/pricing

[@hollylovejoy5073]

I wish there were more of these videos so I could spend all day binge watching them. Amazing work.

[@mollylentz9422]

I feel the same way!!!

[@tokqgfx3360]

Agreed, I've rarely found someone with videos this interesting.

[@mju135]

Tabs that link to fixed scroll points! May god have mercy on the soul of whoever came up with that abomination.

[@wideeyedali]

Whenever I get stuck on a design problem, I catch myself going "what would Steve Schoger do?" So much wisdom packed into these videos!

[@wuelbercastillo4367]

The hint to point out that a table is horizontally scrollable in mobile is just next level, thanks Steve, this is so pro

[@pepper-wood1289]

I'm only 5min in, and it's absolutely phenomenal how many seemingly little changes you do really condense the information. Like putting the icons in the slightly transparent circles is such a massive difference.

[@TonyCassara]

As a front end engineer I love watching your videos. You have a great perspective on user experience that translates well to your designs. Wish every designer was like this!

[@borsaniasushant1]

You teaches more in half an hour than any (most) design tutorials I been there in last year. Thank you.

[@AvereeChaloupka]

I love these videos so much. Watch them as soon as they're up. I personally love how you explain why something doesn't work, or when you have one of those "we could do this option, but that would introduce this problem that wasn't there before". Definitely have the brain for something like this. Keep up the good work!

[@powrslave]

sorry that red image backgrnd looks like murder college

[@enotirab]

The more I watch these videos the more I am convinced you're a wizard! Awesome stuff.

[@gonzalochristobal]

Mind blowing how easy you make this look, incredible job

[@kurtfattig9370]

That is some nice work. You completely de-kludged that site. I like how you mention about the licensing regarding fonts and icons. The addition of the mobile/responsive treatment really helped. It's great to see how you go about your work and reason through these issues and apply really good visual design and logical principles to refactor these UI's.

[@JoelPiccoli]

Much more cleaner and easy to navigate! Congratulations Steve!!

[@red_cape.]

Man you are amazing!!! This is better than TV. I think you should get your own show like those ones that the guys flip a house or something. Or maybe the internet provides all things necessary. Dude, Great job!

[@UXDesign]

Excellent video Steve, it’s like a higher level tutorial than getting into the nuts and bolts of every change. Definitely needs that fade to imply the horizontal scroll on mobile, a tricky problem to solve that!

[@ASadTeddyBear]

I know I will never use these skills in my life yet I this find series so entrancing. Keep it up!

[@Maheurt]

Woaw this is so weird I worked at the company that made this website. Your design is so much better :D

[@michellemills197]

This is fabulous! I really would like to see your preparation before you begin designing. Maybe you can make a video chatting about conversations you have with your clients. You seem to really understand the content of every page.

[@1877theflip]

The solution at 9:00 was amazing. I couldn't think of how to approach that.

[@josecage]

You are awesome. Congratulations for your great job.

[@karamanliev]

I love your videos, watching how a bad UI transforms to something modern is oddly satisfying. It soothes me so much, I'm looking forward to seeing more videos from you!

[@burakd.2139]

Great and extremely informative for anyone starting out and learning the thought process behind designing a ui. Thank you.

[@meeraramachandra]

Great channel, so glad to have bumped into it from a suggestion on Designers Guild (facebook group)! Please keep up the great work you're doing! I'd love to see more of your process of recreating UIs in sketch, and how you go about mimicking the exact style :) thanks a ton!

[@aliselcuk7005]

that's called craftsmanship! excellent presentation Steve

[@DougLopes]

I am really loving this series...a little thing i'll add to de redesign is grab some more attention to the CTA buttons ( Select Plan ) maybe with the blue or orange from the brand.

[@TheChillBison]

Such a good redesign! One thing I think is still lacking would be toggle-able help text given that many of these insurance terms are nuanced and may not mean what the user thinks they mean, or being students may never have heard of things like "coinsurance" and so question mark icons or other affordances to explain what the titles mean would probably be needed in a production design.

[@GamingNinjaSheep]

This is always so interesting to watch. You explain everything you do in such clear detail and even describe why you do it, keep it up! Would be interesting to hear your thoughts on designing KZbin and Twitch channels where your creativity can be limited by the standard design set in place.

[@fatal510]

"Room to breathe" is becoming your catch phrase.

[@vm-dev]

Really practical, easy to understand, outstanding! Keep on giving us more! :)

[@claudrocker]

Great job! I really like your explanation. (Front end dev here)

[@WyzrdCat]

The red definitely gives a "remembering a school massacre" vibe, espeically with the flowers. other than that good job :P

[@TheShoxter]

Awesome video Steve! Great to watch this with a morning cup of coffee. I think going with a horizontally scrolling table on mobile could potentially have some issues, because trying to scroll sideways on a mobile device is nearly impossible to do without accidentally scrolling vertically at the same time and leads to some awkward user interactions. That being said, great video with wonderful tips!

[@cecilelebleu5984]

These videos are awesome! I personally don't love the red tint, but that's just such a small detail it doesn't really matter!

[@jerryg.8767]

Great stuff as usual!!

[@mahpikena]

This video is amazing! Thank you for sharing! :) Which tool are you using to check responsiveness?

[@bm2ilabs]

i don't think you should use the term "compare" because its incomparable , astonishing, Thank you so much Sir for this insight in how to do things in better way . i never used sketch before and this days i only work on it so easy and clear to work with to have good sense in what you and do it fast while the idea's are fresh and clear. i don't think i could thank you enough

[@RasmusSchultz]

Just wondering, the labels you erased from the table weren't actually identical - for example, you had "major restorative" in one column and ended up removing "extractions and major surgery". Seems like some information was lost in the process, but presumably you talked to the client and they agreed to this? Also, maybe just personal preference, but the red tint on the photo was a bit horror movie murdery for my taste 🔪😅 Again though, I would have scrapped that design and started over, but you totally rescued it and made it look super pro 😁👍

[@SteveSchoger]

TBH I may have accidentally made a few mistakes when retyping some of the content. Good eye!

[@RasmusSchultz]

Steve Schoger ah, so the table content in the original did have repeated text in those columns! Gotcha 😊 I watch these videos 2-3 times and rewind a lot, so nothing gets past me 😉

[@knuppelwuppel]

Agree on the header background. Too spooky for me, other than that. Great! thank you

[@diegoorellana5706]

Awesome as always. Nice approach for tables on mobiles 💪

[@ghostpearl8301]

I love everything except I'm not a huge fan of the red. Otherwise, STUNNING! You are so talented! I learn so much from your videos!

[@nourdined.9616]

These are the most useful design videos ever, keep on Steve

[@chadandcalebsadventures4950]

What program were you using to do that stuff, that looks awesome. I am in school for HTML/CSS right now and that program would be extremely useful.

[@AndrewGray-natreve]

You're really good at what you do, Great work man.

[@ChristianGenco]

This is the best channel on KZbin

[@hackafro1271]

I look forward to these videos. You're doing great

[@leuchtelicht]

Another great episode, Steve! The only thing I don't like is the red tinted background. But other than that it's really awesome and MUCH easier to navigate. I also got a question: Does good design come automatically if the design has a good user experience?

[@jacobcole1271]

These videos are always really well done. Keep up the good work!

[@ankurbhatt007]

Thanks, Steve for this video.

[@pleasuredunes]

Great video demonstration and tutorial (your whole series). I think my only real issue would be with the hero banner - that apocalyptic red overlay is too overwhelming in my opinion, even if it does happen to make use of brand colors. Color psychology could be interesting to consider in this example. The tone of red and the overlay kind of makes me think of blood, which is amusing since the business is a provider of health benefits for students.

[@crysfelvilla3655]

Rom to breathe! A valuable lesson I've learn from you, thanks Steve!

[@timc5347]

Loving these vids!!! It's unfortunate that the brand colour is red, as I don't think the colourised header image works very well.

[@SyanArtStation]

Finally I found something that I'm not agreed with. Right at the beginning when you decided to tint RED and black the background image. I find It a bad choice for "school" context as RED is easily associated with blood, hospital, hardcore, even vampires. Also just to match the logo preference I'd go with an orange or blue. But that's it. I mean.. this is the only tiny little detail I could say against your whole redesign, and it's not even a major issue. great work!

[@oels9507]

Yeah, it looks like Umbrella Corp. Someone I definitely don`t want messing with my health.

[@Nervecell]

amazing content ive been looking for videos like this!

[@maker_aleks]

Awesome content! Thanks for sharing! 🙌

[@justkailash]

Thank you very very much for sharing these tips . . honestly i am fed-up with my design skill . . i tried a lot to improve my design but i am not getting where i am doing wrong . . i was searching for these kind of tutorial which is focused on the tricks . . all the tutorial i found they all said basic (yes important) like use nagtive space .. well alignment etc. . but still i am not getting good result from myself . . but this video made me think again and i got few points what wrong with me. but i am not sure that these is the actual answer of my question . . that will be very thankful to you if you can give me some time (personally) ?? so that i can ask you few things and share some of my design to get feedback . . do you use slack workspace?

[@havanejp]

such a great channel! what is the multi-device you're using at 12:53?

[@sergioescalante8066]

Is the responsive design mode in safari! thesweetsetup.com/use-responsive-design-mode-safari/

[@elephant742]

Great videos. Just wanted to know , what is that software that let's you watch the mobile version of the website ? It's shown at 13:05 in the video.

[@skylandmedianl]

Thanks for sharing, nice job!

[@saptarshic]

I enjoy these videos so much! Thank you.

[@Dr_Pickle]

That banner is terrible. Blood red covering a School ground... Was there a massacre?

[@tanh8285]

Looks like a blood moon to me lol

[@elis2781]

Why are you so good! Thank you!

[@rayfront7390]

Loving all your videos, you are awesome!

[@mikeynma]

There are two channels I look forward to releasing new vids...Honest Trailers and yours! /me settles in with a coffee for some knowledge bombs

[@wendellkwang3724]

love your videos man, but one thing; the red overlay on the school image looks a bit scary. Especially when it is showing the college name, it feels like I am playing a horror game. That's the impression I thought when I visit the website for the first time. What do you think?

[@chrishampshire]

Like the binging with babish of design

[@Mattheus94]

Steve, love your videos buddy.

[@SteveSchoger]

Thanks, Matthew!

[@benhidamohamed9943]

Check the Refactoring of WSS using tailwindcss : github.com/simoebenhida/WeSpeakStudent-Redesign-SteveSchoger

[@travis940]

Great job! I love your videos!

[@davidvuong]

Great video is always! Curious how you go about producing sketch versions of websites. Is there a tool you use to autogenerate it or is it all done by hand? P.S. I'd love to see episodes on refactoring mobile app UIs

[@SteveSchoger]

No fancy tools. Recreate designs in Sketch from hand :) I'm going to try to focus more on responsive solutions in future episodes. I don't get a lot of submissions for mobile apps tbh.

[@davidvuong]

Impressive. I can see why each video takes so much time! I have a few mobile apps I'm working on/off ATM with not so great UI, perhaps I could submit them one day to get the ball rollin'. Anyway, I look forward to future videos :D

[@cram.design]

Once again, fantastic and educational. I would subscribe twice if I could.

[@priscillaknight4678]

Wow! You did surgery! Awesome!

[@reemtos]

Your pronunciation of "eh" at 13:52 has me laughing hard. Great job by the way!

[@questreal5812]

sameeee lmao

[@LeFru]

Hey Steve, what are the top sketch plugins in your toolkit?

[@tykill]

13:44 Can you or anyone else pinpoint why you like the standard desktop website more over a mobile version? I'm really curious

[@mottosson]

I love these videos! In this one the table design was definitely an improvement, but I think the page lost a lot of it's playfulness and became quite boring tbh.

[@philipps258]

I was about to comment the same :/ Although i really liked the work going on! But this reddish header now looks like it's a school from hell

[@monkeysgone2heaven1]

FYI - the image in the codepen that you linked is broken

[@DesignerMehedi]

12:53 can anyone please tell me which sites he is using to check see the responsive design of other websites.

[@CharlesALacroix]

Amazing. Once again.

[@drrrw]

what's the software that you use? May I ask.

[@BrianClay]

Why do you wait until the end to change the fonts? Wouldn't it save you a lot of time to select the font at the start?

[@SteveSchoger]

From a viewers point of view, I think the font change has higher impact when its updated with the final version of the design.

[@srezas3580]

What is the application you are using?

[@motojoe1405]

Hey Steve! Have you tried Adobe Xd? I would love to know your thoughts about it.

[@SteveSchoger]

I've dabbled in it a bit. Pretty similar to Sketch. Sketch was just such a game changer for me so I'm pretty loyal to it. Don't think it will be easy for me to switch.

[@sheikhadnan4074]

Is he doing frontend? waht software is he using?

[@Sohrabziagoogle]

Great job but that red image is not going well with that logo. Maybe black filter with opacity would work on image.

[@dipenparmar2273]

Enjoyed lot.

[@Pedantic_Pete]

Weird to see a video about a site I used, for a school I took web design at. I guess that's full circle

[@maximoprincipe3859]

Can you tell me what program you use to edit the web page? psdt: I'm new to this

[@SteveSchoger]

Sketch. It's a graphical editing software.

[@juoen]

It's great ! Thank's !

[@scottstewart9660]

So good!

[@Wruczek]

Notification squad! 🔔 Thanks for your work Steve PS. What's the background music name?

[@SteveSchoger]

Thanks for asking. It's an original track I produced. Music production is another hobby of mine 😁

[@francismori7]

Music and hamburgers

[@Wruczek]

Thanks for replying! You are doing great stuff.

[@mosquitlo]

It adds nice "How it's made" kind of vibe to the video.

[@vivavillain]

Lmao Murder University. Another slaaaaap refactor from the kid 🎯🎯

[@DesignerMehedi]

Please start uploading this type of video again.

[@rizkywahyu9256]

How to make a page in web can edits in sketch or adobe xd?

[@sin.pottery]

How can I get the initial files?

[@liamelliott3779]

Hey I went to Fanshawe!

[@joshuajaydan]

twitter.com/steveschoger

[@la_lumiere7571]

Awesome! But that darkred color... Why

[@irbazahmed]

What's the background music you use in all you videos?

[@SteveSchoger]

Original composition I made for the screencast :)

[@irbazahmed]

Steve Schoger it's very nice :)

[@sham3k]

Had been waiting for this forever. Any chances of a weekly Refactoring UI? ❤️

[@SteveSchoger]

Ha! I wish! These take waaayyy too long to produce to get them out weekly. Plus, I can only produce them in the evenings/weekends. Sorry :(

[@leuchtelicht]

I'm sure that if you give it some time and keep posting, you can make a living from it! The channel has already grown so fast, it's insane! And it provides a massive amount of value.

[@pelegred6123]

Yeah boiii

[@Ralphunreal]

Can you make some videos designing from scratch?