The point about the initial wireframe is great, that might be the most underestimated step of wireframing- getting on the same page with yourself. Also love the idea of not stacking fields on top of each other and making the form more conversational!
I love this! I wish more people did this! Every company is completely different and I feel like my process has to change at every place I am at and I feel like I could draw inspiration from other people explaining their process.
As a designer *and* someone who happens to have filled out a ton of forms, I think the format for these you have chosen is a great option - very user-friendly. I especially like the "save and complete later" option, as well as the progress marks at the top of the longer form. Great video!
Thank you so so much for sharing this. I kind of got thrown into the UX/UI design field without any prior experience (coming more from an illustration/comic background). Recently got tasked with designing a Landing Page and there's so much stuff I didn't take into consideration. Your process and thoughts behind each decision are so helpful. I will now consult your channel before every new project.
Thank you so much for sharing you thinking process! I was trying to find how wireframing looka from designer perspective and this video is exactly what I need. Keep up the quality content 👍
This was SUPER interesting! I LOVED this! I think seeing the raw material beforehand, seeing how complicated it looked and thinking "how would I solve this?" made me really want to watch through and see what you came up with in the end. Your way of showing progress through that gigantic form was a really great idea! I would love to see the final page when it's done!
You provided an excellent introduction to a complex task. You ignore corporate branding, division rules, and project style, which defies the explanations of most designers. Still your enthusiasm and knowledge bring such a positive attitude to your work that your colleagues must really enjoy working with you. Often other designers are hard pressed to gather meaningful feedback from their colleagues and that is so important to both your project and your career.
Loved the video! I am the microcopy-writer part of the UI design team and work with an awesome designer. So it was helpful to see the process from the designer's side :) We work in the opposite direction to yours: You get the copy from the writer and then design according to the brief, whereas in our case, he designs the UI first and I write copy based on what I think the design is trying to convey. Loved seeing how the process could work in the other direction!
Actually I do the same thing! All the copy you see here was either taken from the old page or written by me. I like to write placeholder copy so that the writer I work with has a better sense of what should be talked about in each place. I did a video with her last year about our process if you feel like watching it! :)
@@charlimarieTV Oh! I actually did watch the video when it first came out, but I assumed your process had changed since then because the copy in this video looks so good! Kudos on doing an excellent job on placeholder copy 🙌🏽
I Charlie. My designs always start on paper. I’ve looking to switch to a digital beginning. Now, with my iPad and pencil I’ll be using the Concepts app. I love this format for you. Exactly what I’ve been wanting. More of the how-designers-think content. Thanks a bunch!
I'm just getting started with website design and your videos are so informative and helpful! I love learning about your process and could hear you talk for hours. Thank you!
This is great Charli Marie! Whether you write code for a living, or design new applications, it's invaluable to be able to peek inside someone's thought processes, and see them work in order to learn from them. Thanks for sharing. I'm also interested in learning where you get your inspiration. For me, I like the Pinterest UI/UX pages. Thanks, again!
Really enjoyed this video, it's a very similar process to my own which is always nice to have some sort of confirmation you are doing things as others do. Also adding the comments in InVision before sharing the designs/wireframes is a great idea. I have only always used them for client inbound comments. Might save myself some questions covering points beforehand. Getting clients/colleagues to actually read them is another challenge!
As a designer I really enjoy seeing how your process works. It has given me some ideas on my design flow and things that might work better for me, I really appreciate you sharing this! Thank you!
Really loved this video and seeing your starting process! I love the bit about waiting until a certain stage to get feedback. I feel like I often ask for or receive feedback too early and it can throw a wrench in my process.
yes! because then you feel like you need to stop and address their feedback on one element of the page which can break your focus and flow on working on a different element.
Great video, thanks for giving us a run through of your design process! Always very interesting to see what works for others (and maybe even borrow a step or two). Best of luck with this project!
I love it! I find these types of videos extremely useful from the way you think about the concept, to the way you have initial ideas and how those are reshaped before presenting the final first draft. I especially like how you explain the reasoning behind each choice. Thank you :)
Ooohhh this is a great video. I wish all of the tutorials and walk through videos would be like this, with all the reasons for the decisions and trail of thoughts and not just this is here and this will be there. All videos I ever saw were lacking something but this one I personally find VERY helpful and valuable. Thank you!!❤️
yay!! This is the type of video I really want to see from other designers, so I'm really happy that other people are interested in this kind of content too! I'll definitely be making more :)
I love seeing how other designers approach their projects! (Watching process videos of designers moving around type and objects on a page is my form of ASMR.) I also start with sketching to get ideas out, even if those ideas never end up in the final design. It's all about getting the brain engaged with the project. Right now I'm working on a digital book with six chapters. Once I get into InDesign, I'll end up with a ton of iterations. Once I've settled on which direction I want to pursue, I start a new version and move forward until I'm ready to present to the team. (Sometimes I will share some iterations at this stage, too.) Our presentations are calendared and I'll slack over the PDF ahead of time and then the team will meet on joinme for review. All in all, very similar to your process. Love those zipping in slides! :)
Great and helpful video, i just started 4 months ago a new job as a ux designer. I finally changed from graphic design to ux design. But digital design is much more different from print design. Please do more videos like these! They're a lifesaver for me :)
A great video showing the design process and design thinking of something most people overlook. As a strict practionar of Adobe XD, I have a question about your design tools. What factors help you choose your design tools? I know you've worked with Sketch, Invision and Figma. All of these softwares have been touched by hands as well; however I find myself coming back to Adobe XD. Can't wait to hear back and glad you're back on youtube making quality content.
Great video, I don't do much wireframing, I jump quickly to detailed design and sometimes it creates for me creative blocks, I think I need to extend the time for the planning and wireframing a bit, Thank you for sharing your process
This video was amazing to watch! Thanks for sharing! I'm a developer that do most of the design, from wireframe to implantation. Very cool to see your design and thought process, as well as how you work with others. Thanks for making this vid!
Love this! If anything I'd love to see more of the initial sketching process - over time I've come to think that's such an important part of the overall process, even though to outsiders it may seem trivial.
Seeing your thought process and the development process was so helpful to see! Do you remember how long it took you to do the strategizing/mocking up of this landing page?
This is pretty much how I do it, I might still use paper and pen or whiteboard it. I use other tools, but I recognise your thought process as my own. that's nice to know. :) Ta!
Great video Charli. Was nice to see your thought process and how you plan out a project. Not everyone needs to be Bob Ross when jotting down ideas lol .
Fun to see how you work. Very similar to me. However I’m rewatch and look into some of those tools for sharing with your team. Seems like they really help streamline the explanation of flow through the site.
Love this style of video (well actually I love all of your videos)! I've just recently started being disciplined in getting all of my own ideas out before looking for inspiration. Game changer in avoiding (for the most part) the inspo vortex, imposter syndrome and overwhelm. And Dribble is the best!
This was incredible! Thank you so much for sharing your process, I'm a digital designer in Auckland and hoping to get more into UX. It's so difficult to get the ball rolling because I just never know where to start when creating a landing page. Can't wait to see the final product :)
Outstanding walkthrough of your thought process, Charli. As someone who performs those ConvertKit migrations for folks, it's great to hear how CK is putting a focus on this.
Hey Charli! Love seeing this! Definitely different than my process but so interesting to see how you work. When do you get to the point of figuring out what each FAQ might be? What each step will be? And for each migration level, really breaking down the IA of a level? Basically, I usually start with the real-deal content, then come up with the containers. I feel like you have quite a bit of filler and placeholder content. When does real content come into play?
Great questions! The FAQ gets figured out by the copywriter (who talks to our support team to learn what common questions they get). As for the rest of the content, if you read the dummy copy in my end wireframe on the computer you can see that even though it is placeholder, it is filled with "real" content. All of my dummy copy talks about what we'll be communicating in that space. Content (for me) = the message or information that needs to be communicated and Copy = the exact words that will be used on the page. In the process with the writer I work with, she generally starts writing copy after seeing my wireframe, because I'm doing the research and design thinking to decide on the hierarchy of information on the page and what we'll go into detail about vs what will get a small mention. Of course, it's collaborative! So sometimes she'll start writing and realise something is more complex than we initially expected and needs more space to communicate, so I'll revisit the wireframe to make adjustments to allow for it. I hope that answers your questions!
So so useful! Thanks for doing these videos 👏 I’m curious to know how you go from Figma > Invision? Export all Frames and upload manually? Or is there a magic-wand-trick? ✨
Yeah I just export frames manually. I work on web design not product, so I’m only ever needing to upload one or two frames to invision. There’s probably a plug-in for it tho!
This was very helpful thank you! I am at the stage where I am designing a temporary landing page/home page for a startup. I like the idea of sketching and lofi designing before you look for inspiration. Sometimes I look first and I feel that skews my design from important for my client to what is pretty on dribbble. 🤷🏻♂️🤦🏻♂️
As a UX researcher, I am wondering what your PO thought about the acceptance criteria side of this project, and also I am interested to understand the information architecture behind these pages since the old design seems so cluttered. I was wondering if you could have thought about gamifying the user story when filling those forms. And, generally speaking, no one likes to fill forms and it makes me wonder if you are improving a faulty design.
We don’t have a product owner for the marketing site. Myself and the developer I work with are in charge of it. I’d argue that thinking about how to make the user feel as if they are progressing and seeing little rewards as they complete sections IS gamifying in a way! I’m curious to hear what you’d do though. As for the old page being cluttered, like I said, it hasn’t been touched by a designer before so there’s lots of room for improvement! :)
I really loved this video - thank you for sharing! It was nice to see that my process is very similar to yours. I also really like how you added lots of notes on your Invision file for people to look through as they tour your designs - I'm definitely going to steal that. ;P
I love this type of video - super helpful and interesting! 😍 I'm not working as a designer yet - I'm still learning to become one. My process is quite similar to yours, actually. I start with rough wireframes on paper (because I don't own an iPad and drawing them anywhere else tends to take more time). From that, I start to explore my sketched ideas with lo-fi wireframes in Adobe XD and when I've found the one I think it's right, I'd move to hi-fi wireframes.
Great video Charli and happy to see that you're still using Figma :) ! Love this type of videos about the actual process of design. Quick question: Those components you made them specifically for this project or you have purchased them from somewhere? Thanks.
They are components in the design system I’ve created for the ConvertKit website. Check out the Card on this video for a link to my video about the design system.
Thanks for sharing your process, CharliMarie. I really like your thought process, on how to make the forms easier to use. I would like to know, how you would handle the mobile version of this project. Well, it depends on the analytics thou if the majority of the users access the site through web or mobile. But let's say you were to design the mobile version of this page, I would really appreciate you share your approach?
Hey Charlie, May I know at what stage do you think about the responsiveness of the design? And how do you deal with this without having a problem during the development stage? Thanks.
Absolute GOLD! Thanks for sharing your valuable knowledge. It is insane how cool watching this process is. Honestly just about to do my very first XD wireframe for a client and this was exactly what I needed to see at the time I needed it! GREAT JOB and THANKYOU so very much. Why do you use figma and not XD? Just wondering as I'm trying to figure out which is best for my process - I like that the CC libraries are available in XD.
I just really like Figma and haven't bothered to learn XD yet. it seems to be more geared to product/app design and I'm yet to see any features that make me think it would be worth the time to switch for my web design process. honestly it doesn't matter what tool you choose though! the best tool is the one you feel confident using.
nope! I create my wireframes based on what I believe will be the best user experience and I don't do any testing until the site is built (my testing focusses on how to improve what exists, rather than needing to test to see if something is viable)
@@charlimarieTV thank you for your insight. Very interesting because in the market there is a drive in AI based tests during protoyping to guide the design to maximise potential of user engagement /CTA. Have you come across any? If so just woundering what your thoughts are interms of if they are useful or not to support a designer.
Hi Charli, love your videos :) Do you plan to do another video about Figma? I always wondered how to do for example those grid lines :D I really like it, but as I am not designer, but web developer I use it very rarely and get lost easily :D. Thank you
In my Figma Design system video i think i showed the grid system and how I have it set up! What kinds of videos about Figma would you want to see? Maybe a Figma 101 video?
How much influence did the initial wireframe from your work colleague have on the project and was that shared with any stakeholders or project managers etc? The reason I ask is that with a current project I'm on there have been a few wireframes done by someone else which I feel could dictate too much how some of the page flows need to look like.
Thank you for all these great tips as always! I was wondering what you'd think to have a P.O. box instead of my home address when I fill out the contract for my first client? It might look stranger but I don't want them to know where I live. Thank you!
Great vid again Charli. Someone with messier hand writing than mine! What are your thoughts on designers NOT sharing their designs on sites like Dribbble/Behance? I always think people won't want to see them but I also feel it could help show my experience. Just a confidence thing I guess.
Definitely a confidence thing! I don’t share everything on Dribbble, but every now and then I post a screenshot of a little piece of a site I’ve worked on. It’s a good habit to get into!
Hi Charlie, really great video. I work as Software PM, so I'd be coordinating some change like this. Could you tell me, how much time did you have for this? I am still not quite sure how long should this really be taking and what is the average. Time estimation is really struggle for me. Thanks. :)
Hmm this was a while ago now so I can’t quite remember exactly, but I know a few other people asked this when I published the video. You could scroll through the comments and see what I replied to them back when the video was published!
