UBCMUN 2016 Website
From 2015-2016, I served as the Director of Design for the University of British Columbia Model United Nations (UBCMUN). One of the projects I had was to redesign the website. This also served as a project I worked on as part of my part-time UX Design course at General Assembly. Click on the image on the right to see the process book. Below is an simplified overview of the approach and process I have taken.
Timeframe: 2 months
Technologies: HTML, CSS, Dreamweaver, inVision, PhotoShop
Projects: Design a brand new website
Click the image for the entire process book in the form of a PDF.
WHAT IS MUN?
Model United Nations is a simulation of the United Nations, the world’s largest network of international cooperation.. The purpose of these conferences is to educate participants about the complexity of international cooperation. On a personal level, the conference aims to elevate public speaking, learning to research, and encourage students to gain leadership skills.
WHAT IS UBCMUN?
The University of British Columbia Model United Nations established in 1993 as a pilot project of the International Relations Student Association (IRSA). It has grown from a small conference to one of Western Canada's largest collegiate Model United Nations. It draws delegates from all over the world. Beginning its roots on the UBC Campus, UBCMUN has now found its home in Downtown Vancouver.
Stage 1 - Problem Statement
It was definitely not an urgent need to redesign the website but because I served as the Director of Design for UBCMUN 2016, I decided that it would be a good opportunity to apply some of the materials I have learned from the part-time UXD course at General Assembly to the website.
Nonetheless, when I surveyed a few of my peers, nobody really understood what the 'hamburger' menu was all about even though it has been widely used on a lot of other websites. There is also a lot of random white space on the website which could act as distraction.
Stage 2 - User Research: Interviews
Very basic preliminary sketching during the thought process
Out of the user interviews I conducted plus a survey I put online several days after carrying out the interviews, a lot of users voiced their concerns about navigation and how information is organized.
Therefore, my goal is to redesign the navigation and also including information that users want to see. I want to be able to create a website that will not compromise the design and the functionality of the website - the aim to provide information for current and prospective conference attendees.
“It was difficult to navigate through the webpage. It took me a while to realize that the icon with three bars (the hamburger) was the main navigation.”
Stage 3 - User Research - Personas
Based on the user interviews, I have found three main types of users of the UBCMUN website and established personas that set the tone for my user research process.
The power user is considered to be a veteran of ‘MUN’. They usually have experiences in leadership positions and have been to more than 10 conferences, and been involved in MUN for more than 4 years.
The regular user is a member of MUN, looking to gain more experiences in MUN. Sees MUN as a networking platform and has an interest in international politics and debates.
The unfrequent user is finding out more about MUN, hoping to learn about the history of it and what attendees do at the conference.
Stage 4 - Solutions
“A conference website helps me determine which conference I should bring my MUN team to. A website’s design helps me decide which conferences seem more credible than others.”
From that, I'm concluded a list of solutions and perhaps a list of features that are not already included on the current website.
1. Build a clear navigation
2. Give users a ‘Home’ button option
3. Breadcrumbs
4. Provide universal headings to help organize information
5. Section out the information aim at different types of users.
E.g. Utilize an accordion design to display information specific users want to see
6. Call to action button that links straight to registration
Stage 5: Card Sorting and Taxonomy
I was able to conduct a simple card sorting activity with some of the relevant users of the website. These people were once members or presidents of the Model United Nations club at the University of Washington except for one person, who was interested in getting to know more about the group and what conferences entail. From that, I extrapolated the main findings from the activity and created this taxonomy outlining the features that could be enhanced or added to the new UBCMUN 2016 website.
Methodology
1. Content was written on individual index cards so participants could easily change and sort the order of the cards
2. Post-its were then distributed for participants to group the index cards in a flexible way, in addition to also allow participants add any additional features and/or sub-groups that they might think are relevant
I gave them simple instructions such as the purpose of the card sort and also what they were supposed to do with index cards and post-its.
On the left is a an example of a participant's card sort with the post-its highlighting the categories and the index cards showing the different content types on each page.
Stage 6: Wireframing and Prototyping
I initially started using Omnigraffle for wireframing but realized I am more familiar with Photoshop. Even though Omnigraffle is great at importing the conventional and existing style elements (think the whole iPhone interface), it really wasn't too necessary for me because my project focused on a website redesign. I really did not need the elements and packages that Omnigraffle included. Photoshop was just as good because I can also easily import those elements.
The prototype can be accessed here (made possible thanks for InVision).
A user flow through registration.
Final Stage - Outcome: Visual Comps
Goals and Moving Forward
With the general idea at hand and also through all the user research and analysis, here are the visual compositions I have done. I do have a set of branding guidelines to follow through with the rest of the UBCMUN team. I'll be spending more time working on the actual website and branding/marketing materials throughout summer, so stay tuned.