Website Prototype

I was prompted to re-design the existing “Dub” website as well as conducting some initial user testing to evaluate the design. The newly design web page include the following basic functionality:

a. Events: calendar like system which include information about Dub events and weekly seminar series (schedule, presenters, abstracts, etc.).
b. Research: faculty research areas, projects, publications, collaborators, etc.
c. Blogs: listing of news and announcements of interest to the community.
d. People: listing of faculty, students, affiliates, etc. who are members of the dub community.
e. Login: a members section for dub members (login required) to edit own information on the site (profile, research, etc.).

Beyond the basic functionality, the homepage is meant for audience to quickly have an overview of highlighted information include Current Events, Highlighted Research, Latest Blog Post, and People in Dub Community.

Please check out my prototype via Axure share:


Existing Design Analysis

Before creating a prototype, I first explored and identify problematic areas in the existing Dub website.





Information Architecture and Layout Template

After identifying problematic areas, I reorganize information architecture for the Dub website and group information with similar content under the same categories. For example, I grouped publication and project under research category and I grouped news, calendar and weekly Dub seminar under events.


Grouping information with similar content helps me great deal to design a new layout for the website. Since the old Dub website overloads its front page with a lot of unnecessary  information, I decided to use the front page to only show the most important from each of the high level content: Events, Researches, Blogs and People.


Interactive Wire frame
After sketching out a rough layout template and reorganizing the information architecture of the Dub website, I used Axure to execute the interactive wire frame prototype.


Here are screen shots of the new Dub website.






Design Evaluation

I have conducted user research with a few participants. All of them stated that the overall aesthetic of the new Dub website was very well done. The layout is clean and they appreciate the amount of relevant information which were presented to them on the first page. One area of improvement for the new design is the “People” section of the website. Participants stated that the list of people’s name can be better presented. With the new design, it is still very difficult for audiences to look through lists of countless names.

Axure is definitely one of a better tool to prototype websites today. However, it still has a lot of constraint and limitation. For example, it is very difficult, sometimes not possible, to prototype different kind of animation or transition elements which I know exist on the web in Axure. I also found myself doing a repetitive action in order to get the same task done in different places. Furthermore, the html file output from Axure is not maintainable. Therefore, it is not usable in a long run. That is because the html code is not outputted in a way we could easily understand. If these issues can be resolved in the new version, then Axure would be a great tool for website prototyping.

Please check out my prototype via Axure share:





Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s