Hardcover Live

Summary

In this conversation, Adam and Ste discuss their experiences with V-Real and the benefits it brings. They also talk about the recent issues with Silicon Valley Bank and its impact on startups. The conversation then shifts to improving book data and covers, including using Inventaire for book covers and merging duplicate books. They also discuss the design of the book page, including adding a gradient background, book description, series information, and book ratings. They explore the possibility of adding book additions and editions, and consider moving the tabs to the top for better navigation. The conversation focuses on improving the book page navigation and enhancing the social network aspect of the app. They discuss organizing tabs, adding a friends network, and enhancing the book info section. The conversation concludes with finalizing the design of the new book page.

Takeaways

V-Real is a fun and engaging platform that allows users to connect with friends and share their day-to-day experiences.
The recent issues with Silicon Valley Bank highlight the importance of financial stability for startups and the potential impact on their operations.
Improving book data and covers is an ongoing process that requires leveraging different sources and technologies.
Designing the book page involves considering various elements such as book description, series information, ratings, and editions, while ensuring a user-friendly and visually appealing layout. Improving navigation and usability is crucial for a better user experience.
Organizing tabs based on priority and usefulness can make it easier to switch between different sections.
Adding a friends network feature can enhance the social aspect of the app and provide a sense of community.
Showing friends' ratings and reviews can help users discover books and get recommendations from people they trust.

Chapters

00:00 Introduction and V-Real
01:02 The Benefits of V-Real
02:05 Silicon Valley Bank and Crypto
04:03 Book Data and Covers
05:45 Improving Book Covers
08:28 Using Inventaire for Book Covers
09:13 Merging Duplicate Books
10:12 Improving Book Pages
11:30 Preparing for Discussions
12:17 Designing the Book Page
20:31 Adding Gradient Background
25:45 Adding Book Description
27:26 Adding Series Information
29:24 Adding Book Ratings
33:07 Adding Book Additions
37:23 Adding Book Editions
43:37 Moving Tabs to the Top
44:13 Improving Navigation
45:53 Organizing Tabs
47:43 Adding Friends Network
51:15 Enhancing Book Info
54:40 Social Network Aspect
58:20 Showing Friends' Ratings
01:00:21 Finalizing the New Book Page

What is Hardcover Live?

Each week Adam & Ste focus on a specific feature, idea or prototype in Hardcover and iterate on it together or with guests.

adam (00:01.123)
Hey, hey, how's it going?

ste (00:05.983)
I've just been finnirield by Adam like 2 seconds ago.

adam (00:10.191)
Yeah, just as we were about to start at 1 p.m., like the minute it happened, V-Real came up and says, time to V-Real. And I think me and maybe like 10 real life friends are on it and it's been a lot of fun.

ste (00:25.994)
Wow, I mean that's a lot. I got it with a couple of friends but we haven't been like that committed but it's great to hear you know that's a big group. Fun friends, be realing each other.

adam (00:37.367)
Yeah. And it's pretty consistent. Like all of us are, have been surprisingly stable with it. So like, you know, people will miss a day, but overall I feel like I kind of see the insights of what a lot of people are up to on their day-to-day lives in a way that I really hadn't since maybe like the original Facebook days or something like that.

ste (01:02.956)
That's nice. So it's really like serving its purpose.

adam (01:06.451)
Yeah, it's been fun. And I think one of the really neat parts with it is that you see people doing their kind of, you see them building two things. Someone's researching something, working on a work project, and then weeks down the line, they ship it or they have some success with it. And I know when I see that, I feel like an extra sense of success for them. I like, you know.

ste (01:08.354)
That's good to hear.

adam (01:34.827)
support for them because I knew all the steps that it took them to get there in a way that you don't when you only see that finished product.

ste (01:42.634)
Yeah, that's freaking great. I mean, yeah, that's actually a good use case. I mean, for milestones and that kind of stuff. It's really neat. My friends didn't use it that way. Maybe that's why they weren't so committed.

adam (01:52.719)
the fifth of the fifth of the fifth of the fifth of the fifth of the fifth of the fifth of the fifth of the fifth of the fifth

adam (02:05.025)
Yeah, how's your last week been?

ste (02:08.614)
It's been really good, really good, really intense. I have been watching what's been going on all over the world and what's been happening in Silicon Valley. Did you see the latest thing with, I mean the near miss, I guess, the bullets like passing.

adam (02:27.359)
Yeah, you mean like Silicon Valley Bank going under? Yeah.

ste (02:30.294)
Yeah, yeah, that was interesting. I thought it would unfold like a really, really different way and yeah, really, would have been tough for the startup environment.

adam (02:44.243)
Yeah, I, I haven't got an email from, um, so the company I used to work for Pluralsight, they pay authors for content and their bank is Silicon Valley bank. So they sent out an email to all the authors that they pay royalties for saying like, Hey, we're, we're okay. This isn't impacting us. So it makes me wonder how many startups right now are having to have that conversation with all of their vendors, all of their, like, you know, people that they're working with.

And yeah, at least, at least last I heard US government stepping in and they are going to make whole any account holders, not investors, but account holders, which I think is a good step.

ste (03:28.159)
Yeah.

Yeah, exactly. Yeah, I agree. Yeah, I seen that. That's the outcome. So it was, I mean, kind of good. I saw who was it from my combinator going on NBC, was it? Saying that at least 250,000 people would be impacted if this would happen. So

ste (04:01.094)
been pretty bad I guess so

adam (04:03.403)
Yeah. And I think I saw that there were two other banks, at least as of yesterday, that also were insolvent. And they were both banks that were very highly connected to crypto in that you could move your money in and out of crypto from their banks very easily.

