/ web & mobile

Research, analyze, design, present, and evaluate. Repeat often and as many times as needed. Learn from mistakes, improve and test again. You can start with assumptions, but you have to end with evidence. It is a continuous and collaborative process. Without gaining true and authentic user insights, it is not possible to come up with a meaningful solution.

RESEARCH @ ALLARD LAW

ROLE: INFORMATION ARCHITECTURE / USER EXPERIENCE / USER INTERFACE & VISUAL DESIGN

In the Spring of 2015, I received a call from UBC's Allard School of Law. They were looking to come up with a concept for a Research Portal that can be used to promote the School of Law, feature profiles of research projects, new publications and research outputs, as well as stories of how researchers from Allard Law are influencing diverse communities both near and far. It was a great opportunity to get involved with another UBC project. The challenge was to come up with well-written personas that would reflect the diverse audience. We also wanted to include social media as one of the mechanisms allowing the site visitor to connect not only with the publisher but also spread the news about this new initiative. As for the visual portion of the assignment, we had to operate within the UBC CFL standards, which to some extent, narrowed the design options. After a few ideation meetings, we selected the preferred wireframes and without too much time spent on prototyping, the site went live at the beginning of Summer. It was built on WordPress - one of the platforms allowed by the UBC IT department. Apart from close collaboration with the Allard Law team, I worked with Tim Gerwing on this project, and his thoughtful insights helped us to customize the admin interface for the Allard Law web team.

If putting the customer at the centre of the project is the key to a successful result, then involving all key stakeholders in the process forms the understanding of the context and is a fundamental part of the design. It's a collaborative activity where everybody is welcome to contribute. Rapid prototyping allows one to fail early in the process and, through multiple iteration cycles, move towards a solution based on evidence, not assumptions.

8TH GENERATION VINEYARD

ROLE: INFORMATION ARCHITECTURE / USER EXPERIENCE / USER INTERFACE & VISUAL DESIGN

In the Summer of 2008, I was introduced to the 8th Generation Vineyard by Brandever and asked to collaborate on the website design and development. I was very keen to begin the work knowing the striking black and white wine labels that Brandever came up with. 8 Generation Vineyard has been a family-operated business since 1783. The original website went live in the Spring of 2009. Very talented Kele Nakamura from Engine was the technical lead on this project, and we opted for a black-and-white interface with just a bit of colour through gorgeous photography that was sent to us by the client.

Over the years, the site went from being a Flash-HTML hybrid to html5 only and finally, this year, we were given the mandate to re-do everything. The biggest change was the idea to add a full eCommerce. We discussed and researched all the options, including the wine-selling platforms similar to vin65 or Blackboxx. None of them offered a package that was suitable, so the decision was made to build a custom WooCommerce website. Although the look & feel of the pages did not change that much, the user journey through the online wine store was something new, and we spent a lot of time discussing and mapping the experience. The store was extensively tested, and we were able to improve the interaction based on the feedback we received. We also wanted to add custom functions to the system allowing the 8th Generation team to maximize the options offered by Advanced Product Management. Tim Gerwing took the technical lead on this project, and the site went live in the Summer of 2015.

"Design Thinking is taking shape as an attitude, as a methodology, as a philosophy. And perhaps also as an approach to learning and designing learning. Certainly, if its methods are able to deliver on the promises, unlocking the potentials, setting creativity free, but in a collective and collaborative context, aiming for durable and sustainable ends, then it is more than envisages an existing and viable future. How can this be tested? Imagine, discover, think, prototype, test, iterate, implement".


~ Robert O'Toole

DYS ARCHITECTURE

ROLE: INFORMATION ARCHITECTURE / USER EXPERIENCE / USER INTERFACE & VISUAL DESIGN

In the Summer of 2007, I met with Knut Boeck from dys architecture to discuss a full re-design of their website. Letterbox Design just completed the overhaul of the ID system, and the dys team was ready to apply the new look to their online presence. I get a lot of inspiration from architecture, so I was quite excited that the firm decided to work with me. I invited Karyn Zuidinga from Analytic Design Group to collaborate on the Information Architecture and Usability and Kele Nakamura from Engine to be the technical lead on this project. In June 2007, we invited all stakeholders to a day-long discovery workshop. With the acquired knowledge, we begin the design process. The result was surprisingly different from most of the websites. The idea was based on The Laws of Simplicity by John Maeda. Remove obvious. Leave meaningful. We opted for a site with no homepage—or rather, a site where every project is a home page. A site with intelligent contextual navigation adapted to user's preferences. It was a radical departure from what we saw online in 2007.

Last Spring, dys architecture came back to me with questions regarding the mobile changes that we had to apply to the website. After several discussions, we decided that it was time to move on and prepare a new experience for the user. We went through over 100 prototype mock-ups, gradually testing and improving the experience. Because the content is full of images, we prepared a detailed guide on how to optimize images effectively for the mobile user. Kele Nakamura did a fantastic job adjusting his custom CMS system to make sure the admin interface is simple enough yet offers all the necessary functions to maintain the site in perfect shape.

www.dysarchitecture.com