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 frontend using HTML and CSS. Our Mod 2 projects consist of creating our first web apps where we not only does our code show our creativity but the actual design and functionality of the website itself.
The days of old have changed and have been documented in history and marketing textbooks. 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 make 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 is 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) (What?, Who?, Where?, When?, Why?, How?), state what outcome of solution would be, state 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 guess work 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 taking available resources will come later in prototyping and testing.
✏️Prototype
Prototype is meant to provide a working example of what the app should do, user flows, and possibly 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 pallete, 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 comes 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
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 eventualy, helping when asking users 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:
- The Priniciple of Choices — Less is more, keep your users' choices low
- The Priniciple of Front Doors — You have to assume that user will visit your website through other pages besides the home page.
- The Priniciple 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
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.
.gif%3Ftable%3Dblock%26id%3D930d7771-418a-41ea-b303-7914f0036e04%26cache%3Dv2&w=1200&q=75)
Layout
The Law of Proximity
The Law of Proximity states that objects that 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
When planning out content or features on your app, keep in mind on the organization of what and what important aspects of the app is displayed.