ste (04:23.214)
Yeah, I thought it seems like it's all quite volatile and up in the air it's really interesting and scary a bit, but it all seems like it's like one inch disaster, but then it gets avoided somehow. I guess, I mean in this case it was really good. So yeah, but my week has been wonderful. How about your

adam (04:38.059)
Yeah.

adam (04:45.712)
It's been, it's been pretty quiet. Just, uh, uh, last week I started like refocusing after, since now the iOS app is kind of in a good state and Eugene's kind of working on the Android app, I've kind of doubled down to focus on, um, book data recently. And that's been, it's been a really fun shift. Like.

I forgot how much I enjoy kind of the solving the problem of book data. Like it's, it's a very, like, it's like an organizational problem of data, like using API as in using Ruby and fun ways. So it's, it's, it's a fun task to work on.

ste (05:24.694)
That's nice to hear. Yeah, I've noticed that suddenly our books with covers definitely percentage went up significantly. I mean, what was it? I think it jumped from, what were you saying, from a 30 something to nearly 70 now, 70%.

adam (05:35.503)
Thanks for watching!

adam (05:45.663)
Yeah, yeah, it, uh, yeah, that's like the number of, yeah, we had 33% of books that were engaged with in some way on hardcover, whether that's someone adding it to a list, someone saving it for later, someone answering it in a prompt, 33% of those books had a cover. So, you know, 67% of them didn't have a cover. And that's what we've been trying to improve on, but not really spending effort on. So this week I...

put some effort into it and increased it from 33 to 70%. And yeah.

ste (06:19.394)
Wow, flipped it basically. That's good, that's a feat.

adam (06:24.059)
And thanks. And it was, like, I think there's going to be a lot of room to get it up from 70 to like 90. I think that's what I'm going to be working on this week. One of the, so some of the ways that it's doing it now is that pretty much before our only source of book covers was, were either Google Books or Open Library.

Open library, their API, we can hit it as much as we want responsibly. The Google Books API though, it's limited because we can only hit it so many times a day. I think we can only hit it like 2000 times a day. And if we want to hit it more than that, we can request access to it, but we need to do some work on our end to only cache Google's data for a specific duration.

ste (07:10.114)
Okay.

adam (07:22.535)
And so part of what I'm doing is getting those data retention policies in place so that we'll be able to raise our Google API limit, and then we'll be able to start hitting Google Books API 10,000 times a day, 100,000 times a day.

ste (07:36.494)
nice. So this is for like each book cover to get updated with a new one or for each book that doesn't have a cover to get one.

adam (07:46.771)
Yeah. And one of the kind of the next problems, like I think we've, I've kind of gotten it to where it is where it's like, we have, we have the covers for any book that we basically can get a book cover from, from either Google books, open library, or, uh, invent air.io, which is kind of the new one we added, which actually has like really pretty book covers. So it's a really cool site.

ste (08:10.134)
Okay, that's exciting on my end. I mean, low resolution for book covers was one of the things, yeah, that's, I mean, that could have been solved by manually uploading book covers, but if we got service doing that, yeah, it's better, nice.

adam (08:12.323)
Yeah.

adam (08:18.829)
Yeah.

adam (08:28.031)
Yeah, yeah, they're, I think their, their whole like data model policy is that they are they, like the same way open libraries kind of backed by users importing stuff into open library and editing there. And Goodreads is backed by like librarians on Goodreads doing it there. Inventaire is mostly backed by Wikipedia, and like an association between each of the books in their system and a Wikipedia entry.

And so the Wikipedia entry has a cover and they can get that cover.

ste (08:58.474)
Yeah. Okay, that's really interesting. Yeah, the book covers on Wikipedia are usually high res.

Nice, if we can get those covers, yeah. That'd be cool.

adam (09:13.428)
So, yeah, I think the next step is it's less focused on the book covers and more focused on merging duplicates because oftentimes we'll have two copies of a book, one that has ISBN and identifiable information that allows us to look up a cover and one that's a duplicate of that that doesn't have the ISBN so we can't look up a cover. But if we merge them, that would effectively raise our cover rate by just...

making those into one entry and then showing the book cover. So I think merging is gonna be what I'm spending, auto merging is what I'm spending my time on this week for covers.

ste (09:50.654)
Yeah, that's exciting as well. I noticed some books have like a really good cover and some that are duplicates don't have like any cover so yeah. Right now I think the only way to do it is flag them manually right, which I've been doing on a couple of ones but yeah, an automatic way to do that. Just put that on autopilot.

adam (10:12.77)
Exactly. And yeah.

ste (10:14.574)
Nice, great. Well, I've been making a bit of progress on the book data, on the book page, not the book data, but it's really tied into that. So maybe we can spend a bit of time brainstorming on that, maybe even building a bit what those book sections on the single

adam (10:21.774)
Hmm.

ste (10:44.514)
particularly in preparation for what I guess would be the next step for discussions because I think that's where I got a little bit, let's say, not blocked, but I was thinking about the whole complexity that that would add and how we would manage it. And I think it could be important to see how that ties in. So maybe we can talk a bit about it.

uncover things that would be going on both on the front end, on Reader's browsers and on our back end as well.

adam (11:27.623)
Yeah, that sounds like a good one for today.

ste (11:30.054)
Okay, then we can jump into Figma. Let me share my screen over here.

ste (11:40.999)
share the entire screen and here we go.

adam (11:47.267)
Okay, cool.

ste (11:47.454)
Okay, so I've been playing around with a couple of ways to show it. So this is close to how we show it today. And it's got a couple of new things over here. I haven't added anything in the tabs, but I was thinking we could talk through that. I started from the mobile page because that's what people are going to actually

