WVU Research Redesign: UI/UX (wireframes) & Screenshots

What is this?
Set of linked wireframes created in balsamiq, a wireframing tool to get initial input from users, stakeholders and colleagues on the user-interface, interactions, functionality and plans for desktop and mobile, with functionality, mobile, code and performance optimization in mind, with changes and interactions annotated with notes, arrows and callouts explaining how sections/areas elements work on mobile and what they do. The medium screen and small/mobile interactions were demostrated in the functional HTML prototypes that were created early on during development and the same was transitioned to the final production website in an Agile development mode.
What is the website about?
A portal site showcasing all aspects of research at WVU: Areas of research focus, research news and events, featured faculty, funding and policies information, research centers and programs all across WVU, as well as resources and information for internal and external users.
This is a responsive redesign of the current website which also combines two websites, a research office website (with a focus on funding and policy aspects) and the existing research portal website (http://research.wvu.edu) with an improved interface and functionality based on feedback by users, Google analytics data, surveys and more.
Current and prospective faculty/researchers and students, industries looking for partnerships, legislators and general public seeking information about research at WVU.
Focus of the website:
- Feature main areas of research foci at WVU Research and WVU research news and events.
- Include easy access to frequently sought after information by faculty (as found by user input, surveys, google analytics data) and student programs.
- Function as a portal to the many research websites at WVU; Labs and Facilities; Highlight, compile and provide links to information relevant to researchers that is scattered among other research websites and offices websites.
Started out with a drop-down for sub pages but to provide a more descriptive overview of what's included in that section (several items could be included in one page), I went with tool-tips instead, for a more descriptive 'information scent' of that section beyond just sub-pages.
Main focus area: Responsive slideshow that is optimized for all screens. Doesn't show on mobile. Content is same and is still available in all and they get to each focus area within one more tap/touch leading to about page.
Main Focus Area and Content:
Since auto forwarding is disabled (better usability), the slideshow order is randomized to show a new starter image each time so all images (showcasing different areas of research focus) get equal exposure with returning visitors. This helps in overcoming the constraint of all slide-show images not being explored.
The RSS feeds will be collapsed to content-dropdowns on smallest screen size to conserve real-estate and a long scrolling page and also has a button below that leads to all news and events page.
There are two alternate footers (and both can be seen by clicking on the arrow button next to it), one a simple footer and the other iincluding several research websites across WVU that are useful for researchers and visitors. User input, research, polls and surveys showed that users do not focus much on elaborate footers much less on the ones containing numerous links and hence the simple footer was used in further iterations.
Initially included areas of research foci at WVU, research statistics highlights, and the about administration was added to focus areas handled by the administrators upon their input.
It was a breeze to change as the common elements/assets were created as symbols, which duplicate on all mockups upon changing in one place.
Several ways of contacting resources, offices and information is provided to make the organizational silos transparent to users.
This was the most used section according to google analytics and hence a lot of planning went into incorporating user feedback, including information and links scattered in other administrative research websites, How Do I (tabs which will transform into vertical accordion panels on smaller screens); Callout for important areas, such as funding, publications, industry partnerships (was incorporated after an input received during the coding/functional mock-up phase of basic home/back template which just took about a few minutes to change) and circulate.
Find Research:
Brings together all research centers, departments, and areas of research at different schools; graduate and undergraduate research programs and opportunities (frequently visited areas on previous website).
News and Events:
To prevent duplication of information from the research news at WVUToday, Health Sciences Research and Funding information blog, this section contains research tagged RSS feeds from those websites and an RSS feed of research tagged events from WVU calendar across the university as well.
Links to the completed WVU Research website and technical details:
WVU Research has been redesigned since this writing and current website does not reflect the iteration described here.
Back to Top