Table of Contents
Episode Summary
In this episode our host Bret Alarcon is joined by Bryan Gillian and Chris O'Connell to discuss updates to the WebTrac User Interface. The group touches on new changes, new patron workflows, and what you can expect for the future.
Recording
Transcript
Bret Alarcon 0:08
Hello and welcome to this week's edition of RecTrac. I am your host Bret Alarcon. So today we have some information on a brand new WebTrac UI we are calling Next Gen WebTrac. We have Bryan Gillilan, and Chris O'Connell with us today, they're going to be discussing what Next Gen WebTrac has to offer for you and your patrons. So if you have any questions, please ask them in the q&a section, you'll see the little Button down at the bottom. If we aren't able to get to your question, we'll be really releasing a q&a document with all the answers to your questions. So be on the lookout for that. Cullen and Zack are also going to be lending a hand with some of the questions. And yes, Zach is back. So you can say hi to him in the chat. He's still getting into the swing of things. So we're gonna go easy on him for now. But anyway, with that, how you doing today, Brian and Chris.
Bryan Gillilan 0:57
Doing great.
Chris O'Connell 0:59
Doing great as well.
Bret Alarcon 1:01
Alright, so what do you got to show us today?
Bryan Gillilan 1:04
All right, we are gonna show you guys a little bit about WebTrac. And the work our development teams have been doing over the past few months on kind of modernizing the WebTrac user interface, making it a little a little more modern look and feel for customers, but also improving some of the functionality at the same time to make a much better user experience for the customer on WebTrac. One things we want to kind of talk about as we discuss this topic is this is kind of an ongoing topic for us. Putting a lot of time and effort into our E commerce solution is something we're kind of dedicated to moving forward and making sure that your patrons have the best experience they can so they can enjoy all the things your community has to offer, and not get hung up in the kind of registration process or browsing your site. So with that in mind, this is definitely a work in Progress. Phase one, or kind of the initial kind of rollout of this will be kind of the big splash, if you will, but expect to see some continued improvements to workflows over the months as we continue to put a bunch of time and effort into this initiative on the product side. Let Chris talk maybe a little bit about some of the research we did with a good handful of our customers to kind of start the ball rolling on this initiative as I kind of get a Screen pulled up here for you guys to look at.
Chris O'Connell 2:32
Yeah, absolutely. So some of you, I probably spoke with myself and Lisa, a few months ago. And this is research that we've been doing probably over the past, probably close to six to eight months. Now speaking with a lot of you probably 35 to 40 different parks and rec departments. As we were trying to figure out how to best modernize our interface moving forward, we identified a lot of the major pain points for a lot of your customers, and really tried to bring those to the forefront of this first iteration of the Next Gen WebTrac. And so with that, we actually also really realized that there is a lot of you that were updating their interfaces, and we really wanted to make it easier for you to keep up to date and modern with your UIs.
Bryan Gillilan 3:27
Alright, so with that said, the first thing we're going to talk about a little bit today is kind of the new style sheet capabilities that are now going to be built into RecTrac. Moving forward, and we'll talk a little bit about the research that went on went into these. But essentially, as a customer moving forward, let's say you have a major branding change to your to your recreation brand, or your city website changes in the past, that would have meant call to VSI a purchase order to have some custom development work done to kind of change your WebTrac site to match your new city website. Um, so there's a bit of a pain point there for you guys where there's a lot of organization timing that had to go into making that change over so one of the things we've done as a part of this initiative is put some of that control actually back in your hands and let you kind of manage your branding of your WebTrac site yourself through RecTrac. So what I'm going to show you real quick here is an example of a new WebTrac page. Again, this is a just kind of a basic example of a page and what it could look like. The idea here being that the branding that you're seeing with the logo, the styles, the colors that are used for the buttons, the colors that are being used for kind of any clickable text, links within the application, the footer, your kind of social media links, all of those pieces of information are all actually controlled by you And then the application and done in a really simple way. So when kind of take this as an example, if I jump into WebTrac, here, you will have the ability through Profile assignments through your WebTrac parameters Profile, to control what those branding kind of elements are for your particular instance.
So in this case, I've got a specific web parameter record here we can look at. And this is a really simple process to kind of change that branding, we have a new Next Gen settings group on your WebTrac parameters Profile. And this group lets you control the primary color, secondary color, header, footer color, and the logo you wish to use for your WebTrac instance, along with any social media links. So the system behind the scenes will take care of making all the buttons the correct primary color, secondary color, making sure all your text links are your primary color handles the header or footer piece, the only thing you would ever have to do manually as part of this process is just make sure whatever this logo file is that you're referencing here, makes its way to your web server. And we hope to have some more coming on that in the future to streamline that process as well. But really, that's the only manual step you would ever have to do moving forward to kind of update that branding piece is just make sure that file gets to your web server.
So for instance, this particular example we've got here, you know, I've got my primary color is is my kind of brand blue here, if I wanted to change that this is a really simple process of just kind of selecting my new primary color, whatever that might be, and making that quick change. And that change will be immediately reflected on my WebTrac page when I reload. So you can see now my primary change from that blue to a purple. And you're able to kind of maintain that throughout. So that's all Ctrl at the web parameter level, obviously, there's the big question of how do I turn on this next genuine will I be forced to turn it on. And the answer to that is no, you won't be forced to move to this when we release it. This is actually controlled at the interface parameter level in RecTrac. So in RecTrac, you will have an interface parameter management. And for each individual interface, you will have the option to say enable the modern UI or not on this interface. And that will determine again, whether or not you're seeing the new web UI or your classic old web UI that you currently have today. So this is going to be an opt in feature initially that customers will be able to opt into similar to the Next Gen UI and RecTrac. And again, just like with the next genuine RecTrac, we will keep the classic UI around for a duration of time, until customers can kind of get migrated over to the Next Gen UI. So the classics not going anywhere immediately. And this is going to be an opt in kind of thing. Because this is done in an interface parameter level, and all of the settings are controlled in your web parameters. It does mean you have the freedom to kind of set up your Next Gen UI while leaving your classic UI Online and be able to see your Next Gen UI in a production environment, but just not publish that link externally to anyone. So it does allow for some flexibility there in terms of setup and configuration, when you're ready to kind of or when you think you're ready to kind of make that switch over you can kind of vet everything out and make sure everything looks exactly the way you want it and the Next Gen before making the leap.
So obviously, this is a little bit of a change from kind of past styles in WebTrac, where we were trying to kind of mimic your city website with your header and your footer and kind of create that more tailored embedded experience. So I'm gonna let Chris talk a little bit about some of the research they did and why we opted to move away from trying to tightly in or integrate so tightly to what your city website looks like, if Chris wants to go ahead and yeah, absolutely that.
Chris O'Connell 9:26
So one of the major pain points that we've heard from a lot of customers and patrons is that there is a lot of confusion when navigating back and forth between the municipal page and WebTrac. A lot of that we actually realized was because we mimic them so much and the navigation was so close, or sometimes the headers were identical in terms of where they linked. So sometimes clicking the home Button, rather than bringing you to your home of WebTrac would bring you to the home of the municipal page. Now, having a cohesive look is really important to match your brand However, it can sometimes cause confusion as to where your customers are, how they're navigating this specific Web page that they're on. And so what we actually wanted to do was allow you to show your branding on the new WebTrac, but not 100% mimic the website to allow customers to know that they're on your booking platform, as opposed to a continuation of your municipal page, because the interactions and tasks that you're going to undertake are going to be quite different.
Bryan Gillilan 10:30
To illustrate a little example of that, we've got kind of a WebTrac site mimicked up to match our Vermont systems look here. So we've got to Vermont systems are our main website, you know, standard kind of menu layout, structure. And then we've got a Vermont systems registration page. And so this is WebTrac. So it's very much geared, you know, same branding, same kind of color scheme, same structure, but it's not a one to one match, a customer's going to know when they land here that they're on the registration portal. Now, they're not kind of on the main page.
Bret Alarcon 11:06
So we actually have a couple questions coming in. First one is, when is this available.
Bryan Gillilan 11:13
So we are targeting a mid to late September release for this. So development efforts being completed kind of sometime early September, and actually having a public release made available sometime mid to late September of this year. So we are putting kind of the final touches and polish on it now, for the initial release. And then again, we'll be continually updating and, and iterating on that as we go.
Bret Alarcon 11:44
And the next question is, so we're seeing an example of what this splash page looks like. Are there different options for the splash page? Or is this
Bryan Gillilan 11:55
the IPs. So right out of the gates, there won't be a bunch of new splash page options available as part of this modernization project. All of our premium splash pages have been kind of vetted to ensure that they kind of maintain a cohesive look and feel with the new styling of the new WebTrac options. One of the future initiatives that we're looking into is kind of bringing some of that splash page management into the application. So as we iterate on the E commerce solution, that's one of the things we're we're aware as kind of a bit of a pain point seasonally or even more frequently than seasonally is, is the management of those splash pages and having to have someone with HTML knowledge or JavaScript knowledge or, or making sure you're not breaking anything when you go in there to make updates. So that's something we're certainly considering as a future roadmap item as part of our kind of broader WebTrac initiative to to bring some of that management of slash pages back into the application itself.
Chris O'Connell 12:56
And Bryan, real quick, I believe Steven specific question was regarding the splash page, you're showing currently as to whether this was one of our existing options, if so, which number was it?
Bryan Gillilan 13:06
Oh, I couldn't tell you which number it is, offhand. But it is one of our current options. And so the difference you would see, one of the things everybody could probably notice here, right out of the gates is that the content area for WebTrac is now using more of your Screen real estate. So in the past with our style sheets, with our custom style sheets, we coded our style sheets to use the same content area that your municipal page uses. So that's no longer the case with the new styling, we're allowing for more horizontal real estate to be used across the board throughout the application, which allows us to display more information in a clear way to patrons. So you may see with some of the splash pages, this one is a good example. In the in the classic UI, the splash splash page would only allow for four columns of data due to the horizontal real estate with most of our customers style sheets. So with this expanded real estate, it's allowing for more space. So there is certainly a possibility that as you migrate to the Next Gen UI, there may be some tweaks you want to make to your splash page to align a little bit better with the real estate that you now have available horizontally on the page. And to jump on to the
Chris O'Connell 14:21
real estate topic. We actually did a lot of research and looking at through Google Analytics and other analytics that we receive on behalf of well with your help of what your patrons are using. The resolutions that we chose within the next generation of WebTrac actually support 96% of the screens that visit your website. So there's no need to worry about not having enough or having too large of a horizontal room for real estate.
Bret Alarcon 14:52
We got a bunch of questions coming in. I'm not sure if you have a lot of time.
Bryan Gillilan 14:56
Well, let's let's hold some of those questions. Let's talk about a few more of the higher level pieces here. And then we can circle back to questions, if that's all right.
Bret Alarcon 15:06
Sure.
Bryan Gillilan 15:07
So one of the things that we did as part of the modernization project was to also split out the kind of login account information on WebTrac Screen. For those that are familiar with classic WebTrac, you'd have a login or a household number that took up some vertical Screen real estate all the time on every page, we've kind of shifted that information into the header. So you'll see as I land on, on the WebTrac Screen here, I've got my kind of standard WebTrac menu, but then I've also got my account sign in register in the top right. One of the reasons we opted to do this was it's a little more of a familiar place to find that information for customers on an E commerce site. And you'll see if I sign in
all of my kind of signing information is then retained here in that top right. So rather than taking up additional Screen real estate below the header, it's all kind of there in the banner of the page. And the other thing you'll notice is that we've taken the my account. So all the kinds of pieces of information on WebTrac that a customer might interact with, in their my account have been moved out of the standard WebTrac Menus structure into their own My Account menu structure found under the My Account. So none of these things went anywhere. None of these things change. So if you have them on your current WebTrac, you'll still have them if you've got them hidden in your current WebTrac. They'll still be hidden. But they've been shifted and moved into this MyAccount menu separate from your standard WebTrac menu. And so you'll actually see that in WebTrac Screen management within the RecTrac application you'll now have for the Next Gen WebTrac You'll have two separate screens, one for your primary menu and one for your My Account menu to be able to control those independently. But the update will take care of kind of moving your current custom Screen design for your one WebTrac menu into those two new screens and maintaining your your visibility in your ordering of your menu items. So that's all handled for you. And then the other thing is cart. And the cart has also moved here as well to a more familiar kind of place within the application for customers to interact with their shopping cart. You'll also notice under My Account, we've kind of integrated the wish list and the Logout functions into that my account drop down. So there's kind of a single place for a logged in patron to go to access anything to do with their account or with their session. And then for kind of a another, just touching a little deeper into RecTrac. Again, maybe I'll jump into a different interface parameter here so you guys can bear with me a second. All right. So one of the things that we've also added, as part of this modernization project is to move all of your search filters, which previously took up a lot of vertical Screen real estate to the point where for many customers sites, we've noticed that the results don't even display without kind of scrolling down the page. So we wanted to make sure we could keep all of your search filters that you currently have. But do it in a way that allows for your results and the things that patrons are actually looking for to be more easily found and identified. So as part of this project, we move to the Next Gen UI.
Any search filters that you were currently using will be migrated to a sidebar, we're still kind of refining some of the interactions within the sidebar in terms of collapsing and expanding those filters. But this is the general premise of how that's gonna look, your search filters will be retained in your sidebar, they will scroll with the page, we have introduced an empty state to the search pages across the board. So if a customer hasn't searched yet, or has searched and no results were found, they will get some empty state kind of area in the results area to let them know why they have no results. And these messages will be customizable via language code. So if you want to put your own kind of custom phrasing in here for what that empty state is, you'll be able to do that as well. Expanding on that a little bit further. With the search results themselves, we've changed our detailed display of the search results to be a little more straightforward to customers to not have to scroll through so many individual section line items. sure many of you know a lot of your programs may have 1012 1420 activity sections and if that particular program isn't something that customers interested in how having to scroll through all 20 sections can get time consuming and can cause for a lot of paging. So one of things we've done with our detailed display option is to move to more of a card format. So the basic activity description and brochure content will exist. And then these are all expandable links once you've found the program or the area of program that you're looking for, so customers will be able to do this, we've also made the activities and the descriptions themselves links to a new activity details page, which allows for kind of a more natural ecommerce experience customers are familiar with on other e commerce sites such as Amazon, and so on where they browse and select the item they might want to register for and get kind of the full activity details or full details of that particular item. One of the things that making this change has allowed us to do is also allowed us to retain those search settings in the browser. So we are now able to customer can get to this search page, find an item they want to register for and add it to their cart. Or if they don't find the item they want, they can just simply use the browser back Button, and it'll take them back to the exact same search they previously had with the exact same filters they previously had to be able to jump back to the prior page, which they currently weren't able to do on WebTrac. Talked a lot, Brett, how are we doing on questions?
Bret Alarcon 21:28
We got a ton. Are you ready for some?
Bryan Gillilan 21:30
I'm ready. Hit me up. All right.
Bret Alarcon 21:32
So we have a bit of a theme on some of the questions, basically, will it transfer over any current customizations we currently have in WebTrac? So it sounds like you did say what some things will transfer?
Bryan Gillilan 21:46
Yes, so So any Screen data that you have in WebTrac. Currently, that's customized. So labels on filters, things of that nature, additional fields will all transfer over. So that information is good. Web layouts may be another area that people are specifically interested in when it comes to customization. So web layouts is something we're currently in the process of looking at, obviously, with the kind of the the large change in what we're actually accomplishing here. And the changes to the design itself may mean that some WebTrac layouts will no longer function as they did previously. So we're looking into how we want to handle that from a development perspective, whether we're going to continue to enable those web layouts and require some tweaking to them. Once customers move to the Next Gen UI, or whether we're going to kind of remove that functionality in general, I don't anticipate us removing the functionality. But there is certainly a good likelihood that some web layouts will need to be tweaked or modified once once customers look to move to the Next Gen UI for sure.
Bret Alarcon 23:01
Another question, what does this look like on a mobile device is optimized?
Bryan Gillilan 23:05
That is a very good question. I was waiting for that question. All right, so let me jump in here and shift it to a mobile view so folks can see. So we are still in the process of finishing up some of the responsive design elements of the UI. So that's kind of where we're currently at with the project. But you can see the design by default is signed, this is no different than a normal splash page would be. But for example, your search pages, if we jump in here and go to activity search, one of the things we're currently working on is a method of kind of collapsing your filters by default in the mobile view. So you're not seeing that here. It's currently in the development process, but kind of collapsing all of your filters under a filter header. So you can access and close those filters on demand in a mobile environment to allow for, again, seeing your search results, because that's really what customers are after. So from that mobile perspective, though, your results will all be optimized in more of a card style format. So no real difference here in terms of what the customer sees up front. And when they drill in, they'll again get some expanded details in terms of activity description, any additional information they can access, and again, be able to kind of jump into that one specific program and add it to their cart, see all the meeting details, etc. So everything is being web optimized as we speak. And we've also put a huge emphasis on W CAG. And trying to make sure that the WebTrac site across the board is accessible.
Chris O'Connell 24:58
It's a two things on In this one, what you're seeing on mobile currently is not the final version, we still have quite a bit of work to do on the mobile design, especially on the search pages. And when it comes to Wk, we actually be doing a lot of that automatically as you select your custom colors. So for things such as primary colors for buttons, will actually automatically audit the color balance and choose whether it's a white or black text automatically, in order to maintain that aspect or that color ratio.
Bryan Gillilan 25:31
So a good example here, I don't know if folks up but when I had my, my other stylesheet, we were looking at all of my header text was black by default. On my other style sheet due to the header color I chose in footer color I chose with this particular style, I chose a darker Header and Footer color. So the system is automatically accounting for that and, and flipping the text to make sure we maintain W CAG. All right,
Bret Alarcon 25:58
another question which you did touch on earlier, but how has the shopping experience changed at the same are there the same number of clicks to process the transaction.
Bryan Gillilan 26:08
So force for all modules with the exception of the activity module, there haven't been any significant changes yet to the shopping experience, I'm going to emphasize that yet. Because that is kind of the UI redesign initially, it was kind of setting the stage for what we hope is a a equally as impactful, if not more impactful ability to really tailor the workflows to make the the entire shopping experience better. And we'll be looking at those on a kind of workflow by workflow basis. And that's kind of what's coming next for this development team is just kind of looking at those individual workflows and streamlining them to the best of our ability to make to tailor that kind of patron experience a little better. The one change you will see is with the activity, searching, so you will have the ability now. And there's a couple of cool features with this. So obviously, the drill into your to your program and seeing this full activity details page. One of the things you'll have the ability to do from the activity details page now is actually add directly to your cart from here or in this case, I've got my WebTrac set up to allow for multiple selections prior to adding to the cart. So I could do that as well. So we have also updated kind of the styling on that multi select list. So rather than the kind of green banner you're used to seeing here, you'll have a more styled kind of multi select list here for adding items to your cart. So again, want to emphasize because a lot of customers have been surprised by this in the past, I'm currently set up to allow for multiple selections at a time with WebTrac for activities, I can set up my system to not allow for that so that it enforces me to kind of go directly to the cart. So that's a simple WebTrac parameter setting for which modules you want to allow multi select in. So if I jump in here and remove activity from that list, and I refresh my WebTrac page here, you'll see my Add to selection list just changed to add to cart here. So this will allow me to directly add this item to the car as opposed to going through the selection list process. So again, it's a little more streamlined, especially for those customers who do high volume registrations, where you find patrons may be trying to shop for three or four children at a time. Well, adding an item to that selection list doesn't actually hold their spot currently. So because we don't know who they're adding it for that point. So kind of doing the direct Add to Cart scenario in a lot of those cases is a better method for the patron because the item gets into the cart faster to where it's actually kind of holding that spot and, and they know they've got it. But the actual process itself, not really much has changed with the actual shopping experience outside of that currently. But again, that's something we're looking to get to so you'll see here example of a Screen that we're we're still refining the the finalized version of with the shopping cart. So you'll see some styles added to these buttons and the final version, and potentially some additional content as well. But that's really the terms of the actual shopping experience, Click to register. That's where we're at currently, one of the things we're hoping to do with the keyword search and what our research has shown so far is fine or not the keyword search but the sidebar search is to kind of put the filters in a more accessible place where customers are able to see those filters while they browse the results. So they're able to more seamlessly kind of adjust what they're seeing without having to continually vertically scroll up and down. From filters through results,
Bret Alarcon 30:02
have any new filters been added such as date range for things like no school days or summer vacations.
Bryan Gillilan 30:12
We have not added any new filters at this point, we do have quite a bit of feedback that we've gotten through the research process on the types of filters that customers feel we could add that would greatly benefit them, you know, things like show me programs starting in the next two weeks, or starting in the next four weeks or things of that nature. Those are certainly things that are on our radar as we look to kind of improve the individual workflows for the different modules, taking into account what additional search filters could aid in that process. So if you have ideas, we're, we're open ears on our end.
Chris O'Connell 30:50
Real quick, I actually wanted to circle back to another question. And Brian, that was actually regarding the shopping experience changing. And one thing I wanted to jump back to was the activity details page that we were talking about before. So one thing that is actually a change to the shopping experience is previously when linking somebody to a specific activity or section, you would oftentimes link them to the search results page, which may have returned results of multiple sections and not a specific one. With this new activity details page, you can actually just copy that URL and send users directly to this activity details page. So you can guarantee that they're getting the exact section time and classes they were looking for. And which is easy to share on things like social media,
Bryan Gillilan 31:39
especially big for things like events that are a single program that some that many, many, many people are going to be registering for being able to provide that direct link externally on your municipal site or on your social media, to get a customer directly to the cart page without having to go through the search processes is certainly a big deal.
Chris O'Connell 31:59
Great. So when asking you about the you know, is there any have we reduced the number of clicks? This will be a significant number of clicks for users if you do that directly link to this activity landing page.
Bret Alarcon 32:12
All right, I think we have time for one more question. I apologize. We have tons of questions. Good questions coming in. But the last question we have our image is going to live on the activity, are we still going to have to play the image to every single section that exists under the activity?
Bryan Gillilan 32:29
Another good question. So at this point, it's still at the section level with this initial kind of UI update on the front end, we haven't really changed the management of that on the back end. But we have identified a lot of pain points to that end, on the back end that kind of correspond with this that we'll be looking to tackle as we kind of iterate on this process things like images at the activity level as well as brochure comments at the activity level as opposed to the section level and beyond.
Bret Alarcon 33:01
Awesome. Well, I think we got to wrap things up are starting to go a little over time. But I want to thank you, Brian. And thank you, Chris, for demonstrating the Next Gen WebTrac UI. And I apologize, we weren't able to get to any of the well, a lot of the questions, but look out for that q&a. Doc, we'll put that on the RecTrac portal. So we should have that up shortly. And, again, just thank you, everybody for attending. It's great. RecTrac Thank you very much.
Bryan Gillilan 33:34
Thanks, everybody.
Chris O'Connell 33:35
Thank you.
Bret Alarcon 33:37
Take care.
Supporting Documents
RecChat-NextGenWebTracEdition-FAQs.pdf