apps, both on Android and on iOS. So I think making that work as easily as possible would be the primary objective, right?

adam (12:29.939)
Yeah, I think so.

ste (12:32.894)
And I was thinking right now for the backgrounds, we're using that cool gradient. I think my first like dilemma over here is, I mean, this looks really good, but is it taking up too much space? Because if we compare it to this one, this one has a bigger book cover and it works better. Let me get the match percentage in here as well.

ste (13:02.534)
It doesn't, I mean, shows the same type of information except owned, which I'm gonna put over here. See folks, this is how you design on the go. But, I don't know, what do you think looks better? The smaller cover or the bigger cover as like a comparison between these two?

adam (13:26.255)
Hmm. I'm trying to imagine like how small that cover is gonna look on a phone, like for the one on the left. And it seems like it is gonna be pretty small on a device when you're like looking at it.

ste (13:39.854)
Yeah, it is going to be pretty small. This is, I think, an iPhone SE. So if we, let's say, make it so that the section scrolls down a bit so you'd be seeing, you know, let's say we make the cover slightly bigger. And this is the cover. I was thinking how it would look like if we put it like this over here.

see a lot of disinformation so the readers and the owned button sort of let me simulate that really quickly. So you'd see it's kind of like this.

adam (14:30.115)
Mm-hmm.

Yeah. Hmm.

adam (14:39.567)
It's like, I do like how like, bright the colors are and how, yeah, how striking it is.

ste (14:51.255)
Yeah.

ste (14:59.234)
makes yes this is why i wanted to do this

adam (15:03.383)
Yeah. One, uh, one thing I'm wondering about is mind if I drag things around and just see how it looks. Just some ideas here.

ste (15:11.955)
Now, blow our heads, go right ahead.

Yeah.

adam (15:24.345)
I quit.

ste (15:24.455)
I basically have a bit of that color.

adam (15:28.231)
And we could even, yeah, I was wondering about like having it fade from that color to like this, this gray, but that might not look good for like all colors fading from something to gray, but it might actually, that actually looks kind of cool.

ste (15:44.834)
Yeah, it does. I mean, the only concern I have over here is how it interacts. I mean, that's why I didn't put it underneath the header over here, because the contrast might be bad for some users, some readers. I mean, if you have, like, let's say,

ste (16:15.014)
or how you see the lack of contrast on some screens, this might be a little bit tricky, but...

adam (16:22.62)
Yeah, yeah, I know what you mean.

ste (16:26.654)
We could basically have this, okay, so it doesn't work with bright colors. So we could have this as a tint or something like that. But yeah, I'd rather, I mean, if I'd keep, I wouldn't overlap things. I like this thing that, you know, it reminds me of letterboxed a bit.

ste (16:56.934)
With that gradient, see if we go on weatherboxed. I like that for each movie, they have this gradient that is around the cover image of a movie and that's a really cool effect. I guess we could go for something similar, but I don't know.

adam (17:09.06)
Mm.

adam (17:25.504)
Hmm

ste (17:26.695)
Yeah, that was my worry over here. Contrast is a bit tricky because if this color is variable, it can cause some trouble. So...

adam (17:42.291)
Yeah, I guess like if we did go that route, we would have to figure out some algorithmically generated colors for the other things in the header so that they, they are different.

ste (17:53.974)
Yeah, and even then, I'm not sure it would be like a good design pattern to change that depending on this color. I mean, yeah, you could set them to wait.

adam (18:04.987)
or

adam (18:08.664)
Or another, well, I'll let you finish that thought first and then I'll, I have an idea.

ste (18:11.494)
Yeah, go ahead. I was just playing with blending modes over here. So while do that, okay, not this one, obviously.

adam (18:18.899)
I was thinking like on the feed, we hide that header. So it doesn't show up until you like scroll up. And so like if you scrolled up, then it would like overlay it on top of everything in like with its gray background on top of it.

ste (18:41.515)
Okay, so come like this.

adam (18:43.647)
Yeah, so it would look kind of like that initially. And then if they scrolled down, then scrolled up a bit, then they would see like this up here, but with like a gray background behind it.

ste (19:00.635)
I'm actually wondering if we make this, I mean it's maybe overkill but it would be like a nice effect if we had this and as you scroll down so the header would disappear. Let me just move this.

ste (19:22.774)
I kept this because the gradient is looking really cool with that cover. So as you would scroll down, the header would basically disappear up, and this would take up this portion of the screen. And that's it.

adam (19:26.435)
That is.

ste (19:49.614)
kind of like something kind of like this.

ste (19:58.674)
and maybe, I'm not sure between, yeah, and from here it would just scroll down normally, but it would have that effect where it goes from this to this order, and yeah, with all the info over there as well, let's like make it final.

ste (20:29.556)
and gets maximized. Yeah, let me just save this.

adam (20:31.747)
Hmm, I see.

adam (20:42.529)
Does Siri ever like randomly pop up when you're not expecting it?

ste (20:46.274)
Every time I don't know how to close it ends. I don't know. It's just one of those things. Yes, something kind of like that. I'm wondering in terms of information,

adam (20:50.892)
Okay.

ste (21:06.914)
how would it look better? What I'm worried over here is that coming the cover next to the book title and the author name can for some books that have longer titles be tricky and we have some of those in our system. Maybe I can remove this for you.

adam (21:06.967)
Yeah.

adam (21:22.359)
Mm-hmm.

adam (21:27.582)
Yeah.

ste (21:34.034)
to walk you through. Yeah. So this is kind of like a tricky route. That's why I wanted the cover to sit on its own ideally, so that it's kind of like this, even if it's like larger.

