 All right, thanks for coming in, everyone, it's a good start. Here's just a little run through of what we're going to be looking at today. We're going to be talking about a website redesigned for the AFB.org website, that is the American Foundation for the Blind. This was an interesting project because though we do develop different websites, as you can see, for this project, the client has been acting, and they did the development. And what we provided was the front-end. So this is not exactly a decoupled-through-we'll-talk, but it is about a talk about process, about collaboration, and ultimately, deliverables, and you'll get to see a lot of this. First, some introductions. My name is President Bailey. I'm the Director of Design and User Experience at Kalamazoo. I'm based just outside of Toronto. In a little town called Cambridge. I've been designing websites since about 1996. Before that, I was a graphic designer working in print and multimedia, by the CD-ROMs, we're a thing. And in the last 23 years, I've just done just about everything that there is to do, although I'm not a programmer or an developer per se. I've touched pretty much every part of the process from testing and project management to actual design and building sites. I gave this very same talk just a few weeks ago at the Accessibility to Camp Toronto event. And that was a very interesting event if you all have ever been to it. You'll know it's got a very diverse group of attendees and speakers. That was an honor. And at Kalamazoo, what I'm responsible for is our design, content, and strategy practice. So I manage the design and strategy team. I'm also overseeing this every design phase when I work at Kalamazoo, like this one. So as I mentioned, I work at Kalamazoo. We work primarily with socially impactful institutions, associations, agencies, and governments to help them solve today's most depressing problems. And we do this by empowering them with the research, strategy, design, and technology that will help them transform their organizations. So they can better see what needs their organizations and communities. And that was a really prominent theme in this project because, as I mentioned, our client had a dev team. They wanted to build the website at the end of the day. So what we empowered them with was process and the design and content strategy. We're based in Oakland, a hotbed of social activism. We're also very close to San Francisco, many universities. But we're also a very distributed team. So we have members basically across North America and Canada and the U.S. One of our members is Daniel Costa Rica at the moment. Actually, that's where he lives. And we also have a group of two members in the room for European representation. These are some of the organizations who we work with. And you'll know a bit of a theme here. A lot of these are nonprofits. Some of them are Canadians and representatives are here today in Action Canada. We also work with CSI in Toronto. And there's one client here who worked with many years ago called Bookshare. And that was actually fortuitous because that was one of the connecting elements in how we got to work with AFB. Bookshare is a website that provides books for the blind and essentially trying to make as many books as possible accessible to those who are blind or to the impaired. We also work with a lot of universities and research centers. So again, what we're trying to do is work as much as possible with groups who are trying to change the world during the barriers wherever possible. Now, AFB has been around for a long time. You may not all be as familiar with them because they're an American nonprofit, but they've been around since 1921. They're a leader in expanding possibilities for the nearly 25 million Americans living with them. Now, they're a national nonprofit. They check in access and equality. And they stand in the forefront of new technologies and evidence-based advocacy. One of their most prominent ambassadors is Helen Keller, if you may have heard of her. Like Helen Keller, AFB's most famous ambassador, they're committed to creating a more equitable world for people with disabilities. And this project was really interesting because they have been around for a long time, but they realized that they needed to change the way they were doing things. And this is a quote from Kirk Adams, their president and CEO. We had a pleasure in speaking with him. And he had a really profound impact on our team because of his really positive attitude and, like, the notion of barriers were really just things to get past in life, in society, and, of course, that impact us in this project to figure out ways to get through some of the challenges of working and collaborating with members of different abilities. So I did want to mention the non-profit technology conference, NTC, which was where CEO Andrew Malice met Elizabeth Neal from AFB. She was the director of communications there. At that event, they chatted about a bookshare, which I mentioned a few minutes ago. And the time was perfect. Perfect because they had just issued an RFP to redesign the website. So we put together a proposal, and it all worked out, the numbers made sense, so we got to work together. So then it was a matter of bringing together the team. And this was a really important aspect of this whole project. And one that we all, that we recognized was so important, and what I'd like to recommend to all of you is to try to assemble as diverse the team as the stakeholders as possible. To get people from different levels or parts of the organization to care about the website project. But it was really instrumental for this one. So we had a variety of perspectives at the table from the earliest planning stages right through the development. And this was also really key because we had members of a team who were skilled screen reader users and people who used assistive technology daily. And that was, of course, the fastest way to uncover any problems from your template or your code with regards to accessibility. And also you want to be able to consider different viewpoints and queries. And I'll talk a little bit more about ways you can help foster creativity. And we have members with different capabilities. And we were working in a medium that typically is very visual. So this was the AFB team. We had members from the comms team. From the dev team. Two of whom were screen reader users. And everyone was familiar with the accessibility standards. So we're talking about the WCAG. 2.1 now. And you might be familiar with the levels A, AA, AAA. Well, AA is kind of like the new bar where you have to hit and consider an accessible website. But for AFB, it was really important as much as possible. And I also want to mention that I'll show to the AFB consulting team who were able to... AFB also has a team that provides professional services to do accessibility body testing and they play the whole project as well. And other members throughout the organization. Everyone was really interested in this project. On the Calamuna team, we had a pretty broad array of players as well. We had US research and design representation and communication strategy. Front end design. Front end development. Of course product management. But you'll note there aren't any back end developers on the screen. That was all handled by AFB. So a little bit about the project itself. So what were we designing? The old AFB.org had a lot going for it. I mean it was a little bit old looking. Little dated. But it was fully accessible. Nice interactive features. And it was well indexed by search engines. As you'll see. The site was also huge. And the back end was getting pretty quick. So it was time for a review. While technically mobile friendly its responsive design was really clunky. And overall it was very cluttered looking. But most importantly they needed to update the information architecture to reflect and explain AFB's new strategic mission. Okay. I'm going to get into that in a second. At the beginning of our of the project we like to show this diagram to our stakeholders to kind of give them a sense of what we're going to be going through together. This is what I like to call a bubble diagram. On the far left we have our discovery phase where we're asking lots of questions about who's, what's and why's. Trying to uncover insights that will inform our content strategy design. And in the middle we're really doing this design implementation which is very amorphous and organic and a little bit messy. But as we're nailing down our information architecture and then getting into the look and feel of things we're also looking at a code and how to build the components that will make up this website. What was different about this project as I mentioned before is we weren't going to be doing the durable part. So as I mentioned when we started the project as part of discovery we discovered that AFB had been undergoing some major changes and they had gone through a year-long strategic planning process in time leading up to this project. And during that period they had talked to lots of people both inside and outside of the White House field. They asked what can we do as an organization to deliver the greatest long-term value for people who are blind or visually impaired. What they determined was that they needed to focus on identifying the most challenging barriers faced by blind people to use research and data analysis tools to understand these barriers and identify solutions and then share that knowledge about these challenging issues in order to make positive changes in the lives of the blind while working in collaboration and partnership with leaders in the blind and visually impaired community. So prior to this they had been basically producing content and trying to work with people who were blind to help them cope with life but now they were realizing they needed to go up a level and actually work on changing the system itself changing the laws changing policies, changing attitudes. So we had a lot to figure out how are we going to do this in the scope of this website redesign? This slide shows a listing of all the different activities that we might conduct during a redesign project. The ones that are old are the ones we did for this project. So not everything, but quite a few. This is really a big project this is really about collaboration. We had to figure out which tools we're going to work for a team that consisted of both visually able and blind and everything in between in terms of our team makeup. We wanted to make sure that the creative process was accessible as well so that everyone could participate. So AFP gave us a lot of feedback on how to better communicate especially when we're trying to communicate visual design work to stakeholders who may have been blind and we had to adapt some of our discovery activities such as collaborative sketching sessions. So just in case you're curious here are some of the tools that we had to discuss and work with. At our agency we normally use JIRA as our project management tool to where an agile-based agency and you're like, you know, you use JIRA and fill out all these tickets and have all sorts of comments and track time and do all that kind of stuff. But JIRA is terrible for accessibility. So interestingly enough our team is pretty good. So we while we worked with JIRA on our team the AFP team was using Trello and we used a tool called UNITO to synchronize issues between those two project management systems. Okay, so that's great. Our team is all on the Google suite of tools so we're used to using Hangouts for meetings but Google Hangouts is accessible. So AFP was used to using Zoom. Okay, we'll switch to Zoom for those calls. No problem. Lucidchart is a web-based tool for diagramming and drawing pretty charts and stuff. But it's completely useless to someone who's white. So we altered some of our processes and deliverables to use Google Sheets accessible data on the table. And while Google Slides is okay it's not really great. It doesn't have the same semantic structure as Google Docs. So rather than delivering reports in a slide format we just use Docs instead. Okay, so some of the business needs that needed to be addressed for this project are pretty interesting. And we first needed to really get our heads around actually in this organization that was undergoing this massive strategic shift. So we started by conducting stakeholder interviews. Go to the source and I mentioned we talked to Kurgatis but we also talked to many other members of our team. And in addition to conducting interviews we also did email questionnaires because we just didn't have time to talk to everyone. And not everyone was going to necessarily be able to. But we were able to provide the really rich insights from a variety of stakeholders this way. And as I mentioned one of the most important things we learned about was the same strategic shift. Then we conducted a comparative analysis and you may be familiar with a competitive analysis but that doesn't really make sense in this context so we just switched the name a little bit. And we looked at some other nonprofits that AFB recommended. And we chose three that were most similar to AFB in terms of their missions to help change culture and policy because that's where they wanted to go. So we looked at the Urban Institute which is Urban.org. We looked at NAACP National Institute for the Advancement of Color People and the Elizabeth Laser Pediatric AIDS Foundation at AIDS.org. And in order to make sense of what we were looking at we didn't just look at some websites and cherry-pick some of the great things we wanted to actually become objective about what were the strengths and weaknesses of each. So we came up with this rubric to evaluate the different sites based on some criteria like visual design, application you know how is the messaging in my invoice what was the audience engagement and you know for your projects you might come up with different criteria but this is what we used for us. We needed to really understand who we were designing this new website for. So for this project we didn't create personas though as we did. For a few reasons in this case mostly time and budget restrictions we were trying to do a lot in a short amount of time but also because they were pivoting to focus on an entirely new audience it meant that you know we didn't have a luxury of doing a long extensive audience research phase which would require a lot of time and effort and research to do properly. So instead we focused on the key user types that would represent the kinds of people that we are looking to. So these are the audience types that they were already serving very well people losing their vision including family members job seekers who are either blind or vision impaired educators in health or rehabilitation professionals blind people interested in assistive technology news and people interested in Helen Keller and the history of blindness in America and that was actually a huge portion of their audience as we learned but their new target audiences were completely different instead they wanted to target donors, funders, sponsors and corporate partners legislators and policy makers academics, researchers and educators non-profits with overlapping goals HR employers, consulting clients and journalists in the media again trying to change the system itself so we were like okay this is going to be an interesting exercise of content strategy because they didn't want to lose their old audience along the way so we wanted to understand from the stakeholders what was most important to them in terms of what their dream website would be like so we did this art exercise called you know what are the five words you would use to describe the dream website from there we got our guiding principles so these were the guiding principles for this project and they were not surprising but accessible was the word that came up the most but authoritative motivating, modern, easy to use were all really important and in addition being flexible clean, bold and fresh and some of those words might kind of stand out because they don't seem like they would be appropriate for a site generally I'm tired of people who are interested in blindness but it wasn't really important that this website looked good that was something that came across from all the stakeholders because they were trying to appeal to people who could see and who would be judging judging them and their authoritativeness and their their organization based on how their website looked so we got that but that also made it a challenge because as I mentioned our accessibility guidelines were also trying to achieve but we'll get to that in a bit so we really needed to understand user as I mentioned it had a huge audience we didn't want to lose it, we wanted to understand what were people doing on the website so for that we looked at analytics and used a few different techniques here one of which was to install on the homepage just to be able to see how people were interacting with that with their main page this was just using the free thousand, first thousand page views installation looking at desktop, tablet and smartphone we were tracking most clicks scrolling and looking at most movement in order to generate these heat maps and you'll notice that the middle image of the most tracking has a huge amount of activity in it so it took the amount of clicks you see on the screen on the far left and this was really interesting to us and indicated to us how people were interacting with the page itself as some people would scroll across using magnifiers they were literally moving their mouse across the page, line by line to be able to see in their tools what the content was but it was also important for us to realize what people were thinking and what they weren't it might be a little bit hard to see but in the very top part of the far left screen there's a little button a little two little buttons to change the font size and we had a really interesting discussion in the debate about whether or not to keep the font size select your buttons and this exercise actually prompted us to keep it because even though the browser native we can handle font resizing if you go to your website there was a benefit to having those as visual indicators that that was an important consideration for people with low vision so they stayed we also looked at analytics as I mentioned we set up a Google data studio report to help visualize the data for ourselves mostly but also to communicate what people were interested in and where they were coming from and what kind of devices they were using what's it really interesting across the bottom those three pie charts one of the far left is the traffic source or sources and 75% of the traffic was coming from organic search which is pretty huge also note that it was like more than three quarters not too surprising but about a 50-50 split between desktop and mobile and tablet which was really high and surprises but we're like okay so this site really needs to work well and all that and then we wanted to dive a little bit deeper and look at some of the user flows on the site because we noticed like so there's all this search traffic that's coming into the site what are they looking for and where are they going well this behavioral flow diagram because it's a little bit upside down most of the traffic is coming through the very bottom block which is like other so what are they looking for we had to actually drill down I'll show you in a couple of slides that people were not coming through the whole page essentially that was the last place people were going to go when we're thinking about our content strategy and thinking okay powerful access to content we're looking for we wanted to really be able to visualize and understand what content was resonating for people and what was being engaged with so we conducted a content audit and we did the usual stuff we're looking at understanding from every single page on top now what's there what are the challenges because all the stuff is really important impacts for navigation SEO and architecture so here is a diagram that illustrates their long tail content this is just the top 200 pages and it kept going there just wasn't enough for them to show 500 pages but it just keeps going they have so much evergreen content that was still sparking joy for people and because they had always followed W3C guidelines that had really great semantic structure I mean and they had been around for so long there were all these inbound links so they were getting tons of traffic and we didn't want to lose any of that so we had to be really smart about reader access strategies and also having safety nets for people who might be coming to our new site to be able to find that stuff so this part of our process when we're trying to reorganize content we do have an exercise called content now and just before I get into that we were looking at page depth as a concern and page depth basically refers to how many clicks you have to make to reach a specific page on the site from the home page by taking the shortest path now the biggest bucket of content on their site was at the sixth level now that's not terrible but I mean it's pretty bad but it meant that we could obviously one of our goals was to do a better job of surfacing that content sooner that's just too many clicks to get to the good stuff but when we looked even further we realized that 85% of the pages were between 4 and 8 levels deep so we really did have a lot of work to do there some of the content was 9 and 10 levels deep I mean that's like an adventure to get to that stuff so we were really challenged to come up to make sense but be a lot more streamlined and simple so here's just a little cut out of our content so you can see what it looks like and we started our reorganizing efforts using this technique but of course this wasn't something we could communicate to some of our stakeholders because again this is visual, this is done using this in terms so from this point once we had kind of got the general feel for how things were going to be organized we then put everything into a Google spreadsheet and that's what the blind users or stakeholders were able to use to navigate and validate our recommendations and we ended up doing the same thing for taxonomy and content types but we wanted to validate because testing your content organization is really important it's really important to do it before you build your website so we used a technique called tree testing now just to give a bit of background for those who may not know what tree testing is so the way a website is organized you can think of it as the homepage as being like the trunk of your tree with each major navigational category being like a branch that you can follow and the articles and elements information are like the leaves on the branches that people are eventually eating it to so in tree testing we're trying to see how people are able to navigate that structure to get to the content they're after so once you have a draft outline how you think you're going to organize your content it's a great way to see your menu categories and where you put things makes sense to your representative and visitors and then you can see which branches people choose when you get from the test like find this piece of content about it X so we did this actually with AFB these were conducted in a moderated format so we didn't just do these unmoderated because there's a lot of richness that you can get from speaking to people and hearing them think their way through your information architecture and treejack is a great tool it's a bike company called optimal workshop they also have a card sorting tool called optimal sorting and it gives us great reports on things like how many guesses it took before the user found what they were looking for, what their success rates were and where the majority of people were looking for a particular item so we were able to make some tweaks to our labeling information now we think we've got our content all kind of organized and figured out but we still had something really important to work out so AFB had this new strategic direction but they still needed to figure out what to say and how to say it so we were like okay let's do some workshops so we did positioning statement workshop with them and this is an example of a framework that you can use so using this model you can kind of get a broad outline of who the organization is what makes them special and why anybody would care so for AFB like this for Americans who are blind or losing sight who lack equal access to education employment and other social institutions AFB conducts and promotes research into policies and practices that influence institutional decision makers to increase opportunities for their success unlike other organizations for the blind AFB has a long record of creating trusted objective knowledge that leads to positive policy change now this is not something that would ever be displayed publicly this is not on the website that's not the point this is to give the stakeholders and the team a ground on a framework upon which to build their messaging strategy to give the next exercise okay so what do you need to say to who for this we conducted a messaging workshop so in this exercise we're looking at helping the communications team figure out how to articulate the cost to action for the specific target audiences that are able to reach these activities provided the foundation to the websites on new content strategy in terms of what they were saying and how they were saying then we got into design so we got the messaging we got the content organized what is it going to look like so as I mentioned earlier we like to conduct these collaborative sketching workshops whenever we can it's a great way to get diverse ideas and different perspectives on what a page might look like or how it might be how the elements might come together but we had to of course adapt the processes for this project because not everyone on the team was cited so whereas most of our sketching workshop looks like this some of the members produced their sketches using a text editor and that was really eye-opening to us because essentially at the end of the day what's most important is the information on the page and how it's organized so that worked really well and we're able to collaborate with our applying and publishing users as well we ended up conducting two sketching workshops with the A&B involving our stakeholders and they did another one without us to do some interior design because they really liked the process and it empowered them to kind of go off and work out some of the problems that we just didn't have and in front of those sketching workshops we were able to get into wiring and then we just started from scratch we now had a pool of really great ideas that have been discussed and deliberated and we had identified what works for these ideas what's not going to work because of all of the different concepts together in two wireframes so these are the home page wireframes for desktop and mobile synthesizing the best takeaways from the sketching workshops and this was able to inform the layout first in a few pages these wireframes were then used to build a lot of applicable prototypes in a tool called Envision obviously that wasn't for everyone because again it was a very visual based tool and we had a lot of extended people we still wanted to make sure we were surfacing any potential issues with the label in the organization and then we wanted to of course, as I mentioned earlier in this session make it something that looked beautiful so this was the challenge we had some pretty intense constraints we were looking for triple looking 2.13 AAA color contrast ratios and also work with their complete lack of branding all they had was a logo even the logo they weren't 100% happy with so we had to tweak a few things but this is a style that we produced so you can see across the top there's the color palette which we did get to the AAA contrast using the right combinations in the right places and this is a bit of a mosaic that can be built into a style so once we had a general direction for all the bits and pieces we still needed to mock it up and see what it would look like as a full page this is what the home page is going to look like of course this is half on one side and half on the other but you can get the idea from top to bottom how all those elements from the previous slide come together and this modular layer gave us the ability to easily highlight the new priorities for AFB so that was something that was really important because they were fully targeted on education employment and aging as being like three pillars for their new program the other element that we were considering as I mentioned earlier had to be very mobile friendly so every element here had been considered for its ability to flow through into the small screen so that was our deliverable for this project we were hired to build designing build a prototype and a style guide that their dev team could then use to theme the Drupal CMS a wide prototype well first of all you want to put your front and center so this gets real content into the mix and it forced our stakeholders to figure out what the words were going to be because now they were going to see it in the browser and really be able to evaluate in its own medium it was also an opportunity to talk about code so we're having conversations about standards and in this project code was the documentation that we were delivering so we were looking at ways to provide consistency across the ecosystem of components and pages and testing of course was super important and this allowed us to test in the browser and now, unlike those clickable wire frames we have a real testable site that can be used with any browser or assistive technology and of course it's responsive as well so we can test it in different devices and finally using our own framework Calistatic which is a little bit like pattern around a bit different uses KSS for the style guide the template files were shared with the CMS so the code we were delivering was going to be literally used by the theme liner Drupal to render the pages any changes we would make to the style guide would be reflected in the front of the website you ready to see it? yeah let's quickly oops over here we have I think I have it open there's that I'm going to try to disconnect it I'm going to try to disconnect it I'm going to just pull out this whole joke I'm trying to pull out this bunch of wire the URL is AFB.netlify an AT L-I-F-Y oh it's my course does anybody know the concordia access code? the concordia address the AC all else WAC all else can I read what Drupal all of really? okay okay sorry about that alright get this out of my face okay so this is okay so here's the style guide what we got over here is a bunch of different pages so there is a prototype homepage so it looks and feels like a real website got some shortcuts to some of the other pages of the prototype it really works you can shrink and increase the font sizes as I was mentioning earlier we've got hover effects we've got buttons etc and most importantly you can find the edge of the screen shrink it down let's see it's responsive and if you go to AFB.org you'll see it looks virtually hidden oh wait there's more let's go do some new ones so from here we have the whole style guide we've got here let's go to some of our containers on the side let's go to the top and this is also responsible for the nice elements here our native in-code so there's a blog entry title and as we scroll down you can see we've actually got access to the market code so this is the documentation that the dev team was able to then use to attach the reference in their in-tempo files and as I mentioned earlier if we wanted to make any style changes we could make those style changes to the style guide over here and it would instantly impact the live website as well and we've got some other elements so levers a bunch of different things and again the other important factor was all of this had to be accessible too so not only were we producing a website that was going to be accessible in terms of this code but the documentation also had to be accessible so that the dev team could use it and what was really wonderful about the project was after we delivered this style guide and the pieces we didn't just wait until the end they were actively getting iterative builds as we were adding components and working things out they were able to start working on the CMS actually months in advance getting all the pieces ready because we were getting very close in terms of the architecture the different components and as we were finding the front end code they were then able to basically just pick it up add it to the game here and their CMS was ready to go by the time we were delivering the front end code and that's pretty much it for the prototype as I mentioned it looks just like the real site and if you go there today you'll see it is essentially what I just showed a little bit about user testing because this was something that was also really important to not only during the information architecture phases of the project but also the final rendering of code and the end those prototypes so for this we worked with the AFB consulting team they handled this part so they do a lot of their usability testing using people who are blind or use assistive technology to access the web and they often do this remotely there are some good reasons for this by doing remote testing people are in their own element using their own tools and they're much more comfortable when they're reviewing the site so it actually makes for a more natural and efficient way to do user testing because that allowed them to get a realistic sense of how this website would turn out and as I mentioned because we had prototyped all the HTML we used these prototyped pages for all of this testing and that saved us a lot of things and a lot of revisionists later on so I strongly urge you to build in time for this ability of testing your own project and especially accessibility accessible user testing which is becoming a more important issue many organizations and agencies are familiar with doing user testing but not too many do accessibility and that's something we're starting to see a little bit more of and more of a demand for so this project is a great opportunity for us to do but it really reinforced the importance of doing it for all projects because regardless of who your site is for what your organization mission might be your users may have various abilities or levels of vision and it's important that your content is accessible to them as well so we did learn a few other things along the way and some reflections you know agreeing on tools is important and those discussions were not developed we did have a lot of chats at the beginning to figure out what was going to work for everyone but even as we were going along we had to improvise along the way and figure out ok we normally do this what are we going to do for this project we did forget to test the inverted colors and it wasn't so much the inverted colors that were an issue I've got a little screenshot here that was done after the fact when we inverted the colors on the page it just made all the photos that we thought were so beautiful and tasteful look really hideous and apparently that turned off some of the stakeholders who are used to viewing websites with inverted colors but we did have a more significant issue with a little known add-on to the JAWS screen reader called zoom test has a tool called invert brightness so this image that I'm showing shows the difference between the normal color and we were testing different levels of blues and blacks on yellow then what it looks like when you invert brightness versus inverting color if you invert the color we still had the high contrast ratio but by inverting brightness it's really interesting because the screens are made up of red green and blue so not all colors invert the way you think they would so as you can see down the middle column by inverting the brightness white on yellow is not very accessible the contrast just went plummeted so we had to rethink some of that and we're probably going to have to tweak some of the yellows for the new design and then of course as I mentioned the diagrams were proven to be a little bit less accessible so in those cases we just defaulted to text and I've got a little video here I don't know if you're trying this was by our stakeholder as Chris has probably told you AFB has been undergoing major changes over the last 18 months or so we went through a year long strategic planning process driven by stakeholder interviews and a comparative analysis of how AFB could create a more equitable world for people who are blind or visually impaired we came away with a clear answer that AFB should shift from helping blind people and their families understand and navigate a complicated system of services to a bolder effort to change the system itself so our challenge was how to convey concepts like systems change in a way that made sense to regular people and inspired them to take action and of course we wanted to continue to showcase best practices for fully accessible inclusive website design Kalamuna was the perfect partner for our website overhaul because they also brought a curious analytical and user driven approach to their projects of course we also loved that they had a very strong background in accessible web design and Drupal which we had chosen as our new platform but what was really most important was that they were committed to the same research driven and user focused design approach that AFB has always advocated and followed ourselves I hope you'll explore AFB.org and let us know what you think of our results thank you let us look and ask the presentation any questions yes yes the prototype so I can read that for you AFB netlify.com netlify netlif.com slash file I've never had an opportunity myself to get this in depth it's great to have these kind of opportunities to work with clients I guess where they push the boundaries of what you need to do you have obviously a very detailed process there I don't know in our environment if you would ever have the opportunity to be able to follow such an in-depth process but could you maybe pull up one or two kind of checkpoints I guess that have a base level you would recommend including that you did with this project in terms of making sure your prototypes met the needs and requirements so the question was were there any shortlisted activities to make sure on a project that you do conduct to ensure that your final results are successful well I would say foundationally always start with stakeholder abuse that's been by and large the most impactful high-valued activity that we can conduct for all of our projects that's really important to understand what all the different organizational needs are before we even get started other activities that we really believe are important and find a lot of volume in our the content mapping exercise whenever far might you do it it's a really great way to visualize and collaboratively move the bits and pieces around similar to card sorting but a little bit more organic and it allows you to draw connections between the different bits and content that might live in one section but still need to be serviced in other parts of the site it's also helpful if you've got systems that you're trying to connect the sketching workshops are really tremendous at not only generating a lot of great ideas in a short amount of time they're also fantastic at getting consensus because what happens when you have a bunch of stakeholders in a room all vested in coming up with a solution together and talking through different ideas everyone gets on the same page very quickly and you're all basically figuring it out together and that makes it a lot easier because you're not just coming back to a group with a bunch of concepts involved and thought through and then having a bunch of people tearing them apart and telling you why you've got things wrong the user testing always a new test and any opportunity low fidelity user testing is great because if you do that early on then you're not going to be needing to make as many as you can so if you can get your wireframes even if they're low fidelity even if they're not you don't have everything figured out get them in front of people quickly because then you're quickly validating and servicing potential problems it's a lot easier to fix something when it's loose than when it's all been structured and people get attached to it so I guess that would be the balance well thank you all for attending I hope you have a wonderful conference and if you do have any thoughts or questions love to chat later we'll be right down for a break if you want to connect with us we're always looking for great talent so find us on any of these platforms or website all of this stuff that I showed you as far as the prototype is open source so our framework is on GitHub we'd love for you to use it try it out and contribute back if you have ways to improve thanks