What are the steps to creating a low-fidelity UI prototype?

First, I write down my ideas on sticky notes, focusing on what users need, their problems, and how to solve them. After understanding the main problem, I make a mind map. This helps me find new ideas and user flows I might have missed. This way, I get a clear view of the problem and what I need to do.

Here's the skinny: 1. Know your goal: What are you testing? Flow, features, or just the feel? 2. Grab your tools: Pen & paper are classic, but digital tools (Figma, Miro) add some spice. 3. Sketch it rough: Boxes, lines, labels - focus on layout and user flow, not beauty. 4. Map the journey: Show how users move between screens with arrows or notes. 5. Add a sprinkle (optional): Simple colors, icons, or text for clarity. Remember, low-fi = low details! 6. Test & tweak: Get user feedback. Does it flow? Are things clear? Adapt based on their input. Bonus: Don't overthink! Low-fi means fast and flexible, so experiment and have fun!

This is probably one of the most vital steps within the design process. Without a clear definition of the problem your design or product aims to solve, users may struggle to identify with it, leading to reduced success, particularly in the long run. Clarifying the problem ensures alignment between the product and your user needs. So, get clear on your actual target group and your goal: What are their problems, wishes and characteristics? Ideally this is based on (a lot of) data, not on your own opinion or any biases you have. For Low-Fi-Protoyping: Focus on informational structure i.e structure your user journey and how they may/should interact with your design/product. And especially: keep it simple and clear.

I start by drawing a rough layout on paper. Then, I make simple digital sketches called wireframes. These show where things like buttons and text will go. After that, I add basic interactions, like clickable buttons, to see how the design works. I get feedback from others and make changes as needed. This helps me improve the design before making it more detailed or starting to build it. Hope that helps ;)

I love doing Crazy 8's to generate ideas. In this phase you should not focus on the caliber of the ideas you can brainstorm, get ideas as much as you can. If you are having creative blocks, browse through exisitng designs in Dribble and Behance and other insipiration websites to get ideas.

During this step, it's all about quantity over quality. It allows for the exploration of diverse perspectives and encourages thinking outside the box. This is also a very good step to do as a team collaboratively and this step is usually done in Miro, FigJam or similar tools. Also, this encourages you to get away from the thinking of needing the"perfect" idea or "perfect" solution which oftentimes sparks creativity and leads to even better ideas in the end as there's no pressure.

Once you've got a bunch of ideas brewing, it's time to put pencil to paper. Sketch out rough drafts of your UI designs, focusing on the layout and structure. Keep it simple and straightforward and don't worry about the details just yet.

Gather feedback from colleagues, stakeholders, or even potential users to identify strengths, weaknesses, and areas for improvement. Use this feedback to refine your designs and iterate on your ideas until you're satisfied with the direction.

Once you have defined the problem and generated plenty of ideas, you should be having an understanding on what should go into your designs. This is the fun part!! You can start by comparing your sketches to the existing UI's on the web. User dribbble, mobbin and behance to go through various design styles and processes. Now start creating the layout for your sketches. Use figma, balasmiq or miro to create good wireframes. Instead of making a very basic shapes and dummy text, spend some time to make it look realistic as possible with real texts. Think of it as a final product with no color or fancy graphics. You are ready to proceed to the next step. But make sure you test these designs.