adam (21:53.775)
Hmm. What if, what if we kind of, uh, are more selective in the side info? Like, what if we, what if we use something like this first one, but then put the title like up here, up here above it, then

ste (22:10.918)
on top.

adam (22:17.912)
Whoops.

ste (22:19.734)
Yeah, let me move this. This is everything that should go in that page. So look here folks, long list.

adam (22:37.179)
And you can even make the font even bigger, I think, for the title.

ste (22:43.195)
Yeah, go ahead.

adam (22:44.951)
but I don't think I have that font installed. New spirit.

ste (22:48.454)
Oh, I have to send it to you. I can make it larger. Wait, let's go for 10 before.

adam (22:54.449)
It's just neat that it shows up for me, even though I don't have the font, which is like magic of Figma.

ste (22:58.994)
Yeah, it's weird with typegifons because they don't like to download them, so I'll figure out a way to send it over. But yeah, for this kind of things, it's a bit tricky. Let's go like this. I'd also put the author name maybe up there. I don't know why, but it kind of looks weird in here.

adam (23:15.372)
and

adam (23:25.303)
And I was thinking like, what other info would make most sense up here? And I'm thinking it's like the facts about the book, like the page count, the year it came out, maybe. Um, popularity.

ste (23:40.905)
Hmm.

Yeah, let's say how many pages. The read era came out would basically be for one, the most popular edition, right? Or the actual like first published date.

adam (23:56.716)
Yeah.

adam (24:00.257)
Yeah, probably like first published it.

ste (24:02.335)
Okay.

ste (24:08.077)
Should we write this the month and the year? April 2015.

adam (24:16.919)
Yeah, that's really good. I mean, most people don't need the exact like 13th of April. Yeah.

ste (24:21.974)
day. Oh, I could put that.

ste (24:27.798)
should be right published in front.

or first published.

adam (24:34.451)
I think first publish is the most specific, yeah.

ste (24:39.256)
Yeah.

adam (24:43.199)
And then.

adam (24:48.191)
Yeah, trying to think like what else would be most useful here. Like, and for this button, I'm wondering if it should be the full button and not the mini button, since this is, this is kind of like the, the place to go to for information about this book. So it feels like the weight of the full size button.

ste (24:57.735)
Thank you.

ste (25:09.694)
Yeah, the mini button. Mm-hmm. Yeah, I mean the full size button works. But we should put it somewhere underneath because, whoop. Oh no, actually, yeah, because I changed currently reading to just reading. Would that make more sense? I was thinking because if we write its full length

adam (25:35.36)
I'm gonna go.

ste (25:39.654)
Yeah, see, we get into this ground drum. So yeah, okay, let's do it.

adam (25:41.83)
Yeah, I'd be up for just reading. Yeah.

adam (25:48.095)
And then, yeah, I like having it up there up top. Like it feels like, like without having to scroll, just being able to look at this page without scrolling down and being able to see like the most, this data about the book is pretty awesome so far.

ste (26:05.114)
Okay, that's good.

adam (26:07.575)
I think like the next like most important bit that is probably like a series position.

ste (26:16.654)
Bizzarong.

adam (26:18.051)
And that's always a tough one because books can be a part of multiple series, but we probably only care about like the most popular series that it's a part of.

ste (26:30.434)
I had this question, if we should put series in here as a tab or, and if we should just put it as a piece of text over here, let's say third in, what's the name of the series? Hunger Games, is it Hunger Games?

adam (26:55.54)
Yeah.

ste (27:01.463)
Let's see if we do that.

adam (27:04.554)
Another way we could do this.

adam (27:16.671)
I'm thinking like in terms of like the information hierarchy, I'd say the three most, four most important parts are the title, the author, the cover and the series. So it makes me wonder about like where we could put it up top in the colored area, like the gradient that would make sense, whether that's yeah, there or on the right side.

ste (27:27.679)
Thank you.

adam (27:43.175)
Yeah, it could be a really long title though. That's the...

ste (27:46.917)
Yeah, that's the catch, but let's see, wait.

ste (27:56.514)
see if it works like this. Okay, third. Let's put that underneath. In the hunger games.

adam (28:08.101)
Try another.

ste (28:09.894)
Yeah, go ahead.

Hunger Game Series.

ste (28:22.856)
Oh, here we go. Yeah.

adam (28:26.528)
and then do like a...

ste (28:37.614)
I didn't even leave it like because for this color you could basically set if it's darker or lighter hue, right? Or shade.

adam (28:52.471)
I was trying to do like a background so that it would be like...

ste (28:57.658)
just

adam (28:57.861)
Almost like a tag, yeah.

ste (29:01.194)
Okay, you can actually do this, TheHungerGames, hashtag three, oh, or FigmaTip for all the designers out there. If you go like this and hit shift A, you make it into an auto layout and you can choose the field. Like this, yeah, so that is.

adam (29:21.999)
Thanks for watching!

Oh, I see. That's, that's why it wasn't able to change the fill of it because it was just a text element, not a grouped element, auto layout.

ste (29:31.634)
Yeah, exactly. And then you can, yeah, round the corners a bit. And with another layout, you can actually, yeah, change with this is basically the padding. So you can play around with these numbers.

adam (29:45.101)
Nice.

ste (29:46.554)
Yep. And yeah, on this one, we can change the colors from here. So we have from the right side panel. So maybe, yeah, it can be like this or something lighter.

adam (30:03.979)
Yeah, I was thinking we could even use like the, a darker shade of the, the contrast color, because we have that green, that green, we could use like a dark version of that green.

ste (30:13.728)
Yeah

