Visualize Your Student Application in VisualForce
•Download as PPTX, PDF•
1 like•503 views
Presentation from Salesforce.org Higher Ed Summit 2017 by: Brian Bissell, Drexel University Online Stealth applicants: they lurk in every corner of your site, silently and judiciously deciding if they will apply to your school based solely on the information readily available to them. You?ll never hear from them; they provide no emails or calls, and usually won?t even fill out a form ? until they suddenly submit an application. Join this session to learn how Drexel University Online saw this growing trend and decided it was time to modernize its student application by making it fully responsive and simplifying the overall application process. With just one dedicated, fledgling Salesforce developer and 9 months, hear how they were able to completely transform the application?s look and feel while improving the students? application experience.
Recommended
More Related Content
More from Salesforce.org
More from Salesforce.org (20)
Recently uploaded
Recently uploaded (20)
Visualize Your Student Application in VisualForce
- 1. Visualize Your Student Application in Visualforce Drexel University Online Senior Web Developer brb72@drexel.edu Brian Bissell
- 2. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 1998
- 3. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 2001
- 4. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 2002
- 5. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 2002
- 9. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 2012 Mobile Site
- 11. Drexel University Online Online.Drexel.Edu (formerly: www.drexel.com) 2014 Responsive Design
- 12. Quick survey: raise your hand If you’re a developer or have Visualforce experience Developer Marketer Someone save me.
- 13. Disclaimer: I am a developer This is my natural habitat. This is the opposite.
- 14. WARNING: There will be code. But it won’t look nearly this cool.
- 15. The trail ahead… 1. Background 2. The Application 3. Bootstrap 4. Document Uploads 5. Code Tips 6. Form Prefill 7. Prioritized Call List 8. Results 9. Future Go back to bed Coffee
- 17. The Old Application About as responsive as me on a Saturday Sunday morning.
- 22. The trend was clear v
- 23. Because who wants to play it safe with screenshots… Live demo time! bit.ly/2nWJBRY Try it your on your device: Good luck, you fool. (Case-sensitive)
- 24. Check out my application package! Welcome back, applicants! You’re looking smarter already.
- 25. But things don’t always go so smoothly… If the demo didn’t go well, I’ll just pretend this was meant to be ironic.
- 26. Keep it consistent First level text is set at 20 point Salesforce Sans and does not have a bullet • Second line bullets are 18 point Salesforce Sans • Third level text is set at 16 point Salesforce Sans • Limit the number of bullets on a slide • Fourth level text How to Create a Paragraph Heading Use the same Basic Layout and remove second line bullet from sentence Spacing of Paragraphs The spacing between paragraphs is automatically set We know you love Salesforce, but your users don’t need to know that.
- 27. !=
- 28. Demystify debugging First level text is set at 20 point Salesforce Sans and does not have a bullet • Second line bullets are 18 point Salesforce Sans • Third level text is set at 16 point Salesforce Sans • Limit the number of bullets on a slide • Fourth level text How to Create a Paragraph Heading Use the same Basic Layout and remove second line bullet from sentence Spacing of Paragraphs The spacing between paragraphs is automatically set Life is already mysterious enough.
- 29. B is for Bootstrap I realize this may be particularly confusing in Austin…
- 30. The secret is out… But that’s a good thing.
- 31. “How many grids deep are we now?” We’ll need a synchronized kick to wake up this deep…
- 32. Text, images, charts, tables can be put in this placeholder.
- 33. Don’t reinvent the wheel Bootstrap has a garage full of them.
- 34. Basically, the opposite of your car keys Just tell it when to hide class=“hidden-md hidden-lg” class=“hidden-xs hidden-sm”
- 35. One page, multiple layouts Customize the layout for each type of device
- 36. Then, upload what’s required or finish it later. Submit without any documents
- 37. The only constant is change. Documenting the documents
- 38. Want to be a Doctor of Nursing Practice? Sure you do. This is what you’ll need you to upload:
- 39. Document heaven Here’s what our team sees
- 40. Our Journey Continues… 1. Background 2. The Application 3. Bootstrap 4. Document Uploads 5. Code Tips 6. Form Prefill 7. Prioritized Call List 8. Results 9. Future “Slide” backwards Press onward
- 41. No reason not to; unless you’re paid per line of code. Components = reusability
- 42. View state is why you can’t view your page. I don’t know what that means, but it doesn’t look good.
- 44. Don’t worry. The view state limit is not the maximum number of times you’re allowed to see Texas. View state?
- 45. 67.82 KB
- 46. Visualforce functions can get messy quickly Yes, these are the simple ones. Trust me.
- 47. Use Boolean syntax Or create a method in your controller if you need more complex logic
- 48. Clean, readable, and maintainable Every time you nest an IF function, a developer somewhere instantly gets a gray hair.
- 49. Partnership Prefill Lorem ipsum dolor sit amet, consectetur Cras egestas mauris ut faucibus cursus Pellentesque et risus ac turpis maximus https://online.drexel.edu/beneplace-austin
- 50. Branded direct apply links Marketing will love you. https://online.drexel.edu/AustinApplyNow https://duoapp.secure.force.com/?partner=1687 https://online.drexel.edu/AustinIndustriesMBA https://duoapp.secure.force.com/?program=01&partner=1687
- 51. Who are you going to call? Don’t say GhostBusters… v v v
- 52. Setting priorities Configurable on the fly for on-demand reprioritization
- 53. Pull and go No need to jump around between queues and records anymore
- 54. The end is in sight… 1. Background 2. The Application 3. Bootstrap 4. Document Uploads 5. Code Tips 6. Form Prefill 7. Prioritized Call List 8. Results 9. Future Success Safety
- 55. Developers lie, numbers don’t (usually). Less applicant confusion = more submitted applications *Data snapshot from April 20th, 2017
- 56. Speed and stealth Applicants who submit in 10 minutes or less *Data snapshot from April 20th, 2017
- 57. Stealth and speed Applicants who submit in 10 minutes or less 2013 -2016 2017 vv *Data snapshot from April 20th, 2017 2017
- 58. Steadily growing organically; we haven’t even advertised our new application yet. More mobile users
- 59. Carpe diem All users who registered and submitted in 24 hours or less 2016 113 minutes Decrease in average time to submit 55% 2017 50 minutes Average time to submit Average time to submit
- 60. So, what’s next?
- 61. A developer’s job is never done Ever.
- 62. Log errors directly to an applicants record Imagine emailing applicants to let them know the error was fixed – before they even call.
- 63. We made it! 1. Background 2. The Application 3. Bootstrap 4. Document Uploads 5. Code Tips 6. Form Prefill 7. Prioritized Call List 8. Results 9. Future
- 64. Occupational hazards at Drexel The work environment can be challenging. Questions?
Editor's Notes
- Good morning and thanks for being here. You get credit for just showing up on time to your Saturday morning sessions A big thanks to Salesforce for offering me the chance to present here today
- I’m from Drexel University Online In the early 1990s, Drexel University envisioned a future for technology enabled distance education In 1996, Drexel University launched its first fully online degree program, the Master of Science in Information Systems Drexel University’s initial course delivery platform was Lotus Notes In 1999, web-based learning management systems like WebCT and Blackboard started entering the market
- In 2001, Drexel eLearning (DeL) was founded as a subsidiary of the University. Our goal was to identify marketable programs, recruit exclusively for distance education, and assist in the application process Note: these pictures are from the way back machine and have some broken images, but of course in real life images never break on our site…
- In 2001, Drexel eLearning (DeL) was founded as a subsidiary of the University. Our goal was to identify marketable programs, recruit exclusively for distance education, and assist in the application process Note: these pictures are from the way back machine and have some broken images, but of course in real life images never break on our site…
- Drexel eLearning was reformed in 2015 as Drexel University Online, LLC, responsible for full student lifecycle and course design We got on Salesforce back in 2003 as a CRM Higher education clients on Salesforce in 2003 were practically non-existent
- Drexel eLearning was reformed in 2015 as Drexel University Online, LLC, responsible for full student lifecycle and course design We got on Salesforce back in 2003 as a CRM Having a separate audience than the traditional on-campus student, a separate online student application was needed
- We got on Salesforce back in 2003 as a CRM Having a separate audience than the traditional on-campus student, a separate online student application was needed Back then, there wasn’t the Force.com platform or SF Sites, so we built our initial online application using Oracle and ASP pages in 2004
- Having a separate audience than the traditional on-campus student, a separate online student application was needed Back then, there wasn’t the Force.com platform or SF Sites, so we built our initial online application using Oracle and ASP pages in 2004 Applications were web-serviced over hourly into Salesforce. This process worked, but had all types of issues and often required custom development patches. We were very eager to get off this system.
- Back then, there wasn’t the Force.com platform or SF Sites, so we built our initial online application using Oracle and ASP pages in 2004 Applications were web-serviced over hourly into Salesforce. This process worked, but had all types of issues and often required custom development patches. We were very eager to get off this system. Hired a consultant to initially build our application on SF in 2013
- Back then, there wasn’t the Force.com platform or SF Sites, so we built our initial online application using Oracle and ASP pages in 2004 Applications were web-serviced over hourly into Salesforce. This process worked, but had all types of issues and often required custom development patches. We were very eager to get off this system. Hired a consultant to initially build our application on SF in 2013
- Back then, there wasn’t the Force.com platform or SF Sites, so we built our initial online application using Oracle and ASP pages in 2004 Applications were web-serviced over hourly into Salesforce. This process worked, but had all types of issues and often required custom development patches. We were very eager to get off this system. Hired a consultant to initially build our application on SF in 2013 This is the present day look and feel of our website
- Quick survey by hand how many people are developers or are familiar with Visualforce.
- Disclaimer: I’m a developer; my natural habitat is a cubicle with lines of code in front of me. So, I’m pretty far outside of my element right now… but hey, I guess this is what you get when you randomly submit speaking proposals on Friday afternoons.
- Warning: There will be code in this presentation. It has been known to burn eyes and bore minds. I promise to make it as quick and as painless as possible.
- Here’s a quick overview of our journey We’ll periodically check back in here to see where we’re at. Uh-oh, I see you guys eyeing that back to bed option… I better move forward quickly
- When we first did our application in Salesforce in 2013, we didn’t even try to do a responsive design We just wanted to get off our old, slow, error-prone system.
- Eliminate webservice lag, real-time actionable data in Salesforce Tighter integration with Custom Objects and validation Was a SF site with Visualforce page and controllers Custom backend to manage the questions for each program
- Eliminate webservice lag, real-time actionable data in Salesforce Tighter integration with Custom Objects and validation Was a SF site with Visualforce page and controllers Custom backend to manage the questions for each program
- Eliminate webservice lag, real-time actionable data in Salesforce Tighter integration with Custom Objects and validation Was a SF site with Visualforce page and controllers Custom backend to manage the questions for each program
- Eliminate webservice lag, real-time actionable data in Salesforce Tighter integration with Custom Objects and validation Was a SF site with Visualforce page and controllers Custom backend to manage the questions for each program
- Eliminate webservice lag, real-time actionable data in Salesforce Tighter integration with Custom Objects and validation Was a SF site with Visualforce page and controllers Custom backend to manage the questions for each program
- We redid our website to be fully responsive but our application wasn’t We wanted to provide one cohesive, fluid experience from website to application.
- Because I’ve never heard of a live demo going wrong… Bitly link if you want to test it yourself
- We survived!
- Anything as large and complex as an online application is bound to have the occasional error I highly recommend making a custom error page Otherwise your users see this: probably a departure from your brand and theme…
- And a quick side note for developers: Coming from a .Net background, one thing that drove me a little crazy while developing on Visualforce was the lack of a detailed error output screen… And I’m already a little crazy normally – so that put me at medium crazy. Not a good place for any developer.
- I made a controller and page that has a much more robust error output for use in your sandbox.
- Email me or come see me after the presentation if you’re interested in this code. But it’ll cost you a test class with 100% coverage…
- Bootstrap is a free, open-source, front-end framework for designing mobile first websites and applications. It has HTML/CSS-based templates with fonts, icons or glyphs, forms, buttons, navigation and almost every other typical interface components.
- It’s one of the most popular and widely used frameworks: it has over 100,000 stars and over 50,000 forks on GitHub. And if you’re wondering what stars and dinner utensils have to do with the code for a website, just trust me that it’s a good thing.
- It works on a 12-cell grid system. Just have a rough idea before diving in, do some planning Sidebar widgets are 3/12ths on desktop and 4/12ths in tablet view In mobile, by default everything is 12/12ths and spans the full screen width Tweak the ratios as needed when you develop
- Sorry – I promise, if I knew I’d be presenting this one day, I probably would have done a better job on the picture and the drawings in it... Don’t forget to consider mobile/tablet/desktop views for each page This pattern allows you to nest grids inside of other grids This allows everything to stay 100% responsive regardless of where it is placed on a page
- The Bootstrap classes reference should be glued to your hand avoid the temptation to write custom CSS until you really have to. There’s premade classes for validation, messages, form controls, hiding elements based on the device screen size, and much more. I learned this the hard way and realized I was making things way more complicated than they needed to be.
- The login button and the login form on our registration page are being toggled based on screen size solely with Bootstrap classes: (Click phone and resize screen to show CTA change)
- This is some of the real power of bootstrap, it’s so easy to craft each device’s view all within one page Spend less time with annoying, mundane device compatibility issues and more on new features
- Applicants would get to the document uploads and think “I’ll do it later” Now we let them submit their application without them, but inform them their application package isn’t complete until we get all their documents Delineate between people who have only just started an application and still needs to upload all their documents, versus someone who already finished the application and only needs to upload documents. Helped resolved viewstate issues – I’ll discuss later
- We built a tool that allows our internal users to easily map the documents required to the program and decide whether the document is allowed to be uploaded (as opposed to mailed in).
- All the required documents that were marked as “uploadable” on the previous slide are displayed on the post-submit page (resume, essay, license, etc.).
- For those that cannot be uploaded (transcripts, LORs, etc.), they are processed by our Applicant Services team in BANNER. Document codes are synched back from BANNER to Salesforce to keep track of complete application packages. Uploads can trigger automated emails and a higher placement in our calling queue. Our team can easily tell which documents they are still missing and assist them in going that last mile to complete their package.
- Moving right along, here comes the code…
- Repeated and hardcoded code in each page was broken out into components with their own styles and scripts. This was important for our contact and download application widget, allowing them to be used on multiple pages but maintained in one spot Fully responsive in and of themselves, so they can fit just about anywhere regardless of the layout. This speeds up future development and page creation greatly.
- Came in one fateful morning to the OSA crashing right after registration or login. The only thing that had changed was that we had added just one more question to our application This is the day we got a tough lesson in how to manage view state in SF. Coincidentally, this is also when I learned we were using the default SF error page that didn’t match our template… I’ll give you one guess what day of the week it was…
- You knew that was coming
- What is view state? It’s a silent chunk of data passed back and forth with every page which, as it sounds, maintains the state of the current view. If you’ve ever tried to buy something online and when the page reloaded you got validation errors, but all the fields on the form (name, number) still have the values you previously entered… you’re reaping the benefits of the view state.
- However, as you add more fields and controls to your page, and more variables in your controller, this monster silently grows. Use the View State tool SF provides to keep an eye on this number during development – leave yourself a buffer! We went from skirting that 135kb limit all the way down to less than half that.
- Visualforce functions are great because they are powerful and easy to learn But they can also turn into a bit of a monster… Trust me, it gets a whole lot worse than this.
- If possible, don’t even use the Visualforce functions, just use normal Boolean logic syntax Even if you’re not a developer, this is something you could easily learn if you’ve grasped Visualforce functions already Overall the code is easier to understand and doesn’t require spending a long time dissecting it
- Here’s an example from the little welcome message that slides down when someone creates an account or logs back in. You can see the Boolean syntax we’re for the conditional rendering of this panel. Line breaks are your friend. Visualforce functions when not nested too deep and are easily understandable with sensibly named variables and fields.
- We always had the ability to preselect a program on the registration screen, but we took that a step further and added that same ability for our Partnership look up. This let our users coming from our Partnership pages just click the yellow CTA on their page to arrive at the application with the account prefilled If they pick a program of interest on their partner page, they have their program and partnership account preselected.
- Marketing already created their own redirects, like for the branded URLs for the pages we create individually for each organization just shown. Now we can use branded links to drive people directly to the application. This comes in handy at onsite meetings, conferences, and on printed marketing materials. Not only can we prefill the partner info, but if a Partner wanted to push a certain program for their employees to consider, we can do that as well now (CLICK BOTTOM RIGHT LINK).
- With the new influx of application submits, we needed a way to better target our outreach to students. So, we built a custom Salesforce application that sorts and prioritizes our calling queues according to custom business logic, which is controlled by the manager of our outreach team
- On the left, is the screen where he can easily restructure his queues by reordering the existing priorities on the fly. On the right, you can see he can also edit the logic in each of the individual priority rules
- There is a view of the entire queue, however our outreach team is able to easily jump to the next lead with the Pull Next Lead button, making a simple and seamless flow between calls to leads. Just recently, we added phone number validation via 3rd party webservice that tells us whether a lead has a valid, active phone #, if it’s a landline or mobile, etc
- Almost there….
- Between mid December when we lauched and now, so about 4 months, we’ve seen a very clear jump in application submits, close to doubling the year prior in some months. More applications submitted with less support calls to our team; it’s much more self-service now. On track to shatter April’s record as well
- Out of all of our submitted applications, how many are submitted in 10 minutes or less of starting it? We’re only a little more than a third of the way through the year, but if the numbers hold we’ll have about triple the amount of 10 minutes or less submits. (CLICK) You can see on the right the distribution of the 10 minute or less submits 2017 clearly was a jump in every group, but most notably our 3, 4, 5 and 6 minute submits have nearly doubled or tripled.
- (LASER POINTER) A general shrinking on the left side of this pie chart, representing less people taking between 8 to 10 minutes to submit. On the right side, we can see everything from 3 to 7 minute submits have jumped up. 3, 4, and 5 minutes submission saw the most dramatic rise since there were so few students completing an application in that short of a time span. In just the past 4 months, 20 people did an entire application in just 3-minutes, which is the current record time. To compare, over the entire previous 4 years, there were only 12 applications submitted this quickly. Same for 4 minute submits, we only had 79 people every submit an application that fast in the preceding 4 years – with the new application, we’ve seen 96 people do a 4 minute app since deploying the new application 4 months ago.
- From Google Analytics, you can see the breakdown of our users’ devices. While most do prefer using a traditional computer, we are seeing increased growth in our mobile user population.
- For applicants who submitted their application within 24 hours of starting it, the old average was 113 minutes to submit. With the new application, that number is down to 50 minutes.
- Evil-Canevil style cliff jumps on a moped? Doubtful but that sounds awesome….
- Prefill login screen and questions inside the OSA from FB, Twitter, LinkedIn, Google, etc. Integrate Dropbox, Google drive, etc. to allow document uploads from common cloud sources GTM event tracking
- Persistent error logs – store errors in the Applicant’s record, so we can have full debug info on their issue and better support our students by detecting errors before they even report them. Even if you can’t fix it, you can still send an automatic email apologizing and letting them know you’re already looking into the problem.
- We immediately saw a staggering rise in application submits, nearly doubling the previous year. The new design is more intuitive and has less bugs, resulting in less support phone calls and shorter submission times. A huge part of this was moving the document uploads tab to be a post-submit task Ultimately, this all means a larger and better segmented pool of applicants for our team to cultivate from Salesforce overall is a great platform to work with, whether you’re a normal user or a developer, there are many tools and resources at your disposal. If you’re intrigued by the Visualforce functions, I’d encourage you to checkout Trailhead to learn more.