Frame 5.png

Google Library

BACKGROUND

This is a design exercise for Google User Experience Design internship 2021. I choose to design for the following prompt, “Your school wants to provide dedicated spaces for students to help them focus on their academic studies. Design an experience for students, professors, and members of the school community to reserve work desks/spaces in the library. Consider the experience of checking availability, reserving the space, and reporting any issues.”

I decided to design an AR-supported app to make the college library reservations more accessible, streamlined, and transparent.

TIMELINE

40 hours, Spring 2021

ROLE

UX & Visual Designer

PROJECT TYPE

Design Exercise (Individual Project)

OUTCOME

🙌 Google UX Design Intern '2021

TRY IT OUT!

demo-gif.gif

EMPATHIZE

Understanding the prompt

Google Design Exercise.png

What's the current solution?

Screen Shot 2021-09-24 at 23.46.11.png
current-flow-gif.gif
Screen Shot 2021-09-24 at 23.46.11.png
Screen Shot 2021-09-24 at 23.46.47.png
Screen Shot 2021-09-24 at 23.46.47.png
Screen Shot 2021-09-24 at 23.47.25.png
Screen Shot 2021-09-24 at 23.47.25.png

Widely-used but poorly-designed website

Screen Shot 2021-09-25 at 00.00.07.png

Unintuitive scheduling format

Screen Shot 2021-09-25 at 00.00.31.png

Little information/guidance

Screen Shot 2021-09-25 at 00.00.49.png

What do current users think?

  • Interviewed 8 random Duke students I met at the library.

  • They come to the library based on various frequencies, but all of them reserved before coming.

  • Limitation: demographic (I reached out to professors but most of them are working from home)

Screen Shot 2021-09-25 at 00.14.01.png

“Many people don’t cancel their reservations if they’re not going”

“Sometimes my reserved seat is taken without notice

“In busy hours, I sometimes have to walk through every floor to find an empty seat”

“It’s hard to make reservations on my phone”

“The website is poorly designed, I spent so long just to make a 2-hour reservation”

“It takes me so long to find my spot, so sometimes I just sit in a random free seat”

DEFINE

User journey

Journey.png

My takeaways

  • The current reservation system is hard to use -- takes too long, difficult to use on phone, unintuitive design

  • There is no sign-in or sign-out feature, and the reservation platform does reflect actual seatings

  • Seats are hard to navigate to since little information is provided, and wayfinding becomes an issue

Mission Statement & Goals

🎯

​Making college library reservations more accessible, streamlined, and transparent

  • Design a phone app with an easy-to-use interface & a great mental model

  • Incorporate sign-in and sign-out to reflect true seating status

  • Provide support to wayfinding & enhance the app for accessible needs

(incorporate the 3 prompt experiences: checking availability, reserving the space, and reporting any issues)

IDEATE

How to achieve the goals?  Brainstorming

Easy-to-use interface

Sign-in and sign-out

Navigation needs

Screen Shot 2021-09-25 at 00.53.00.png

Defining my solution

Screen Shot 2021-09-25 at 00.59.28.png

Pretotyping / Tesing

I visited the school library to pretotype/test the AR pathing idea. I tried to act out the experience of having AR pathing to help direct the way to library seatings. I enjoyed the experience and thought it would actually be super helpful to navigate to the seat without prior knowledge of its location. AR path idea approved.

stairs-gif.gif
arrive-gif.gif
seat-gif.gif

Sketching out ideas

Screen Shot 2021-09-25 at 01.09.37.png
Screen Shot 2021-09-25 at 01.10.13.png
Med-fi.png

Verifying with data

Screen Shot 2021-09-25 at 01.30.21 1.png

DESIGN & PROTOTYPE

Creating a design system

I wanted to create a design system that 1) fits in the Google brand image​ and 2) creates a great mental model.

Colors

Colors.png
Colors.png

Fonts

Fonts.png

Components

Frame 24.png

Onboarding  Secure & simple

I created a one-step school SSO login process to verify user’s identity, set up corresponding library reservations, and sync up with the school’s backend data.

Screen Shot 2021-09-25 at 11.26.45.png
Screen Shot 2021-09-25 at 11.27.01.png
Logo page.png
School selection.png
Duke sso.png

Trade-offs

  • Google account: good that users can use one account for multiple products & sync up information. However, since Google Library is campus-based, not being able to verify the user’s identity is a straight no.

  • Sign up with school email: good so that users don’t have to log in every time they use the app. However, this approach is less secure and the school (as a huge stakeholder) wouldn’t like the idea.

  • SSO: even though it could be annoying having to sign in every time, existing technologies such as face recognition make the process so much easier. It could also link to the student account when saving information/preferences. The approach passes both logistical & stakeholder challenges so I settled with it.

Screen Shot 2021-09-24 at 23.46.11.png

Dashboard  Easy actions & great information hierarchy

The dashboard can be in 3 different status: no reservation view, incoming reservation view, and ongoing reservation view. Users would be able to swipe to make new reservations and see their existing ones in a card format.

main.png
swipe-gif.gif
main.png
Ongoing Dashboard.png

​Making reservations  1-step reservation

  • Only 3 top availabilities shown to users -- less decision making. Clear information display.

  • Based on the current date -- foster quick reservation experiences & real-time updates.
  • Innovative & flexible time scheduling -- inspired by clocks & smart thermostats.
Perkins.png
Perkins.png
time-gif.gif

AR path  Supporting wayfinding

AR Pathing will start when the users click “GO!” on the reservation card. General paths (quickest paths) to the seat will be displayed in red with an arrow on the ground. AR Path can be used both indoor and outdoor, with indoor supporting floor changes.

Screen Shot 2021-09-25 at 12.22.51.png

Sign in & sign out  Supporting real-time updates

Sign in and sign out are also supported by AR. There will be a QR code at each seat, and a sign in/out button will pop up when scanning the code. Users need to long press the AR buttons to complete sign in/out.

Path 4.png
Sign out.png

Logo design  Fitting in the Google ecosystem

Screen Shot 2021-09-25 at 12.33.24.png

Full Prototype  Try it out!

demo-gif.gif

LEARNINGS & REFLECTIONS

Accessibility in design & designing for accessibility

When starting this exercise, I told myself that I want to utilize accessibility in design to make the app usable for all. I read through the material design guidelines and tried to practice them in my designs. The use of AR was also my step towards designing for accessibility -- a real practice of the Curb-Cut Effect. It was so worth it and I learned so much! 

Screen Shot 2021-09-25 at 16.21.08.png

Jumping out of my comfort zone & challenging myself

I still can’t believe that I decided to work on AR & Android design without minimal experience. It pushed me to learn and challenge myself as a designer. I really appreciated the opportunity  :)

Practice makes perfect

Looking back to my first project, I can see how much I’ve grown -- storytelling, testing, iterating … It was all practice. I know that I still have a long way to go, and I’ll always keep this in mind.

MORE PROJECTS

Personalized wellbeing reminder app designed for Working From Home. | Passion group project

shadow.png
shadow.png
iPhone X Flying 2.png
iPhone X Flying 1.png

RemindMe

Google AR Internship

Researched, designed, and prototyped AR experiences for immersive wearable products.

google ar.png

Redesigning the Robinhood app for better information architecture & user-friendliness.

| KP fellowship design exercise

Robinhood Redesign

promo 2.png
promo 1.png
shadow.png
shadow.png