Oh yeah, that's a good idea. Let's do the fill and do custom one. So it can be like this and we can actually have the default. So the color of the,

ste (30:32.314)
well maybe a bit lighter. Yeah that's looking mighty good. So this would be after the header goes.

adam (30:46.251)
Yeah.

ste (30:46.534)
goes up so yeah let me space that a little bit more here we go just fine the amount yeah

adam (30:55.375)
Let's see.

adam (31:04.227)
playing with padding, yeah.

adam (31:10.503)
Yeah, I think if we did that, we might even be able to show like two series, but we would want to like keep it to one line.

ste (31:19.814)
Yeah, I mean, if how would it render? Would it be and or how do we do it now? So the hunger games, let's say this is another series, number one. So yeah, it would be something like that, right?

adam (31:27.983)
Hmm.

adam (31:46.463)
Yeah, or we could just say we only show one. And if there's multiple series that's a part of, we say like, see more. And then that's what takes you to like the series tab. But that is very high prominence for that link for something that I don't think as many people are gonna use for the two more.

ste (31:58.497)
Yeah.

ste (32:07.434)
Yeah, yeah, it's an edge case, I guess, because not so many books feature are featured in two series, right? That would be like a minority.

adam (32:18.687)
Yeah, I think it would definitely be a minority of books. Yeah, maybe just one and then they can scroll and click on the series at the bottom if they, yeah.

ste (32:28.954)
Yeah, I mean, I mean, this could link to this tab if it's easy to, I mean, yeah, because basically we're navigating, we're changing the URL for the tab.

adam (32:36.351)
Yeah.

adam (32:40.927)
Yeah, we could even like, we could even make this, this link even less prominent, but would that be, would that be weird to have like the two of them next to each other with different, different fills?

ste (32:52.114)
Well, it works like this. It's kind of like tag next to tag, but we can basically do this and it looks good as well.

adam (32:58.147)
Mm. Yeah, that's true.

ste (33:02.994)
Yeah, now it's looking mighty clean.

adam (33:07.631)
Yeah, let's see. Yeah, this is, this is looking good. Like I, I'm thinking like from the conversations we've had with people about this page, like the thing people always come back to after they know like the facts about the book, like the series, the length, the author, all that, the next thing they wanna know is like, well, the description.

ste (33:36.774)
Uh-huh. Oh, yeah. And what we could do here, what we said that could, could happen is actually doing that one liner, uh, like that really short description. And I could go to, let's, uh,

adam (33:38.031)
Uh...

ste (34:06.874)
me a description shorter than 90 characters for that would make me want to read it without any spoilers. Let's see.

ste (34:34.116)
hunger game. Okay. Can you give me five more alternatives? Let's see. Let's see, maybe we get a better one. This is not bad.

adam (34:43.096)
Hehehe

adam (34:49.083)
You know, like Hunger Games prequel, Villains or an origin story.

ste (34:53.614)
Yeah, discover how I hear a feeling pretty cool. Uncovered. Okay.

adam (34:59.758)
I mean.

adam (35:03.271)
Yeah, because, yeah, these are, these are not bad. I think all of them kind of work.

ste (35:08.374)
Yeah, okay. I like this one, so I'm just gonna go in. Explore the first, okay. Let's say we go with this one and let's copy the,

adam (35:15.077)
That's a good one.

ste (35:27.674)
Move this further up so that it's

and make it a bit more... Okay. Make it real shape. All right, I don't know. Is it looking good?

adam (35:47.675)
Yeah, one thing I noticed on letterbox for these is I think they, is this capitalized? Yeah, it's like a title.

ste (35:47.896)
OK.

ste (35:57.294)
Oh yeah, it's capitalized, that's the depth. So this is how we access these. And to make it like Larry Box, okay, throw the font, but let's make it smaller. And yeah, because it's a headline, you can just increase the tracking on the font and just do this.

adam (36:21.644)
Is it, let me see, is it, if we do like a semi-bold.

ste (36:27.704)
Yeah

adam (36:33.739)
That's about the extent of my design things after watching like all the tailwind things. It's always like make everything semi-bold.

ste (36:37.198)
Well that's good.

ste (36:43.277)
Yeah, well, those are the details that matter. I was thinking to actually replace this with an icon.

adam (36:49.633)
Mm-hmm.

ste (36:53.634)
just put it like this. It's kind of a lot of text over there.

real estate. So yeah, I mean, it's good to have like that short description. I think it definitely if we if we have it in the database, it can show up. If not, it can just default to nothing. But yeah, we can get it. So

adam (37:16.728)
Yeah.

adam (37:23.004)
One thing that I'm kind of curious about for this page, and let me know if you think this would be too much of a copy of Letterboxd, is kind of something like this here.

ste (37:40.234)
Is it the graph? Ah, here we go, it's the graph. Yeah, this is a really nice, yeah, let's say, view of the ratings. I'm wondering, let me play around what, oh yeah, yeah, it actually works. Were you thinking of actually showing the overall rating as well?

adam (37:41.333)
It is the graph.

Like that. Like.

ste (38:15.135)
Yeah, we got half cars. Yeah, that's kind of neat. I'm thinking if we can make it into, let's just put that there because it's a bit more, let's say it requires a bit more design work, but I'm thinking to make it as a, maybe not a bar chart, but actually does a bar chart make more sense. I was thinking to make it into a graph

adam (38:15.552)
Yeah.

ste (38:43.254)
the elements. But yeah, that would work. If it's not here, maybe here, would you think the rating has, yeah, it definitely has a bit more importance than the public data number of readers, right? And we can write the number of readers here.

