wireframe_hero_2.png

Springboard.com UX Course

Springboard.com UX Course

 
 

The Idea

 

The first step in the Springboard UX course was to come up with a product or service website or app. My idea was to create a children's toy charity in which people can give a small amount towards a toy for a child. I called it ToyFund. The rest of my project work is based around this idea.

User Research: Interviews

The next step was to begin testing my idea. A survey was created and interviews conducted both in person and via online survey.

The interviews were crucial in understanding my user-base. I needed to know if people give to charity, what types of charity, and if they would give to my charity. From the results of the interviews, I could see that a majority of users do give to charities already and, most importantly, would give to my charity. 

 
 

User Research: Survey

A survey was created. Over 30 people responded to the survey. The 2 biggest problems my charity website had was "how many people actually give to charities" and "how many users would give to my charity". The results helped to shape my understanding of the types of users my site might see and how feasible my idea really was.

 
competative-analysis.png
 

Personas and Empathy Maps

Next, personas were created. Based on those personas, empathy maps were also created. The personas allowed me to understand each type of user. They showed the user's behaviors, goals, needs, and frustrations. They helped to create empathy for the user and their needs.

Empathy maps helped to understand how users feel and think. They helped me understand what the user sees and does. 

 
 

User Stories

User stories were created to define the elements of interaction and the pages needed to accomplish the site's purpose. Each story defined a key component the users needed to accomplish specific tasks. They covered everything from needing a registration form to confirmation messages.

 
 

Card Sort

A card sort was created to define the site's structure. Though I learned how to conduct a card sort, the results were quite disparate due to the small number of participants. I think this would have worked much better with a large group of 20 or more.

 
 

User Flows

 
 

User flows were created based on user stories. They showed every step the user takes through various parts of the site in detail. These were needed by the developers to understand how each part of the site functions. Covered were recipient flows, bio view flows, and donation flows. 

 
 

Low-fidelity Wireframes

Next, low-fidelity wireframes were created. Being low-fidelity, I was able to quickly create wireframes without the extra burden and complexity of programs like Illustrator or sketch. I was able to quickly see how each page would look and what content was on each. 

 
 

Hi-fidelity Wireframes

The final product was hi-fidelity wireframes. This is where all the details came together. I thoroughly enjoyed creating the hi-fidelity wireframes. I’m a person who loves the little details, so this came natural to me. I first tried Sketch, but fell back to Illustrator because I know it so much better. 

 
 

In my 15+ years in web design and development, I’ve created more than a few flow charts and wireframes. But during this course I learned about the many other facets of UX design.

User research was new to me. I got a chance to learn how to conduct surveys and in-person interviews in which I learned to take real user input to define the product around the user.

Personas and empathy maps were new to me. But I learned how to feel empathy for the user and how to use that to inform future decisions.

Also new to me was card sorting. I found this to be a fascinating way to define a site structure that is driven by how users think. Though doing the card sort with a small handful of people did make the outcome a bit disparate.

User flows were nothing new to me. They inform the site’s logic, helping developers understand what’s needed and how it flows.

Lo-fidelity wireframes were something new to me as I’ve always jumped to hi-fidelity – going straight to illustrator to mock up wireframes. But they allowed me to think on the spot without the constraints and details found in hi-fidelity wireframes. Finally, hi-fidelity wireframes were created to fill in all the details. 

I learned a lot during the springboard UX course. Again, although i’ve worn the UX hat a few times during my career, I now have many more tools in my toolbox to create websites and apps.