Shibaura Institute of Technology PROJECT

Shibaura Institute of Technology: Web Site Renewal

With many changes to the university web space, it was time for a five-year update.

Ogawa (Loftwork)　 Tell us about what led to your decision to overhaul the website.

Tomohiro Haneda, Corporate Planning Department, PR Division Web Director

Haneda (Shibaura)　 The site we completed in 2009 only had a CMS for news and events. Whenever we wanted to add new information to other areas, we were overwriting the HTML with new data.

With the rise of smartphones, universities need to do more widespread PR, so the role of a university website has changed. Over the years ours has been online, it accumulated a lot of data, so we wanted to step back, reorder things, and slim it down.

Ogawa　 What specific problems did you face?
Haneda　 We were using converters to provisionally support smartphones, but it was not what you could call full-scale support. The Ministry of Education, Culture, Sports, Science, and Technology also calls on universities and institutes of higher learning to make certain aspects of their curriculum public, but the more of this data was added to the site, the more layers developed, and navigation was becoming tricky.

We wanted to deploy a CMS across-the-board to set up a platform for efficient broadcasting. We also recognized that an update was a must if we were going to make maximum use of our website as part of our ongoing PR activities. With those goals in mind, we turned to Loftwork.

Defining requirements

Outlining the new site concept: achieving a feel true to the Shibaura aesthetic

Ogawa　 What left an impression on us during our kick-off meeting was how Shibaura approached us and said, “We don’t want one of those sites that could look like any other university’s if you just swapped out the logo. We want this to be true to the Shibaura aesthetic.

Haneda　 We referred to past work Loftwork had done for engineering universities. The design, site structure, and overall feel of these was creative and daring, something that was unconstrained by the conventions of what a university website had to be.

We felt that with past results like those, Loftwork would have convincing proposals for us, and we knew we would get feedback that met our needs.

Ogawa　 In order to meet Mr. Haneda’s goals for this project, we first wanted to define in concrete words what the “Shibaura aesthetic” is. This involved defining requirements and holding a series of workshops before proceeding.

Other departments from Shibaura joined a series of three workshops to define the new site concept

We held three workshops. For the first, we asked participants to give an elevator pitch about the Shibaura aesthetic. The feedback that resulted was then debated further amongst the group. For the second workshop, four keywords that emerged in the first session straightforward, serious, stoic, and sincere were broken down in greater detail. Each participant brought ten images that represented these four keywords; after voting, the top seven submissions were selected and we drew out further keywords based on those images.

The second workshop was crucial, as we started to see the contours of the Shibaura aesthetic. For the third workshop, we took that aesthetic and pitched ideas for how to turn it into content and features for the site. The workshop also played a big role in team building.

Haneda　 With many people from different departments at Shibaura taking part in the discussion, we were able to arrive at a uniform concept and re-establish our school’s strengths and visualize our target student.

Through workshops, determining the site's concept and functions

Ogawa　 For the design and layout phase, discussion moved forward through the vector of going from a site for “perusing” to a site for “using.” This draws on Shibaura’s own emphasis on practical learning.

Website's concept

Website's functions

Haneda　 Our goal was having the right amount of information for users — neither too much nor too little — and having the site function in a simple way. For instance, we slimmed down the navigation so that users can select one of three categories: prospective student, current student, or alumnus. We used to have a category for parents, but it was redundant and unnecessary.

Other ideas include a “reverse research lab search,” designed to have prospective students arrive at Shibaura content via their lab of interest, and a global navigation page that drills down to Shibaura’s core strengths so they can be seen at a glance. These and other refinements are designed to make the experience as easy as possible for the user, and it was a new tack for us.

Ogawa　 The greater part of the technical specifications was done in tandem with Onomura, one of our technical directors. I built wireframes, and we then built out the details together. Through this additional review phrase with Onomura, I was able to drill down and draft the site hierarchy and layout in full detail.

Onomura (Loftwork)　 I joined the project after the wireframes were created and was responsible for designing the specifications for the site. I had worked with Ogawa on numerous projects before, and I am very familiar with WebRelease2, so the process was smooth.

What left an impression with me was that when the school asked for a change to the specifications, Haneda convinced them that the specs we had arrived at would cover those cases. It’s rare for a university to have a PR person who is so enthusiastic and open-minded about back-end systems, so we were delighted to have him read our documents with interest.

We also made some special designs to the approval workflow.

Haneda　 That’s right. Thanks to the CMS, anyone at the school can take part in producing web content. Each department creates its own news and events, approves them, and publicizes them. It’s an integrated workflow that walks you through the whole process. As the PR department, we do a final audit of the content being put online. This has eased our workload and allowed us to focus on improving the quality of content.

Part of this strategy was that we don’t want PR to be something only the PR-skilled perform. We want each department to take ownership of broadcasting its own material. We have manuals for the operation and use of the system and we are working with each department to ensure they get accustomed to things.

Project results and next steps

Ogawa　 This project called for a lot of consideration and discussion, but Mr. Haneda is very literate in technical matters and light on his feet, so he was always ready to move things forward and have fun, seeing to every detail through to the very end. It was fun to work with him.

Other memorable moments included an outdoor meeting (at a park near the Shibaura Institute of Technology), where we refreshed our minds, and a meeting styled after a popular TV show, where we couldn’t go home until we decided on a final wireframe. The entire process was enjoyable, so it never felt stressful.

Onomura　 The designers gave us their own design proposals, the team was particular about the exact workings and movements of Javascript functions, and all of the project members took an active role. That’s probably why it felt like fun, rather than work. Mr. Haneda, what do you think?

Haneda　 I couldn’t really visualize how the keywords from the workshop would take form, so I was pretty excited to see what came down the pipeline. Our site is something special now, and it’s not something other universities could mimic. Each department can broadcast information about its activities, and the site as a whole is being updated more frequently.

Ogawa　 What new challenges do you have planned for the future?

Haneda　 There is lots in store. The site is now feature-rich, but we need more content to satisfy our users. You’ve designed and built a site that lets us do what we want to do, so now we can start moving forward and creating lots of original content. We have also been selected as a Top Global University, so we are speeding up plans to create an English-friendly site.

Ogawa　 We look forward to supporting you!