adam (39:04.68)
Yeah, I think it's better, more important than the publish date. But then again, the publish date, we could also like...

ste (39:09.519)
Yeah.

adam (39:14.335)
you know, like, include it in the title, like, for instance.

ste (39:23.515)
Just put them there. Yeah.

adam (39:23.551)
Yeah. Yeah. Or even like a...

adam (39:29.812)
Not even the full thing, like...

just like, and then have it larger.

ste (39:33.734)
Oh, okay, just have it like that. Yeah, yeah, we can double it underneath. Because I mean, I was trying to jammel the info in one screen, but realistically, I think there's a lot of info for this to not work unless you scroll. So the book info will probably be a scrolling thing

will have the tabs on the button. I'm thinking that would be like the easiest way to do it.

adam (40:13.763)
What do you mean by a scrolling thing? I probably.

ste (40:16.394)
So this screen would actually become a bit longer. So what would happen basically is some of the info would disappear when it's scrolled. So let's say this is the height of the screen on your phone. Let's just assume it's probably taller, but anyways. Yeah, it'll be kind of like this.

adam (40:30.091)
Okay.

ste (40:46.034)
info. Would that be good or should we try to separate that same for so you just stay on one screen. I'm guessing that's a lot of book info so it would make more sense to have it scroll maybe

adam (41:01.183)
Yeah, I think having it scroll is okay for the rest of the data. Because we're already showing a lot of it.

ste (41:07.059)
Yeah.

Yeah, I'm just, I mean, we haven't even got them to this stuff. So that's why I'm thinking it's definitely gonna scroll. It needs to scroll.

adam (41:19.424)
Yeah.

adam (41:27.26)
Yeah, I'm really liking this so far.

ste (41:31.354)
That's good. Additions. Let me put the additions in here as well. It's gonna be a lot of tabs. I'm guessing anyway with the scrolling as well.

adam (41:41.647)
Yeah, that's... Yeah, all the different tabs and like adjacent book pieces is going to be tricky.

adam (41:54.216)
And yeah, these are like bottom tabs that would then change the top part.

ste (42:00.654)
Yeah, so far we got series lists, tags. So this would basically just scroll when you scroll them.

which is good because there's like a lot of things that...

ste (42:20.534)
we can move them around as well, that are important for books, I guess. So you need all that in the book page, all of this.

adam (42:32.787)
Yeah, it's like the more I look at this, the more I'm wondering about having those tabs back on top. I think, I mean, I can see both ways the bottom tab bar and the top tab bar.

ste (42:47.234)
Yeah. I'll tell you what, for a navigation perspective, because you'd want to browse these, having them on the bottom would make more sense because on mobile, you just have to reach with your thumb. So if they're up top, you'd have to, that always bugged me about

ste (43:17.334)
because you can't easily browse, you have to grab your phone with two hands so you can click the tabs with your thumb. But let's try that. I'm wondering where to actually like put them because if we move all of this, where are you thinking in between these or just like up top?

adam (43:26.392)
Yeah.

adam (43:37.187)
probably up top because I'm thinking like if you did go to the discussions page, you wouldn't wanna scroll through all that every time.

ste (43:40.975)
Yeah, you do.

ste (43:45.354)
Yeah, exactly. Uh huh. So, I say we have this.

ste (43:54.415)
just to see how it looks like.

This is like doing a Bob Ross painting, you know, you never know what you're gonna get and probably it's wrong, but as Bob Ross would tell you, that's okay. How was that? I mean, the mistakes are, you should do them. That's exactly, that was it. Yeah, that works. I mean, I don't see why it wouldn't work. The thing is, if we do this,

adam (44:00.623)
Hehehehe

adam (44:07.undefined)
Mm-hmm.

adam (44:13.864)
Happy little book covers.

adam (44:24.781)
Yeah.

ste (44:27.794)
you know how Twitter does like the swipe thing, so you can actually click on the screen and swipe. I know a couple of packages that allow that. That would be better because, whoops, didn't look at that. Swiping between these would make it way easier to navigate, so you'd

adam (44:30.971)
Mmm.

ste (44:58.094)
they would move but if we don't do that there's gonna be a lot of reaching to

adam (45:06.247)
Yeah, I think, yeah, I think like seeing it like this, I think I do like it kind of on the bottom more.

ste (45:13.994)
Yeah, it's unusual, but it's unusual because it's kind of like an anti pattern that most apps have gotten. I mean, Twitter did the swipe thing probably because it was also from an information perspective because, you know, these are just indicative of where you are, but yeah, if we can make them swipeable, I guess this would be better. I don't mind having like

two of these, having all the navigation from here, it would be like way easier to switch between them. Does that make sense?

adam (45:53.247)
Yeah, yeah, I think that makes sense. And then we could just organize this list by priority, like whatever we think the most swiped thing is, if that's discussions, then that becomes the second tab. If it's reviews, then reviews is the second tab. So it's, yeah, it's ordered in priority of usefulness. So, yeah, I think that's a good point.

ste (46:15.334)
Yeah, that's a good question. I mean, should we measure? I mean, what would be your first instinct in terms of order? Let me just put this here. And let's see if there are even more tabs apart from these.

adam (46:33.183)
Yeah, let's see. Series, reviews, additions, discussions, lists, tags, probably prompts.

ste (46:43.454)
Okay, would the prompts go under discussions? If that was one of the questions that I wanted to discuss because if prompts go under discussions, I mean, we could put them there, of course.

adam (46:47.875)
Hmm.

adam (46:57.909)
Yeah, it's probably a larger discussion. We probably, I could see cases for both.

ste (47:01.158)
Yeah.

ste (47:04.814)
Yeah, let's just put them there for now and maybe we can...

