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 the backend of the command line and into the…

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.

If you don’t sell, it’s not the product that’s wrong, it’s you. — Estee Lauder

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

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.

🗣️Empathize

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

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.

“If I had an hour to solve a problem, I’d spend 55 minutes thinking about the problem and 5 minutes thinking about solutions.” — Albet Einstein

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

💡Ideate

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.

✏️Prototype

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 Figma and Adobe XD. 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.

🧪Test

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.

UX Research

UX gif

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

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:

  1. The Principle of Choices — Less is more, keep your users’ choices low.
  2. The Principle of Front Doors — You have to assume that users will visit your website through other pages besides the home page.
  3. The Principle of Focused Navigation — Keep your navigation straightforward and easy to understand.

The 3-Click Rule

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.

UX/UI Resources

Colors

Brand color meanings

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 Coolors to help your website look organized and aesthetically pleasing.

Coolors gif

Layout

The Law of Proximity

Law of Proximity

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.

The F-Shape Pattern

F-shape pattern

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.

F-shape pattern - heatmap