Flatiron School Mod 2 UX Design Crash Course

Entering Mod 2 at Flatiron School is full of excitement and promise. We’re moving away from only working on the backend and adding on the frontend using HTML and CSS. Our Mod 2 projects consist of creating our first web apps where we not only present our code to show our creativity but the actual design and functionality of the website itself. Although we can create a web app from scratch, there are necessary steps we should take in planning out the app as well as the information and aesthetic design to benefit the end-user.

Good products don’t sell because they’re good. People buy brands not products and a brand is something that needs to be crafted to create a narrative that makes a customer or a user feel like they’re missing out if they don’t buy it or use it.

Before you can formulate what your brand is and what it stands for. You need to determine what your product is and what it does.

Enter: Design Thinking.

Design thinking is a cognitive process/framework that challenges you to strategically solve problems and create solutions based on your understanding of internal and external factors. Design thinking is not only limited to UX/UI design but can be directly implemented in software engineering and even personal goals. The process follows five stages: Empathize, Define, Ideate, Prototype, and Test.

Understand the problem you’re trying to solve. Whether you’ve experienced the problem firsthand or know someone who has, the goal should be to understand who you’re building the product for. Set aside assumptions and biases for actual research.

Define your goal and the problem you’re trying to solve. There’s nothing wrong with starting small and simple…you know, Rome wasn’t built in a day and all that jazz. Create a problem statement, something that is clear, straightforward, use the 5 Ws (and 1 H) (Who?, What?, Where?, When?, Why?, and How?), state what the outcome of a solution would be, what are the issues and then state the method of how you would like to solve it.

This will help cut down guesswork and some struggle in the Ideation stage.

During this stage, you want to focus on the key issues and problems that you defined in the previous stage. The key thing to remember is that no idea is too small, just get as many as you can out on the table by thinking “outside the box.” There’s no need for a reality check here, refactoring and making available resources will come later in prototyping and testing.

The prototype stage is meant to provide a working example of what the app should do, user flows, and possible designs. First draft designs can be wireframe or even simple pencil-on-paper sketches with notes on the user flow and what information should be there.

A couple of great prototyping tools with free options are <a href="https://www.figma.com/" alt="Figma" target="_blank">Figma</a> and <a href="https://www.adobe.com/products/xd.html?sdid=12B9F15S&mv=Search&ef_id=EAIaIQobChMIkIz4pJqZ6wIVA4nICh2aigSgEAAYASAAEgLv_PD_BwE:G:s&s_kwcid=AL!3085!3!315233774139!e!!g!!adobe%20xd!1641846436!65452675151" alt="Adobe XD" target="_blank">Adobe XD</a>. You can create simple sketches, drag/drop images, and paste sample text to get a feel of your website will look like. Then, you can really get into it once you think of your designs, color palette, and the thought you want your users to have when visiting your website.

Another part of prototyping is writing code that can be used to meet deliverables for the app or project. This will either help move the project to the testing stage or may bring you back to the ideation.

This is where code and design come together in the form of a minimal viable product (MVP). This stage isn’t the end of the process, it allows the opportunity to receive feedback from the user, find/fix bugs, adjust application functionality.

Homework time! There are three methods to gaining insight into your end-users and how you can solve certain problems.

Through qualitative and quantitative methods, finding studies and survey data and/or conducting your own is a good first step in learning what your end-user needs and wants. This will help in the beginning stages of empathizing and defining the problem statement. And eventually, helping when asking users to test the application.

Information architecture involves in create a structural design of how your information is laid out and organized through your website, making resources findable, and supporting usability with good documentation and invalid input planning.

There are eight foundational principles of information architecture. However, a Flatiron School Mod 2 project, you should keep the following in mind:

The original 3-click rule said that a user should be able to find what they’re looking for within 3 clicks from their point of entry. Some argue that the rule doesn’t matter anymore. However, as a general rule of thumb, the least amount of clicks is always recommended.

Know what colors you’re using and the reason why. What emotion do you want the end-user to experience/what emotion do you believe your brand?

You can generate a color palette for free via <a href="https://coolors.co/" alt="Coolors - Color palette generator" target="_blank">Coolors</a> to help your website look organized and aesthetically pleasing.

The Law of Proximity states that objects positioned close to each other and grouped together. You don’t want objects too close but with good distance, it can help users understand the information and/ort the functionality of your app faster.

When planning out content or features on your app, keep in mind the organization of what and what important aspects of the app are displayed.