Wireframe Website Redesign
Concept
The University of Washington has a website for the “dub community,” which envelopes a community of faculty, students, and alumni from Computer Science, Human Centered Design & Engineering, and Informatics departments. The website’s design hasn’t been updated in a few years, and the community involvement has been close to nonexistent.
current dub website: dub.washington.edu
The purpose of this project was to improve the current dub site into a more welcoming and informative website for the current events in the dub community. The redesign wasn’t supposed to be a fully functional website, but instead, it was supposed to be a general wireframe to show how a user might navigate through the website.
Design
Hierarchy Plan
Before mocking up the visual and interactive designs for the website, I first performed an analysis of the features to include in the redesign. This allowed me to explore what I believed was important to the vision of the dub community. These specifications did not always make it into the final prototype because there were certain aspects that did not appear to flow well when I introduced the idea into the visual space. Being my first time using Axure RP as well as my first time designing a website, there were a few unforeseen conflicts when designing the wireframe. I will address this further in my reflection on the project.
Visual Layout
After planning out the features that I wanted to include in my design, I chose to sketch out my designs for a few specific features.
The calendar was the first tool I wanted to mock up because the meetups and seminars are currently the most active part of the dub community. I thought it would be nice to have this information available on every page.
To further encourage community involvement, I sketched out the dub member pages that would allow the user to develop a personal profile to connect with other “dubbers” in similar fields of interest. The profile would also show any publications and research that the dubber has been involved in.
I brainstormed some ideas about what to include on the home page. I originally thought that it would be nice to simply see all of the latest activity on the dub website and allow the user to filter out the information they wanted to see. However, I concluded that this might be overwhelming to have that much information on one page, so instead, I added a featured blog area that would encourage users to look at what projects other dubbers have been involved in.
Axure Prototype
After completing a general outline for the prototype, I then began designing the workflow of the wireframe in Axure. The layout from my sketches was mostly implemented for the featuers I mentioned above. My vision from the beginning was to create an experience for the user that encouraged them to get involved with the dub community. You can take a look at my final prototype with the link below!
Final Prototype
http://hyucf9.axshare.com/
Feedback & Reflection
Back in class, I had some of my colleagues take a look at my final prototype. This was the feedback I received during the evaluation:
-
Since the website is a fairly low-fidelity prototype, it could be helpful to focus more on the interactions and less on the visual designs.
-
The search bar should offer some basic result to at least show how users actually can search for content.
The rest of the feedback was fairly supportive in my design, although I think it would have been much more beneficial to conduct a couple, actual user tests with clear objects. That would have allowed me to gather real time feedback about the user’s thoughts as they navigated my website prototype.
Future Iterations
Any improvements to this website would certainly meet the feedback that I received from my colleagues. Since it was my first website redesign, working with Axure was a bit of a beast to figure out. I wasn’t sure how much time I should put into making sure the colors and fonts looked appropriate, but I now understand that it would be better to focus on the interactions in an initial prototype.
Now that I have a little better understanding to the workflow of Axure’s conditions, variables, and dynamic panels, I think there would be a lot more that I can add to the prototype in the future. The interaction that took the longest for this project was the member login. Once I finished that feature, I didn’t go as deep into the other interactions on the website because my prototype would, in theory, have many links that affect the variables on another page. For example, I would like to further develop the calendarfeature to allow the user to observe the information on the seminar page as well as schedule the event into their personal calendar application.