B-Tech Community Portal Website Design

This spring I took a class called “Design and Factors in Human Perception“. I learned a lot about different design principles and how they affect how people interact with things. One of the biggest parts of this class was a group project called the “Industry Interface Project“.

The Project and Deliverables

The “Industry Interface Project” was a project that allowed us to apply the principles we’d been learning all semester in class to a project from a real client. Our client was from the University of Minnesota’s Office for Business & Community Economic Development (BCED). He needed to construct a community website, much like Facebook or LinkedIn, to help bring the community members his office works with together–specifically in the B-Tech Office.

The deliverables for this project were researching and creating personas, creating wireframes for presentation and user-testing, and finally refined wireframes based on the results from our user testing.

Personas

To help make the design process much easier, we created 3 personas to represent each of B-Tech’s audiences: Small Business Owners, Youth Entrepreneurs, and Computer Learners. A personas is essentially a character you use to help you design, so rather than thinking about how you would like the site to work, you think about how the  people you are designing the website for would like the website to work. Our 3 personas–Tiffany Lawrence, Xavier Houston, and Tanya Flores–each had their own needs and goals for the website, and throughout the design process we would ask ourselves questions like–what kind of information would Tiffany need quick access to? or would Tanya even really care about this? This helped us get a better sense of what information is most important and how to organize it.

User Testing

After creating our initial wireframes, and updating them with feedback and our personas, we had the opportunity of using the University’s usability lab to do user testing. In user testing, we asked our testers their initial thoughts about our website, asking them to give us critical feedback. We then walked them through a few different scenarios to see how the site flowed and where mistakes occurred. The really cool thing about user testing was that the equipment allowed us to see where on the page the user was looking through eye-tracking. In the galley below are several examples of what we saw. The gaze-plots and heat-maps allowed us to see where they were looking, how long they looked there, and what the clicked. Very cool.

Final Wireframes

After getting feedback through user testing, we were able to make significant updates to our wireframes and polish them to a point where they could be used as the basis for the client’s website.

For our site, we really wanted something that was clean, simple, and easy to navigate, but also something that guided users to the information they needed and helped promote a sense of community interaction and connection. The homepage directs the audience members to a dashboard page that has information that is more specific to them. The dashboard is divided into customizable ‘modules’ that allow users to get a quick overview of what kind of activity is going on in the community portal. Allowing users to register and log-in can further customize this information with an inbox, contact list, listing in the directory, etc. There is a combined Events & Workshops page that allows community members to view and register for upcoming BCED events as well as rate previous events they have attended. We also created a shared forum to help facilitate community interaction and a shared directory to promote connections. Check out the final wireframes at the end of the gallery below!

Gallery