20
Can I Get That Eng101 in Fuschia? Patrick Collette Web Developer SUNY Binghamton @LordOfTheWeb

Can I Get That ENG101 in Fuschia?

Embed Size (px)

DESCRIPTION

Students go online to shop for hoodies, iPhones, and sneakers. Why should college classes be any different? Students are using our class schedules to compare and contrast classes to find the class that best fits their needs. They’re shopping. Like many colleges, the GCC class schedule was a multi-page search form with confusing labels and no easy way to compare results. We listened to student input and developed an “Amazon-style” interface to allow students to quickly and easily change their criteria and revise their searches to find the classes they’re shopping for.

Citation preview

Page 1: Can I Get That ENG101 in Fuschia?

Can I Get That Eng101 in Fuschia?

Patrick Collette

Web Developer

SUNY Binghamton

@LordOfTheWeb

Page 2: Can I Get That ENG101 in Fuschia?

Hallowed Halls of Academia

Page 3: Can I Get That ENG101 in Fuschia?

What are they actually looking for?

after 3:00 PM

Tuesdays and Thursdays

at the Lima Campus

with Dr. Venkman

Page 4: Can I Get That ENG101 in Fuschia?

They’re SHOPPING!

Page 5: Can I Get That ENG101 in Fuschia?

So, How’s the User Interface?

Page 6: Can I Get That ENG101 in Fuschia?
Page 7: Can I Get That ENG101 in Fuschia?
Page 8: Can I Get That ENG101 in Fuschia?
Page 9: Can I Get That ENG101 in Fuschia?
Page 10: Can I Get That ENG101 in Fuschia?

So, How’s The User Interface?

• Multi-part form • Have to go back and reload to

compare and contrast• Confusing terminology• Cluttered results• Results can’t be sorted or filtered

Page 11: Can I Get That ENG101 in Fuschia?

Let’s Roll Our Own

By NorskPower (Own work) via Wikimedia Commons

Page 12: Can I Get That ENG101 in Fuschia?

Feedback

• Talked with students to determine what they wanted

• As we developed, showed them prototypes to get feedback

• After development, continued to survey and refine the interface

Page 13: Can I Get That ENG101 in Fuschia?

• We know they’re shopping… so let’s look to e-commerce

What IS a Good Interface?

Page 14: Can I Get That ENG101 in Fuschia?
Page 16: Can I Get That ENG101 in Fuschia?

Get the Data

• GCC is a Banner school• Setup cron job to pull data out of

Banner and export it to a SQL Server db

• This let’s us manipulate the data how we want

• Worked closely with Banner programmers to re-create proper logic

Page 17: Can I Get That ENG101 in Fuschia?

Build the Interface

• Technical components– Site is based on Twitter Bootstrap

framework– Used jQuery to setup interface, modal

windows, make AJAX calls, show contextual help

– Datatables.js to allow filterable table– jQuery Mobile linearizes table

Page 18: Can I Get That ENG101 in Fuschia?

Benefits

• Single-page app, no reloading• Pre-defined, custom searches• Better contextual clues• Single app allows us to present full

course info without leaving results page

• Scannable, filterable results allows easy comparison of classes

Page 19: Can I Get That ENG101 in Fuschia?

What’s Next?

• Keep up with Banner changes• Integration with SSB to allow for

direct registration• Wish List of Classes• Cleaner mobile interface

Page 20: Can I Get That ENG101 in Fuschia?

Can I Get That Eng101 in Fuschia?

Patrick Collette

Web Developer

SUNY Binghamton

@LordOfTheWeb