Design-Use-Build: Website Prototyping
HCID 521 Prototyping Studio | Week 5 | Assignment
RESEARCH
Current Website Analysis
Current DUB website has an unclear purpose of serving its viewer: slowly and infrequently updated news/blog sections (which is also the major part at the landing page of the current site), fragmented resources of related publication and papers, and available information scattered all over different pages in an unstructured way.
I sketched down current website’s overall information structure and architecture by going through every corner of the website. By reducing unnecessary branches and redundant accesses, the structure of the new website serves with clean flow, simple & obvious infostructure, and fast process of completing tasks.
Also, target audience of current website is blurred and unclear. I pre-defined the possible audience into two types: in DUB and outside of DUB . While assessing each audience’s major purpose of using DUB website, I found out that these two types of audience obviously aimed for different purposes. How to make them achieve or move closer to their desired results at the moment they visiting landing page, is the main strategy of the landing page layout and overall system structure of the new design. Therefore, my strategy is to bring different types of audience to different part of layout. I also noticed that the DUB website obviously is not well-maintained: no curators and administrators are in charge specifically for this website. I also took this into consideration for my new design.
Search for Examples
Before sketching down the visual layout and further adjusting the diagram of infostruture, I searched some websites in order to gather valuable inspiration from those, including content of education divisions, government institutions, and museums. By not focusing on too many of their visual elements and only emphasizing on the infostructure, I came up with a basic concept of landing page layout. References websites include well-praised renovated GOV.UK, Yale School of Architecture, Tama Art University (Japan), and over 15+ other websites. Appendix #2 lists out all the websites I have taken as references.
DESIGN
Design Principle/Development Constraints
Simple, Clean, and Fast. While saying simple it is not about the visual layout, is the way to use the website. Clean means reducing amounts of images, keeping a text based but decent layout. Fast is to make every task on DUB website to be completed in a fast and structural process.
Again, this also takes not only viewers of the website but also the administrators/curators into consideration. Less picture-based layout to avoid workload for admins, and using existing resources of DUB community (eq. Google Calendar for DUB community, and Vimeo for DUB Seminar), are all applied into the new design. Also considering the lack of time before CHI, the design is aiming for getting into actual development process in 1 week.
PROTOTYPE
Link to prototype: Axure Share
Information Structure & Architecture
As previously mentioned, the new design has a flatter structure, avoiding unnecessary recursive accessing.
Tool: Software
For this assignment, I used Axure to create digital mockups.
Fidelity & Purpose of Testing
Even though Axure allows designer/developer to create a website mockup with high fidelity, the purpose of prototype and testing was not mainly about the aesthetic consideration (especially, color). That was why I chose to reduce the use of color and image to minimum, by using only black/grey/white to indicate different division of elements on the visual layout. Below shows my purpose of prototype and test:
- Information amount user can perceive at the first glimpse: whether user can tell what kind of clear information he or she can see on the page.
- Reachability of website’s functionality: whether user can easily know where to click/what to do while trying to finish specific task.
Things untested include but are not limited to:
- Overall aesthetic look
- Transition and animation of website
- Quality of content
ANALYSIS
Testing
I have conducted 3 testing iterations for this prototype, with several adjustments after each testing. Two of them are students in MHCI+D, and one is a faculty member of DUB community from iSchool. Assigned tasks are shown in Appendix #1.
General Feedback
Feedbacks in each testing iteration are shown in Appendix #1.
Landing Page: Generally, users like the way layout of the landing page, which all the essential information are available and divided into different sections. However, it requires users to recognize the layout at first, not the best for first time visitors.
Research/People — Landing Page: Clean and text-based layout was well-received. Filters are also the part that were praised. Some prefer grid view (People) intead of list view, but the list view created the faster navigation experience.
Research/People — Item Page: Clearly divided grids help user to find desire information quickly.
Search: Same as research/people, the filter and clear layout were well-received. However, universal search bars on each page were questioned about their necessity, which some claimed those should be serving research related search only while on research pages.
About/Join — Static Information Pages: The Join page was praised in leading different types of users to different sections. About page was questioned about the layout, although it was not fully-defined.
Login: Clean, quick, straightforward, and easy.
Instructor’s Feedback: I saw instructor’s feedback of my prototype said “clutter” during lecture. I would like to ask more about the reason behind the feedback.
Modification after Iterations
#1 The landing page layout changed, adding back the actual calendar widget placeholder to the calendar part.
#1 Something missing that does not need the requirement, like research field.
#2 The landing page layout changed, calendar became the major part.
#3 The landing page layout changed: news became the leftmost part, while simplifying the design of calendar and DUB video.
Next Possible Steps
I will be using more actual contents, and adjusting some alignment to make the news part look less crowded. I will remove the image part of the news section and put on some line-based icon to keep the consistency, but still make each article identifiable.
CONCLUSION/TAKEAWAY
Landing Page
I have had hard time struggling the information amount I should put on the landing page. I would like it to be text based and simple, but also want it to be better for information finding. The next phase of prototype might be two different types of landing page: one still with all the information on it, while another one with reduced information and reduced one will be replaced by some “hints” — icons or other simple indications.
Font & Color
Since it is a text-based layout, the font choice becomes important. I would suggest to use the default sans-serif typeface for UW branding: Frutiger, to keep the consistency of entire UW branding strategy. Also, I did not apply any color scheme in the website. It should be combination of UW branding color scheme.
Decision of Prototype at Current Stage
Since a sufficiently-detailed spec of new DUB website (TA, fulfillment of functionality, and current stage of research/analysis or redesign process by DUB website administrator/maintenance team) was not provided, I decided to go with a less visual design purpose and a more general one. I did not fully take out all of the visual element since some of them are still related to the overall infostructure (eq. alignment system, font-size, and width:height ratio of each placeholders). However, based on my designer/engineer friends’, previous co-workers’, and my own experience, if the base of a website, infostructure and architecture, were not determined (or at least a basic spec of TA is set) before visual design coming in, it is merely possible the development process and communication between design/engineering teams(or leads) would go through smoothly and rapidly, or even come out with a feasible final product. This is even more crucial for DUB website if the DUB website is going to be a platform as information provider (and based on my analysis, other possibilities are obviously not profitable, marketable, and feasible for DUB community).
Testing Analysis
As usual, I spent way more time on previous research, analysis of testing, and modifying prototype during each iteration instead of creating prototype. It was also no longer a surprise that some testing results were different from my expectation. Just-in-time modification has obviously become so important. More, feedbacks from different roles of users also brought out diversity of testing result, which also brought in more integrated perspectives to the entire design process.
Pre-Assumptions?
I would like to receive more feedback from this part of my assignment. Please point out the strength and weakness of my opinion, and correct me if my assumption is wrong or inappropriate. Thank you!
During lecture, I realized I might have a lot of pre-assumptions than others did while working on this prototype, and some said this might be a huge constraint while working on prototype. However, personally I think these are things we need to take into consideration at first in order to facilitate and speed up work and communication process with multi-disciplinary team while developing the website. The ugly truth is, DUB website does not have a job position for maintaining and curating, and I can tell a lot of designs in class require a lot of effort to do so. If the implementation of final design is costing too much in terms of budget/material(in website’s case: optimization of speed and visual quality)/labor(curator or administrator), just like Zaha Hadid’s fancy but extremely costly architecture design, it will just be entirely a waste of time and money. How to design a new product under constraints of current situation, which is the most encountered case in industry, should be more emphasized on.
APPENDIX
APPENDIX #1
Document: Testing
Tester #1 Nina Wei
Role: Student, MHCI+D (in DUB community)
Task: Random browsing, checking out events, editing profile, introducing prospective students to DUB (or to be specific, MHCI+D), searching for a publication under the DUB community.
Feedback:
P1. Clean and simple overall layout, information can be easily found.
P2. The filter of research and people’s pages are thoughtful.
P3. The links between publications and people on item pages (different research item or person page) are helpful.
N1. Color is dark and dull.
N2. While checking out recent events, she went to News & Announcements first instead of Upcoming Events.
N3. When introducing someone to DUB, the “JOIN DUB” label made her hesitate a little whether to click or not. To her, “JOIN DUB” seemed like a page for faculty members instead of students/prospective students.
N4. The universal (in terms of website) search bar can be confusing to her if she’s not at the home page. She expected if she were in Research, the search bar will only search for “Research” related content.
Tester #2 Michael Grazewski
Role: Student, MHCI+D (in DUB community)
Task: Random browsing.
Feedback:
P1. Good visual layout and workflow, overall a good browsing experience.
P2. Filter seems thoughtful.
N1. Not sure about calendar part at the landing page, does not look clear enough.
N2. Not knowing the publication and project were all combined under a branch called “research”.
Tester #3 Marilyn Ostergen
Role: Faculty member, iSchool (in DUB community)
Task: Random browsing, checking out events, editing profile, introducing expertise field of research to an acquaintance, searching for a publication under the DUB community.
Feedback:
P1. No frustration and barriers while browsing between other pages.
P2. The filter of the search/research/people page is nice.
P3. Grid view of different members is awesome.
P4. The member login and editing thing seems pretty straightforward and easy to use.
P5. The DUB seminar videos on the landing page is listed out in a ordered and nice way.
N1. She first pointed out the lack of visual hierarchy at the landing page: not knowing which one is the most important part to check out. It is overwhelming at first glimpse.
N2. The search bar on the landing page is universal search, that make sense; however, the search bar under the research branch should be search for research items only (or priorly).
N3. The publications and projects can be represented in icons instead of pictures.
Additional questions:
How frequent do you use DUB website?
I haven’t been there for a while.
If you are visiting DUB website, what will be your main purpose?
Checking out the DUB seminar and see if there are great lectures going on. Maybe more about the videos.
If you are introducing others about DUB community or your research, what will you do?
If it is about my research, I will probably just give them some of my works, like infographics or visuals. If it is DUB community, I am not sure I am going to show them the website. Maybe I will just talk about it.
APPENDIX #2
Referenced Websites
These are all included but not limited to my inspiration resources of prototype design.
GOV.UK / Certainty.Vision
Tama Art University / Yale School of Architecture
Sqaurespace Support / Design Museum Japan
Hyundai Card Design Museum (Korean) / USC School of Architecture
APPENDIX #3
Overall Concern of Branding Strategy: DUB Community
So the entire website design challenge pretty much brought the dilemma of DUB’s identity. What is the plan of future DUB website? Who should the website serve? Or, a more fundamental question, what is DUB’s branding strategy? According to my analysis and research, the website itself is only a small part of the entire identity problem with DUB community. Although I believe faculty members and administratives are trying very hard to solve these issues, since by only analyzing and re-designing a DUB website can indicate so many existing problems, a more thorough blueprint of DUB community is definitely eagerly anticipated.
