Landing page Inspiration
There are four necessary components to build an effective landing page - great navigation, great value proposition, great Call to Action, and captivating graphics. Here are some of the pages we looked at.

OpenTable
This site has a great navigation. There are many links, but overall, it doesn't seem overwhelming. It has a simple and linear call to action. Users are shown their current location and can immediately change if it is incorrect.

Thumbtack
The clean and minimal approach really appealed to me. Users get an idea of what the site offers and can immediately interact with it. The tabs feature is a great way to compartmentalize different sections of the site.
Call to Action (Search functionality)
Probably the most important element of our site. Students should instinctively click on the search bar and type their search query. We sketched out a couple of ideas, combined the most promising features, and created mock-ups for the same.
Idea 1
Successes
Failures
No search suggestions, no prompts to help students find their books.
Search button may not be obvious.
.jpg)
Idea 2
Successes
Failures
The two tab system may be redundant, increases complexity of the experience.
Admin link doesn't need to be here. Maybe in the footer?
.jpg)
Wireframe
I removed the tabs and added popular searches to our wireframe. The search button was ultimately removed, we trust our users are familiar with this style.
This wire frame was created in FIgma, which allows easy reviews and changes remotely.

Hi-Fi Mockup
Creating the illustration was tricky, we wanted to convey a sense of community and sharing of books.
After 2-3 illustrations, we decided that this represents the closest in value.

Search Results
Each college had multiple collection centers, and each center its own catalog of books. Most of the books were free, but few of them were paid. Students were given various options for the same book and could even buy from other students. Representing all this information on a single card proved to be extremely challenging for me.
Sketch
Each source of a particular book got its own card, i.e. if there were 3 sources, there would be 3 cards on the list.
We differentiate 'FREE' and 'PAID' books using color coding, and simple text for people with color blindness.
Each card had the title, author, availability, and the price of the book.
.jpg)
Wireframe
We were really confident about our approach and decided to proceed with wireframing. As stated previously, 2 sources implies 2 cards.
Pickup instructions and Student seller contact information were secondary and thus, provided in a drop-down card.


Hi-Fi Mockup 2
After a long brainstorming session, we decided on a few changes to the layout. ISBNs and Prices are better highlighted. More room is given books with long titles.
Instructions drop-down button follows a standard convention. The cards have been pushed together. Overall, each card occupies less screen space than before, with the same amount of information.

" They expect us to then have all of these books immediately, I don’t think that’s necessarily fair, especially for low-income students. "