ste (47:12.874)
I'm wondering if the numbers should stay here or not.

adam (47:16.831)
Yeah, I think, yeah, I like the idea of just like, yeah, like you have it, like putting all the info out there and then we can, like another, another one is potentially like, like, I don't know the name of it, it would be like friends network, it'd be like the expanded version of this that shows like.

ste (47:24.835)
Yeah.

ste (47:42.938)
Mmm, nice.

adam (47:43.364)
I get actually maybe that's not here. Maybe that's just like a part of the reviews tab actually. Yeah.

ste (47:48.714)
Okay, how would, I mean, what would that show? Because that's really interesting. I'm gonna just put friends there just to have it sit.

adam (47:58.119)
Yeah, just like some way to see like what my friend's ratings are for this book and what my friend's reviews are. And as soon as I got to that part where I said what my friend's reviews are, I'm like, oh, that should probably just be in reviews.

ste (48:10.474)
Oh yeah, I mean yeah, they could sit up top in reviews and maybe yeah, that can be the default. And then you'd have popular reviews. What if, I mean, if any of your friends started discussions on that book, that would end up under discussions, right? And the same way, yeah.

adam (48:19.491)
Yeah.

adam (48:31.379)
Yeah. And I could see, I could see series being removed and that being a part of book info and friend and friends being reviewed, moved and it being a part of reviews.

ste (48:40.894)
info okay as good.

ste (48:46.394)
Yeah, totally agree. Yeah.

adam (48:48.216)
And I could even see tags being removed, and that being a part of BookInfo.

ste (48:52.314)
Oh yeah, exactly. Yeah, no reason why text should be there because we got content warnings and text and moods.

adam (49:01.323)
Yeah, actually, actually those genres and moods, those might be another thing we want to put even higher priority somewhere.

ste (49:08.954)
over here. Yeah. Yeah, actually put some tabs over here. So some, yeah, tags, not tabs. So I'm guessing on the screen, I'm seeing the only, so if we have the rating here, maybe this section, let's try removing, see how that looks like. So we have the number of readers. I guess this

to see how popular the book is. We can even put that there and do this.

ste (49:52.194)
Let's just see. And here maybe we can put the top three genres, or I'm just going to write random stuff, sci-fi, and order the first two.

And then I put the tags underneath because that might get complicated.

adam (50:16.487)
Yeah, I think it makes sense to show like, I feel like genre is the most important one. Like moods and content warnings are still important, but I think if someone scrolls to see those, that's okay.

ste (50:33.054)
Yeah, yeah, I'd say it's not top priority. So maybe genres. And what else could be here? You're seeing your rating, the thing you'd want to, I mean, you'd get, maybe that would be better to have under reviews. So you have.

adam (50:53.212)
Well, I think there's another solution for that. What if in this chart, like we highlight the pillar for whatever their rating was. So like, you know, if they rated it five stars, then the five star one is like highlighted. I mean, then it shows where they rated this compared to everyone else who rated this.

ste (51:02.179)
Oh yeah.

ste (51:07.754)
Nice. Yeah.

ste (51:15.514)
Yeah, yeah, that's great. Okay, so this goes away.

adam (51:22.467)
This would be like.

ste (51:24.434)
Yeah, let's just make it into this.

ste (51:32.314)
I'm gonna design nicely.

adam (51:39.635)
And at that point, this would be, okay, I think you've told me how to do this. I can change it to the red button. And yeah, because then the color corresponds with the red button and it.

ste (51:45.034)
Yeah, yeah, try it. Ah, here we go. Nice.

ste (51:55.194)
Oh yeah, yeah, I'm actually gonna make the stars yellow as well. What about the friends currently reading where some profiles, some social things that show you what's going on? Would that be important or you'd see that further down?

adam (52:01.167)
Thank you.

adam (52:13.752)
Yeah.

adam (52:17.595)
Um, yeah, I think, I think that that makes sense as like a next thing. And it, it, it, there is like something really comforting about like when you first go to the page, you see without scrolling, like some avatars of people that are familiar.

ste (52:37.534)
Yeah, I'm also pretty excited because you'd be able to discover new readers. So let's say you really like a book and here you'd see some faces from readers who are similar to you. Maybe we can even show if we calculate like the reader to reader compatibility score. Maybe we can show like the top matches at some point, not at first.

in chronological order, so this would be like the most recent readers, but it's gonna be cool if you could actually like tap this and see some profiles that you can follow. Because right now the only way to do that is either through the feed or through the user search on the supporters page. So yeah, as many

adam (53:19.916)
Thank you.

adam (53:32.557)
Yeah.

ste (53:37.414)
can achieve, I think the more the merrier. I keep discovering people who sign up and they have these wonderful libraries. I just like browsing through them. And I think, I mean, at least for me, that's like a really good pastime. It also might trigger into, it might play into the, you know, social media need to just scroll for something, but there you see books.

So it's actually really good.

adam (54:10.963)
Yeah. Yeah. I think, uh, yeah. So it sounds like we're, there's like two different things we could show here for like the social network aspect. Cause I mean, right up until this point, aside from the rating and the readers, it's all just been like data. So how do we like bring in, how do we bring in that feel so that you're not feeling like you're reading this alone and you're getting that feel from other readers and yeah, I think, I think part of it's

ste (54:21.514)
Thank you.

ste (54:36.614)
Yeah.

adam (54:40.551)
knowing like, hey, people that I follow, and maybe people that follow me, their take on this book.

ste (54:56.335)
Yeah.

