The UX Method

The Method
Works in a Loop

#1 Identify Problems

Step 1 is to recognize a problem. Think of design as "creative problem solving". Well in order to do that we need to do that we need a problem solve! Look around your world today and think what problem could I solve through design?

#2 Create Personas

Step 2 is to establish who it is you are trying to help. These people who you are trying to assist are what's known in the UX world as a "persona". These persona's are absolutely vital to any design endeavor as the provide a kind of grounding to your design work. Always be trying to design what's best for your user!

#3 User Stories

Step 3 is to create a user story and a user story. Whenever I sit down to develop a digital product, I like to think of the users entire life leading up to the time when they find our product. In this way I am able to clearly see how the problems I described in the first step are effecting peoples lives.

#4 Components

Step 4 is to create a prototype or what's known in the industry as a "wire-frame". These are usually made using a piece of software like Figma, Sketch or Adobe XD. The goal of the wireframe is to be a low stakes and flexible. This way it can be easily changed depending on the results of your user testing. Think of this as a rough draft and don't worry so much about how it looks just yet. 

#5 Wireframes

In Step 5 we create what are known as wireframes or prototypes. These are low detail low aesthetic blue prints of what the lay out of our app is going to be. The important thing to know about this step is your wireframe is going to be changing a lot based on what happens on step six so don't sweat details or aesthetics at all in this stage. Focus on placement and flow.

#6 User Testing

Step 5 may be the most important step of all and that is that we have to test the wireframe. The reason that this is so vitally important is because it is much better to realize something is not working when the stakes are low than to realize something is not working when you've already spent thousands of dollars to get it developed. 

#7 Redesign

This is perhaps the most important step of all. Based on what we discover in user testing we are going to be redesigning our app to better fit the needs of our user. We are going to be constantly testing and retesting wireframes until we feel like we have nailed the UX of the product.

#8 Add Aesthetics
Step 8 is to make it pretty. Once you have finalized the way that your app will be organized based on your user testing, you can begin to to focus on how to use aesthetics to enhance that experience. This involves things like what colors are going to be used, what's the background going to be, what photos are we going to use etc.

Step 1
What are the Problems?
(Emmanuel Pathways as Example)

Problem #1

Find Your Career

There are misconceptions that earning a college degree won't lead to a successful career post graduation. This is especially true for art majors.

Problem #2

Students are having trouble finding reliable data career paths for different majors.

Step 2
Who is Having the Problem?

Mary Williams

Mary is an artist who is considering majoring in art at Emmanuel College. Her father (who is paying her tuition) is very concerned about this. Click below to learn more.
Click Here

Stephen Glansberg

Stephen Glansberg is a young man who is planning to take out a student loan to pay for his education. Knowing that he will have to pay it back he is extremely concerned with his career trajectory post graduation.
Click Here

Step 3
Create a User Story

Stephen Glansberg User Story

Decides he wants to go to College

At some point in his life Stephen decides that the best way to secure his financial future is by graduating from college.

Step 1

Recognizes Family Can't Pay

After deciding that he wants to attend college to better his financial future he comes to the realization that his family won't be able to pay for it.

Step 2

Begins Researching Student Loans

Upon recognizing that his family cannot pay for his education Stephen begins to inquire about student loans.

Step 3

Hears horror stories about student loans

Stephen's research has revealed to him that student loans can completely cripple your financial future if approached in the wrong way.

Step 4

Narrows down potential majors

Stephen decides that he needs a major that will lead to a stable career path upon graduation. He recognizes that some majors will be more lucrative than others.

Step 5

Researches which majors will be best for him

Stephen does some research about what majors will best help him reach his career goals. He is shocked to find that none of the colleges he is interested in provide any career data.

Step 6

Finds Emmanuel Career Paths

Stephen's search eventually leads him to the emmanuelcareerpaths.com. He breathes a sigh of relief to see that the site provides all of the career information that he has been looking for!

Step 7

Browses Majors and Picks One

After browsing all of the majors offered on the site Stephen finds one that he thinks to be perfect for helping him reach his future financial goals.

Step 8

Attends Emmanuel College

Stephen appreciates the data he received and is impressed by the site so much that he decides to attend Emmanuel College. 

Step 9

Step 4
Project Components

Search by Major

Users must be able to quickly and easily search for whatever major they are interested in.

Hear from Alumni

Users must be able to watch videos of Emmanuel Alumni discussing how an Emmanuel education has benefitted their career.

Browse by School

Users who are unsure of what major they would like to explore must be able to use some kind of browse feature. Browsing by school will be our initial way to help users browse.

Data Visuals

Users must be provided with helpful data visuals that will allow them to interpret useful data quickly and easily.

Step 5
Wireframes and Prototypes

Step 6
Test our Wireframe
What do Users Think?

We knew that being able to search for whatever major you were interested in would be a high priority but we didn’t fully grasp how high that priority was. Based on this knowledge we decided to make it even easier to find the search features by making in one of the first things that you see as you scroll down the page.

This was a surprising one, users reported that they would have expected some kind of news feed or current events style updates. It seems that one would simply be expected for this type of website.

For the user that did not know what major they wanted (which was a fair amount of test users) browsing features would be much more helpful.

Step 7
Reiterate
How Do We Make it Better?

Emmanuel-First-Design-page-001 Untitled-page-001-1-e1674853185238

Step 8
Developing Aesthetics

Untitled-page-001 Emmanuel Aesthetics-page-001