ITS Hardware Purchase Site
Northeastern University has partnerships with some big tech companies that allows them to offer discounts on hardware to students and faculty. In addition to personal use, faculty can also create purchase requests for equipment for the University.
The challenge
The existing path to each hardware provider was disjointed, as was the process for purchasing for the University.
The landing pages were seriously dated looking, giving a kind of low-rent feel to the experience.
I wanted to simplify the flow and I also wanted to try and give the page a kind of higher-end shopping vibe.
A simpler flow
The existing flow started from area in the University portal with individual links to landing pages for each company for a personal purchase. There were separate links for each company that only faculty could see for purchase requests on behalf of the University.
When a link was selected the user was asked to self-identify whether they were student or faculty.
The landing pages then subsequently directed the user to each company’s educational store, in some cases tailored for the University.
One obvious fix was to create a single site for all the hardware providers rather than a bunch of separate landing pages, reducing the number of links in the University portal down to a single link.
A second smoothing out of the flow was if the user was coming from the University portal (which is behind SSO), we presumably knew whether they were a student or faculty and could serve up the appropriate experience, such as combining personal purchase or University purchase as an option on the same page for faculty.
The site was publicly searchable, though, so if it was reached from somewhere not behind the SSO, we still needed an interstitial page for the person to identify themselves as student or faculty.
A high-end experience
Even discounted, the user is likely plunking down a couple thousand dollars for a piece of hardware. I wanted the site to feel a bit like a luxury shopping experience, but one where they were getting a good deal, to make the user feel confident in their purchase.
I did a couple of different versions of the site, with a variation of each for students vs. faculty.
Version 1
To switch between desktop and mobile, there is a little overlay button in the lower right.
This prototype is behaves a little oddly - if you navigate with the buttons across the top, you have to DRAG to go back up instead of just scrolling. At the time, XD didn’t have the ability to navigate to a point on the same artboard so to simulate the anchor link navigation I had to create separate artboards.
Version 2
I got a little float-in-animation crazy in this prototype.