Maybe when you, yeah, I was just thinking how this could change. I mean, the actual content and yeah, it can open up in a bottom drawer where you would see like two tabs, followers and following. And you can see how many of your followers are reading this or have read this. And yeah, how many of your following have read this?

ste (55:30.978)
But yeah, I think even seeing just the currently reading people, the readers would be like a huge improvement.

adam (55:41.055)
Yeah, like one of the... Let me find a good one here on...

adam (55:49.783)
on letterbox. See what I'm seeing here. Okay, everything everywhere all at once. Just one. Best picture yesterday. Amazing movie.

ste (56:01.415)
Oh yeah, I saw that.

adam (56:04.534)
Here's what I see when I go to it on letterboxed.

adam (56:11.595)
Let me see. Let me take a picture here.

ste (56:15.954)
Yeah, just put it over here as reference to remove this.

long list of things that need to be there.

adam (56:26.679)
Do you ever like take a screenshot and then you drag it and then it doesn't like go where you think it's gonna go

ste (56:33.799)
Yeah, I do that as well.

adam (56:36.383)
And then if you drag it image it like it doesn't save it as a screenshot because it's been interacted with. So you have to like, go find it. There you go.

ste (56:42.274)
Yeah, there are those that just disappear into the ether and they're like, ah, here we go. Yeah.

adam (56:48.723)
Yeah. So yeah, the things that this gets that I think are neat are it gets the number of the number of my friends that have read it, each of their ratings. And if they wrote a review or not. So like that little, um, dot dot dot or limelight line indicates. And, and then if you clicked on any part of either the, the avatar or the review, it's like all of that area is clickable.

ste (57:08.544)
Oh, that's neat. Yeah.

adam (57:18.047)
And if you clicked on any of it, then it, oh, let's see if this one works. Oh, okay, let me do this again. It shows, ta-ta-ta.

Something like this.

adam (57:38.88)
There you go.

adam (57:43.119)
So that's like the hover state.

ste (57:45.814)
OK.

Yeah, that's really nice. Let me think about something. I mean, we could do even a couple of these things. So this is friends that read it. So I'm thinking this could be, their avatars are slightly larger, and they have these ratings next to them. So we could also do that.

adam (58:11.517)
Mmm.

ste (58:20.334)
Yeah, I think this could be at first just friends who read this. Let's just put it like that.

ste (58:36.814)
We can have some indication of their rating and if they left a review, I like this little icon. And then we can show their reviews under the reviews tab. I also put like people who are not familiar to you because that might be interesting. So you'd have friends, but some people who are,

adam (58:52.619)
Yeah.

ste (59:07.696)
not see anything so have that fall back to something else if that makes sense

adam (59:13.831)
Yeah, I think that makes sense. Like it, you want to know that other people are reading this book. I think that's also useful because then it, it, it lets you know that this book is not, you know, this book is a book that people read, like as, as odd as that sounds, like there are lots of books that. Um, like being the first person to read it on hardcover, it feels like you're like.

breaking new ground. And sometimes you wanna break new ground, you wanna be the first person to read it, but sometimes you want more of a social experience. So it kinda lets you know which path you're on.

ste (59:41.254)
Yeah, exactly.

ste (59:50.194)
Yeah, exactly. Yeah. And if you have like lots of friends, you can also see your friends. But if you don't, you know, have that starting experience, having that start starting experience with like lots of people can interact, you can interact with that. Like this book, I think, yeah, would be really nice. Yeah, this is great. We've covered like a lot of the now or ended

adam (01:00:18.544)
Yeah, it did. Yeah.

ste (01:00:21.515)
I'm really liking this, so I'm thinking this is a good place to basically get that other info in and have this as the base version for the new book page.

adam (01:00:40.127)
Yeah, I'm liking it. And I think on the reviews page, one other thing we'll be able to do that we don't currently do is show ratings without a review. Like, you know, to know like this person read the book and rated it, but they didn't review it. So that you could be able to find other people who rated it five stars. Right now the only way to see other people

read the book as if they reviewed it, but I think we can do more social there if we also show like everyone's rating in some way.

ste (01:01:20.914)
Yeah, that's great. Yeah, I'd like to see that for some books, both the five stars and the one stars. That's gonna be neat to, you know, see other readers' tastes and your friends' tastes. That's nice.

adam (01:01:26.797)
Yeah.

adam (01:01:34.135)
Yeah. And I have a feeling for this first page, we'll still want to show one or two reviews farther down when you scroll on the Bookinfo page.

ste (01:01:43.894)
Yeah, they could have actually, you know, links to the actual review step. That's that's good. Yeah, I'm going to put those in and I'm probably going to make a long page with all this book info and then we can review it. But this section is the most important. So this one is key. To unlocking the whole book experience. So yeah, this is nice.

adam (01:02:02.956)
Yeah.

adam (01:02:10.292)
Yeah, this is, this is looking awesome. Yeah, I'm loving this. I can't wait to like see this page for books every time I search for a book. Like, yeah.

ste (01:02:20.234)
Yeah, this is gonna be really good. Nice. Well, I think we can wrap it up on that note.

adam (01:02:28.181)
Yeah.

I think so too. Yeah, thanks for taking the charge on this book page. Yeah, I'm really excited to see this out.

ste (01:02:33.174)
It's been a really productive one.

ste (01:02:41.414)
Yeah, it's one of the key book pages and once we get this out there, I mean, right now we've got to focus on making it perfect because, yeah, it's gonna play an important part in the whole way people use the app and, yeah, it's gonna be really, really neat seeing it live.

adam (01:03:00.201)
Yep. Cool. Well, have a good... You too! See ya. Bye.

ste (01:03:01.634)
Cool, great, have a good one. And yeah, talk next week, bye Adam.