I joined Penn Labs in Fall 2017 as a UI/UX designer. Penn Labs works 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 design work at Penn Labs includes UI/UX design and branding, as showcased in the projects below.
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:
|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.|
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.
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.
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.