Chromebook Grab and Go
Content/ Service Design, Content Management
Improving the digital and physical equipment-borrowing experience
Duration
3 weeks
Role
Designer
Content Writer
Programmer
Manager
Tools
Figma
Illustrator
Procreate
CMS
Visual Studio
​
Background
Chromebook Grab and Go is a service provided by the UCSD Library Computing and Technology department. It encourages library goers to borrow a chromebook laptop from the station whenever they need it. Since the Digital Experience team decided to rebrand the raccoon mascot for the library, we received requests to update the Chromebook Grab and Go webpage, poster, and digital signage with new graphic and content strategy while solving existing accessibility issues.
Goals
Changing all Grab & Go text mentions to Grab and Go in the CMS
Coordinate copy on webpage, poster, and digital signage
Solving accessibility issues:
-
Text within a single large image and duplicate text by separating text from image
-
Blurry image by vectorizing the raccoons first and exporting them as png format
​
Illustrations
As the original illustrator for the rebranded UCSD Library mascot - the raccoon, I refined the illustrations using Adobe illustrator and Figma to illustrate the three steps Chromebook Grab, Use, and Return service.
Step 1:
Grab a Chromebook
Step 2:
Sign in with your UC San Diego email account.
Step 1:
When you're done, log out, put the Chromebook back on the shelf, and plug it in
To ensure that the captions match with the three raccoon illustrations, follow the UCSD Library content guidelines, and portrays the service in an easy-to-understand manner, I worked with the Engagement and Copy teams to refine the textual content and get approval for the illustrations.
CMS Management
After prototyping a few versions of the webpage and running internal and stakeholder voting, I decided to keep the final version clean with bolded “Steps” copy and one-sentence caption.
Before making changes to the CMS, I coded using a three-column bootstrap framework to make the raccoon images align to corresponding captions.
Having confirmed the visual layout with the team and the stakeholder, I transferred the codes into the CMS system, configured the paths to images, and published the final version.
code with bootstrapping framework
CMS System Live Editing
The updated website achieved the established goals with coordinated content and improved accessibility. It increased the Accessibility score on SiteImprove and mitigated previous issues with accessing information about this service.
On-site Implementation
After finalizing the website design, I moderated the design to meet the requirements for the physical stand-alone poster at the Chromebook Grab and Go Station. The new poster and the revamped website directed more users to utilize the service without further consulting the service desk. Chromebook return rate also increased multi-fold.
Because of the success of the updated service, I also received request to create a digital signage, which is the TV screen display at the public area and study rooms. This prompted more users to utilize the physical service or browse the website for more information.