B-Tech Community Portal Website Design

This spring I took a class called “Design and Fac­tors in Human Per­cep­tion”. I learned a lot about dif­fer­ent design prin­ci­ples and how they affect how peo­ple inter­act with things. One of the biggest parts of this class was a group project called the “Indus­try Inter­face Project”.

The Project and Deliverables

The “Indus­try Inter­face Project” was a project that allowed us to apply the prin­ci­ples we’d been learn­ing all semes­ter in class to a project from a real client. Our client was from the Uni­ver­si­ty of Minnesota’s Office for Busi­ness & Com­mu­ni­ty Eco­nom­ic Devel­op­ment (BCED). He need­ed to con­struct a com­mu­ni­ty web­site, much like Face­book or LinkedIn, to help bring the com­mu­ni­ty mem­bers his office works with togeth­er--specif­i­cal­ly in the B-Tech Office.

The deliv­er­ables for this project were research­ing and cre­at­ing per­sonas, cre­at­ing wire­frames for pre­sen­ta­tion and user-test­ing, and final­ly refined wire­frames based on the results from our user test­ing.


To help make the design process much eas­i­er, we cre­at­ed 3 per­sonas to rep­re­sent each of B-Tech’s audi­ences: Small Busi­ness Own­ers, Youth Entre­pre­neurs, and Com­put­er Learn­ers. A per­sonas is essen­tial­ly a char­ac­ter you use to help you design, so rather than think­ing about how you would like the site to work, you think about how the peo­ple you are design­ing the web­site for would like the web­site to work. Our 3 per­sonas--Tiffany Lawrence, Xavier Hous­ton, and Tanya Flo­res--each had their own needs and goals for the web­site, and through­out the design process we would ask our­selves ques­tions like--what kind of infor­ma­tion would Tiffany need quick access to? or would Tanya even real­ly care about this? This helped us get a bet­ter sense of what infor­ma­tion is most impor­tant and how to orga­nize it.

User Testing

After cre­at­ing our ini­tial wire­frames, and updat­ing them with feed­back and our per­sonas, we had the oppor­tu­ni­ty of using the University’s usabil­i­ty lab to do user test­ing. In user test­ing, we asked our testers their ini­tial thoughts about our web­site, ask­ing them to give us crit­i­cal feed­back. We then walked them through a few dif­fer­ent sce­nar­ios to see how the site flowed and where mis­takes occurred. The real­ly cool thing about user test­ing was that the equip­ment allowed us to see where on the page the user was look­ing through eye-track­ing. In the gal­ley below are sev­er­al exam­ples of what we saw. The gaze-plots and heat-maps allowed us to see where they were look­ing, how long they looked there, and what the clicked. Very cool.

Final Wireframes

After get­ting feed­back through user test­ing, we were able to make sig­nif­i­cant updates to our wire­frames and pol­ish them to a point where they could be used as the basis for the client’s web­site.

For our site, we real­ly want­ed some­thing that was clean, sim­ple, and easy to nav­i­gate, but also some­thing that guid­ed users to the infor­ma­tion they need­ed and helped pro­mote a sense of com­mu­ni­ty inter­ac­tion and con­nec­tion. The home­page directs the audi­ence mem­bers to a dash­board page that has infor­ma­tion that is more spe­cif­ic to them. The dash­board is divid­ed into cus­tomiz­able ‘mod­ules’ that allow users to get a quick overview of what kind of activ­i­ty is going on in the com­mu­ni­ty por­tal. Allow­ing users to reg­is­ter and log-in can fur­ther cus­tomize this infor­ma­tion with an inbox, con­tact list, list­ing in the direc­to­ry, etc. There is a com­bined Events & Work­shops page that allows com­mu­ni­ty mem­bers to view and reg­is­ter for upcom­ing BCED events as well as rate pre­vi­ous events they have attend­ed. We also cre­at­ed a shared forum to help facil­i­tate com­mu­ni­ty inter­ac­tion and a shared direc­to­ry to pro­mote con­nec­tions. Check out the final wire­frames at the end of the gallery below!