Penn Labs

I joined Penn Labs in Fall 2017 as a web designer. We work closely with the University of Pennsylvania to bring university resources to the student body. To do this, we use the most accessible channels for reaching students: web and mobile apps.

Inclusivity and usability are core tenants of Penn Labs products. Apart from talking to our users to understand their needs, we also strive to maintain a presence as observers of day to day life on campus. This is our way of making our products work for more people.

My work at Penn Labs includes UI design and branding, as encapsulated by the three projects below. I'm also excited to be taking on a more technical role in the organization, as I start learning how to implement my design on the frontend.

As a designer, the interview process included a technical stage. The prompt: create a high fidelity mockup of a web platform for students to buy and sell textbooks. Penn Labs had already launched a product in this space, but it had little traction. The question was, why?

In my redesign, I focused on three key features to differentiate the textbook sales platform:

Problem Solution
Talking is hard. The old textbook buy/sell platform gave the seller's contact info to prospective buyers and made them do all the work. An auction model simplifies communication. Sellers set a starting price. Buyers make offers until the seller accepts. The seller only needs to communicate with the final buyer to coordinate the exchange.
When students look for their course textbooks, the course title is at the front of their minds - not the title of the book. Users can search by book title or course name. When a seller lists a book, they must also include its corresponding course name.
Students usually take 4-6 classes a semester, so they shop for more than one textbook at a time. Users can search for multiple courses at a time. They can also save sets of search queries, tracking the latest listings in the set.


Design

With these key functionalities in mind, I set about creating a mockup for the platform, which I called Bookshelf. I used Illustrator to design the mockup screens. As a quick exercise in front-end dev, I also created and submitted an HTML/CSS mockup of the home page. Below are select screens from Bookshelf. The full mockup can be viewed here.

Listings are displayed as cards that can be clicked for more information. They are subtly color-coded by department.

No nonsense: the home page is the search page. When you first arrive, it simply displays the most recent listings. Start searching right away by typing in book titles or course names on the left hand side.

The individual listing's page shows additional details and allows you to make offers. Current standing offers are displayed. The list price is an optional benchmark set by the seller.

Users can list books for sale and manage the listings from the user dashboard. They can also view and accept offers made by buyers. After an offer is accepted, the buyer and seller contact information is exchanged.



Takeaways

Going into this assignment, I was a little rusty on the UI/UX design front. But I realized I could anchor my design on a few key pain points and address them very purposefully.

The HTML/CSS mockup also served as a handy feedback loop in my design process. Knowing the components that were available as 'building blocks' helped me standardize my design. In a full design-to-shipment process, the HTML/CSS mockup would facilitate design implementation. As an added bonus, this project helped me gain familiarity with Bootstrap components.