Hardcover Live

Summary

The conversation covers a range of topics, including a discussion about the book 'Tomorrow and Tomorrow and Tomorrow', personal creative outlets, updates on current projects, motivating people to read more, challenges of discussing books online, a preview of the new book page design, adding components for ratings and reviews, positioning elements on the book page, exploring options for filters and sorting, implementing scroll snap and virtualized tables, adding a share option for reviews, considering the use of titles for reviews and discussions, and the placement of the URL icon. In this conversation, Ste and Adam discuss various design considerations for the book review platform. They explore the idea of using avatars and user metrics to enhance the user experience. They also discuss visual indications of reader rankings and how to display the number of books read in a specific genre. The conversation then moves on to improving book additions and the concept of rating books by edition. They emphasize the importance of qualitative data in reviews and discuss the process of changing book covers. The conversation concludes with excitement for the progress made on the new book pages and personal updates.

Takeaways

Avatars and user metrics can enhance the user experience on a book review platform.
Visual indications of reader rankings, such as the number of books read in a specific genre, can provide valuable information to users.
Emphasizing qualitative data in reviews, such as why someone liked a book, can be more informative than just a numerical rating.
The process of changing book covers should be user-friendly and allow for different options, including uploading new covers and selecting from existing ones.

Chapters

00:00 Discussion about the book 'Tomorrow and Tomorrow and Tomorrow'
03:04 Personal creative outlets
06:13 Updates on current projects
09:17 Motivating people to read more
11:09 Challenges of discussing books online
13:14 Different experiences of watching series and movies
17:03 Preview of the new book page design
21:45 Adding components for ratings and reviews
23:28 Discussion on positioning elements on the book page
26:00 Exploring options for filters and sorting
29:19 Implementing scroll snap and virtualized tables
31:37 Adding a share option for reviews
33:55 Considering the use of titles for reviews and discussions
38:24 Discussion on the placement of the URL icon
43:03 Exploring options for the filter interface
44:18 Adding the date of the review
45:38 Designing Avatars and User Metrics
49:02 Visual Indications of Reader Rankings
51:06 Improving Book Additions
52:00 Rating Books by Edition
56:33 Emphasizing Qualitative Data in Reviews
57:24 Changing Book Covers
01:02:17 Excitement for New Book Pages
01:03:26 Wrapping Up and Personal Updates

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:06.021)
Hey hey, stay, how's it going?

Ste (00:08.37)
Hi, it's going well enjoying a nice London evening. How about you?

Adam (00:14.481)
It's a pretty quiet morning. My wife's reading Tomorrow and Tomorrow and Tomorrow, which I read just a couple months ago. So we were just having a fun discussion about that one. It's, yeah, one of the better books I've read in the last year. I really liked it.

Ste (00:34.45)
Okay, what is it about? I seen it in the feed actually. I think I even liked that you read it. I like the cover.

Adam (00:39.603)
Yeah.

Adam (00:44.221)
It has a really cool cover. Uh, it's, it's mostly about these two. Video game designers, developers, like people who create video games in different roles and kind of their entangled lives as they grew as creative professionals over the course of their life, from being kids that played video games to being adults that create video games.

Ste (00:45.576)
Yeah.

Ste (01:07.87)
Wow, OK, that sounds interesting. Yeah, it got me hooked. That was good. Yeah, yeah, and I can relate. I mean, if I wasn't a designer, one of the alternative careers I'd have would probably be a game developer or designer.

Adam (01:13.931)
Yeah, definitely a fun one.

Adam (01:30.421)
Yeah. Did, uh, when you were a kid, was there like, uh, uh, creative outlet that you had that like carried over into adulthood?

Ste (01:41.43)
Well, just drawing, I guess, which turned into design. But I actually contributed to some early Steam games. My brother, he had a friend who made Steam games, and I did some assets because I drew. And yeah, they actually got turned into what was his name? It was a pretty neat game, and it was mildly successful. For him, not for me.

Adam (01:52.841)
Thanks for watching!

Ste (02:11.25)
Yeah, I guess that was it. How about you?

Adam (02:13.188)
It's cool.

Adam (02:17.742)
Uh, I think for me, it was just like creating websites, just like, um, you know, basic HTML, CSS, and a little bit of like PHP and MySQL, uh, like it created a, a dance dance revolution fan site, which ended up getting like pretty popular at the time. And that was like my first, like, uh, community organized website.

Ste (02:43.91)
Okay, wow, listen to that. That's pretty nice to hear. Yeah.

Adam (02:51.941)
Yeah, other than that, yeah, this week's just getting started. So we'll see how the week goes, but yeah. What kind of a hardcover stuff have you been up to?

Ste (03:04.79)
Well, I'm busy revamping the whole structure, the Figma files, and we can quickly go over that because it might be interesting for the feed. Even for like to give the listeners some context, even for a small startup like ours, to go fast, you need to get from design to development really quick.

point where stuff piles up and app evolves, there's a lot of like loads in terms of like content that has to be synced between what the app is and what the designs are. So right now there's a bit of a let's say, how should I call it, a bit of disconnect between what hardcover looks like

and what it looks like in Figma. And it's been working out good for us because we've been thinking okay on the designs, but I just want to give it a bit more clarity, so redoing everything with components and yeah, what I showed you. So it's basically that and working on some new stuff because the apps are out and we are now looking

push features that improve the overall experience by a lot. So we've got search on our plate. We've got book editing. We've got the book page and a couple of other stuff, but yeah, these are the, let's say high priority ones. Yeah. How about you?

Adam (04:59.921)
Yes. Yeah. Having, having those, uh, figma pages organized with components and then implementing those components will, will make the dev side a ton easier for sure.

Ste (05:12.671)
Yeah, well, hopefully.

Adam (05:14.661)
Yeah. Um, for me, um, I rolled out like a really big, like database and like structural change to the background, to the backend, like I actually rolled out like the day before or two days before I left for my vacation, and then it had some bugs that like came out during the vacation, so I was like doing that in the morning and then like going off and doing the rest of my vacation and coming back.

deploy major changes right before vacation. But luckily nothing big broke or any big things that broke were easy fixes.

Ste (05:56.45)
Yeah, I was going to ask because I noticed you fixed some stuff while you were in Vegas. And that was okay. I hope like Adam is not waking up at 6 AM after a hard night to fix database problems. But I know maybe, uh, was that happening?

Adam (06:00.541)
I'm out.

Adam (06:13.141)
Nothing. No, I wasn't waking up early. It was more like while my wife was getting ready for the day in the bathroom, I would like jump on my laptop and fix a couple bugs.

Ste (06:23.79)
Okay, that's good. That's good. So it wasn't, you know, that high impact, I guess. Yeah, it's been working well. I mean, apart from a few people who have reached out via the feedback channel on Discord, yeah, I think it was all good.

Adam (06:27.961)
Yeah. Yeah. But yeah.

Adam (06:38.741)
Yeah. And then, uh, yeah, like you said, kind of planning out what we work on the next couple of months and yeah, a couple of redesign pages around search and the book page and some research around authors and around. Like goals and gamification motivation. I I'd consider it like motivation research. It's like, how do we, how do we motivate people to read more?

Ste (07:04.954)
Mm-hmm.

Adam (07:08.741)
that's kind of the most important thing. It's not about engagement on hardcover. It's like, how do we help people read more?

Ste (07:15.97)
Yeah, exactly. Yeah, that's a shift I definitely agree with. There are those people that, as a sport, there are the athletes who find running really easily because they've been doing that a lot. And there are the people who are struggling to keep up a habit of running around the block and sprinting. And I think up until this point,

for the athletes, people who like do that kind of stuff. So a bit of focus on helping the people who aren't athletes, you know, or let's jump back to readers. Yeah, read more. That's definitely something cool because I think there's lots of like space for improvement. I've seen like lots of people who like really wanna get into reading, but there's all sorts of like hurdles,

personal hurdles related to habits, but also related to how they discover what to read or how they find, let's say, social incentives like having a friend read the same thing or having a recommendation so they can talk about the book with one of their friends. Yeah, I think that's

Thanks for watching!

Adam (08:47.941)
Yeah. Yeah. I, I really like that athlete analysis or, um, analogy. Yeah. We've, yeah, I feel like the same way we've, we've definitely been building for. People who already have like, like structures and systems in place for how they read, but like building up those systems to where you, you have that place where you store all the books you want to read, where you're coming back to that, where you're keeping

Ste (08:54.455)
Yeah.

Adam (09:17.921)
You're able to say like, here's some of my favorite books or here's some of the books I'm most excited to read. Just getting to that step, you know, kind of like running. It takes, it takes time just to get to that step. That's, that's not the starting point. That's like, you know, two kilometers in.

Ste (09:34.61)
Yeah, exactly. Yeah, it's a process. And for reading in particular, I mean, as we realized, it's a different kind of activity than others. It has different, let's say, sides to it. People can be social about it, or they can be, yeah, they can do lots of stuff.

you shared that really good analysis from what was it from

Adam (10:11.706)
literal.

Ste (10:13.05)
Uh, no, I think it was from, uh, wait, I signed up for an account, but I forgot what it was, the one you shared on discord, it wasn't literally, it was. I closed my discord anyway, but that analysis said that.

Adam (10:25.482)
Oh yeah, italic type.

Ste (10:27.97)
Yeah, exactly. Yeah, that was it. 77% of readers track stuff while they're reading and would want to discuss things while they're reading and about 90, it was like over 90% would like to like discuss and...

Ste (10:50.13)
rates or review a book after they've read it. Those are probably like a little bit on the optimistic side. Maybe they interviewed like lots of power readers because that sounds like power reader-like behavior but that's like yeah I mean people would do it I guess.

Adam (11:09.901)
Yeah. Yeah. It's special. Like, I feel like that's one of those things that how, how we work that into the, like the flow of how a user reads is, is going to impact how it happens. Cause like, if you're just, if you're, if you're in the middle of reading a book, that is kind of my hypothesis about it all. If, if you're in the middle of reading a book and you, like you're 30% in, and you want to discuss it with other people. Like.

Ste (11:29.634)
Yeah.

Adam (11:39.841)
There's a couple of different routes. There's like you, you go to like a forum about the book, you know, subreddit, whatever discussion page about the book. And then you're talking with everyone who's read the book, regardless of how far along they are. So you're going to be, you know, avoiding spoilers, but you might want to discuss the parts that you've read. And it's going to be a minefield. Alternatively, alternatively, you can like post about where you are so far. And maybe some people will reply.

but how you get people to reply that have also read the book and have a awareness of how far you are into the book makes it difficult to have an engaging discussion, especially online. I feel like when I'm talking with someone in person, I can very quickly, we can have a discussion, I can figure out where they are in the book, and then I know not to talk about things that happen after that. But how we enable that online,

Ste (12:28.857)
Yeah.

Ste (12:34.25)
Mm-hmm.

Adam (12:39.841)
anyone's really done that yet. It's kind of all or nothing.

Ste (12:41.813)
Yeah.

Yeah, it's tricky. It's doable, I guess. I mean, we've chipped a bit at it, and I think there's a way of doing it. I can relate. It's way easier in person. Kind of like if you talk with someone about a series you're watching.

Ste (13:14.37)
over a bigger span of time. You can watch a series over, I don't know, if it's The Wire, you can watch it in like, I don't know, two months. So depending on where you are, you can talk about that moment with someone similar to what you do with a book. So yeah, it's a long span, you know,

Ste (13:44.25)
watching a movie, two hours in, okay, you know all about it. You're probably like, movies are really different than books in general. It's like a more complex experience, I guess.

Adam (13:49.883)
Yeah.

Adam (14:02.101)
There was something I did on my last personal blog. I had this like course platform on it to teach people how to invest. And I added this functionality to be able to review the courses. And when I added something where when someone reviewed the course, it would track how far along they had made it in the course at the time they reviewed it

that to people so they could say, you know, this person rated it X stars and they were 100% done with the course when they rated it. And that's gonna have like different impact than someone who rates it a different thing and has only made it 30% of the way. It's kind of like, it almost feels like discussions need like something like that where it's like this person at the time they wrote this comment they were this far completed in the book.

Ste (14:40.35)
Thank you. Bye.

Ste (14:46.511)
Yeah, yeah, that's really smart. That's nice.

Ste (15:00.97)
Yeah, exactly. That's a really good one. It needs that kind of timestamp and you need to be presented with that timestamp, I guess, depending on where you are with your progress. So if you're at page like 100 out of 300, like 30% done with a book, maybe you'd like to see like the bits that

that are in the same place as you are at that time and maybe then you know all the others depending on you know how do you want to filter them so yeah there's there's definitely like a way of doing it and I'm guessing it's interesting you know to to see to see that

Ste (16:00.85)
the same books, maybe even at the same time. That's what happens, I guess, on Book Twitter, where people make recommendations, but it's mostly the books they're reading about, I guess, but there's no functionality related to tracking. So digging down that well of users

similar to what you'd aspire to, like how you'd want to build your booktaste, I think is going to be like really, really interesting and to see them real time. So you wouldn't see like on Reddit some kind of comment that's left by someone five years ago. You'd be able

Ste (17:02.972)
That could be really neat. I mean, we should be digging into it more in parallel to everything else we're doing. And maybe we can give a glimpse of what we're doing with the book page, if you think that's a good idea.

Adam (17:03.541)
Hehehe

Adam (17:18.902)
Yeah, yeah, I want to jump into some figma for all of that

Ste (17:24.35)
Yeah, of course. Let me share my screen over here. So I'll just share the entire thing. Okay, here we go. So not here. Let's go here.

This is the new book page that we're working on. See, this is the new Figma file. It's got everything in here. I've made like a small documentation for the other people in the team, for Eugene, for... We've got a new member in the team, by the way, Lily. She's like how many weeks in? Three weeks in?

Adam (18:00.141)
Mm-hmm.

Adam (18:09.561)
Something like that.

Ste (18:12.431)
Yeah, by her, by Mariana and Alicia. And this is supposed to provide really simple guidance to how these screens are, what their status is. So if it doesn't have a line, it's basically live. So this is our feed. Pretty similar to what's going on

details. So, yeah, this is work in progress. This is the new book page. And we've been shipping the web for the past, I think, three weeks. And starting to really, yeah, come together. I've worked based on most of your comments, Adam. Maybe

Adam (19:02.651)
Mm-hmm.

Ste (19:11.635)
How do you hide comments? Here we go.

Um...

Adam (19:17.462)
Yeah, I hope I didn't leave too many of them. I was...

Ste (19:19.63)
No, that's perfect. Yeah, I mean, I liked the detail and it was really good. So definitely keep on coming. We can go here. This one was like a slight redesign of this thing. I was so to give everybody a bit of context, if you have rated a book, you'd wanna see that you rated it

to you. So let's say you have a book that you really like. Here you see the general info about the book. Here you can see the reviews that your friends left. So over here, if one of the friend has this little icon, it means they left like a written review. And if not, it only shows the star rating. And for people who haven't reviewed this,

so you can see that they've read it. But if you actually rated it, so this is how it looks like when you didn't leave any review, so you can quickly review it from here. But if you rated it, you would need to, as Adam put it very well, see the details of your rating, right?

So what I was thinking, Adam, because this was the initial one, I simplified it just a little bit, or I don't know, reorganized it a little bit. So you would see your rating and then for the review and details, you'd actually click the drop down and you would get all of these.

it and then really similar to what you did here, it would show the lists it's on, the format and the dates you read it between, the tags and the history. And here you can see your review and it would take you to the reviews tab where you could see yours. What do you think about this?

Adam (21:45.841)
Yeah. Yeah. Yeah. I think, I think that's great. Yeah. I think that kind of covers it all. Yeah. Yeah. I like it.

Ste (21:52.79)
Okay, that's good. Yeah, the history was a really, really good one to put over here. I didn't know where to put this. So since you put it here, yeah, that's the perfect place for it. And it's great that it's a drop down because you would actually just see this and it would be

Adam (22:17.865)
Mm-hmm.

Ste (22:22.67)
book page. I was thinking to give it some margin like you did here, but I don't know. It kind of looks okay this way and being mobile, I wouldn't want to add unnecessary padding to it. Do you think it looks good this way?

Adam (22:39.841)
I'm split on it. I feel like partially having it with like its own, like container makes it clear. It's like part of like your data, but maybe that's not a, maybe that's not an issue like that people will have.

Ste (22:57.61)
Well, let me just put it here so we can see it. Yeah, I don't mind the container. I mean, it looks OK. This would be how you'd see it when it's collapsed and, or is that your way around? Yeah, when it's collapsed and expanded. And this would be how you'd see it when it's expanded. We have the available from six sellers button on top. So yeah, this would work.

Adam (23:28.262)
Yeah.

Ste (23:28.731)
We can leave it like this if you like it better.

Adam (23:31.981)
Yeah, I think I prefer it with the little color area around it. I was experimenting with other colors, like what if we use other colors there, but nothing looked right besides like our grayscale.

Ste (23:37.716)
Okay.

Ste (23:46.81)
Yeah, well, that's for background. Yeah, when you add color to it, it just like is too much in most cases, if not all cases. So yeah, over here, I think we'd have to like render the tags with a different color, because they would have this color, or we could maybe add a stroke to them.

Adam (23:54.225)
Yeah.

Adam (24:10.624)
Mm.

Ste (24:16.25)
work. So the stroke would be like this. And yeah, it would be universal. I can edit to like the tag component.

Adam (24:25.581)
Mm-hmm. And one thing I was trying to do, but I, I kind of failed at, or I didn't know how to, was like the little circles in the history section, drawing like a little line between them.

Ste (24:26.754)
Okay.

Ste (24:38.67)
Oh, so yeah, gotcha. Okay, so maybe, yeah, it's because it has an auto layout. So with auto layout, it's supposed to blessing and a curse. So if I do this, I copied the style. So I'm just gonna position it, making sure that I don't put it in the auto layout. So I think if you, what was it? If you hold down, is it option? Nah, it's not option. Yeah.

Adam (24:41.441)
Thanks for watching!

Adam (25:01.141)
Okay.

Ste (25:08.811)
don't put it in the auto layout and yeah, you can just do this.

Adam (25:13.741)
Gotcha. Make sense.

Ste (25:16.75)
Yeah, it's cool. It's kind of like a timeline, so it's really nice.

Adam (25:17.046)
Yeah.

Ste (25:24.31)
Okay, and then we go into the similar books and then the series. I put the series here. I think it's a good idea. And the idea of showing the book, the current book that's in the series in the center. Maybe I should like place the actual book.

So if you're viewing this book, yeah, it can be in the center by default, and this is scrollable, and the numbers of the books in the section would be underneath.

Adam (25:44.802)
Mm-hmm.

Adam (26:00.441)
Yeah. Works for me. One of the things we were, we were chatting about last week was that concept of like putting things over the covers versus putting them below it or off to the side, any thoughts on, yeah. Positioning on those. Like it's

Ste (26:11.95)
Mm-hmm.

Ste (26:16.774)
Yeah.

Well, I could sit like this. I wouldn't mind, but maybe it can clash with the, maybe on top, let's see.

Adam (26:29.807)
One idea I had for it, I can try it on one of these, was like...

Adam (26:38.001)
If it was like kind of like over here, but then this was like, uh,

Ste (26:38.21)
Yeah, it is.

Ste (26:45.69)
Okay, gotcha. So it was kind of like a, wait. Yep, that's it. Okay, that's nice. Okay, yeah, let's do this. Let's do this for all.

Adam (26:58.101)
So it almost, it almost looks like a little bookmark or something coming out of it.

Ste (27:02.13)
Yeah, that's nice.

Ste (27:07.69)
If it's just for numbering stuff, I guess that's great. I'd use the same component, or maybe, yeah, maybe we can create a new component just for this. But if we have other cases where we can reuse it, yeah, this looks nice.

Adam (27:26.581)
Yeah, we can probably, we can probably have like the list component, but we can also like pass in like, uh, another component into the list component, which is like the identifier and then on prompts, we pass in like a prompt identifier on series. We pass in like a series identifier, and then that knows how to render that. Like top part.

Ste (27:46.63)
Yeah, that's perfect. I'd also use it on prompt. So for the voting to show the ranking, maybe we can use the same one.

Adam (27:56.583)
Yeah.

Ste (27:58.43)
just to, you know, have consistency. It's going to help down later down the line. So yeah, this.

Adam (28:02.761)
And, and, and we, we could, we could probably also use it for a ranked lists since you can create a list that you have like sorted in a specific order.

Ste (28:12.91)
Yeah, that's true. Yeah. Yeah. Yeah, I like that.

Yeah, and this one, I actually used the gradient. It looks better. So it fades to this color and it creates like the illusion of a shelf right here. And this would be scrollable. I'm hoping we can use the, what's it called? The CSS, you know, when it locks in. What was it? ScrollSnap. Yeah, ScrollSnap, but for horizontal scrolling.

Adam (28:24.502)
Mm-hmm.

Adam (28:39.785)
Mm-hmm.

Ste (28:49.131)
I'll research how to do that. I think it's possible even with Tailwind. So yeah, that should be good.

Adam (28:55.461)
Yeah, yeah, yeah, I like the scroll snap of it. And I have a feeling we could do this whole list component with like a, what's it called? Like virtualized tables, kind of like we do for the feed, but probably it can be, we can use the like tan stack one instead of the one we used, because like a list might have a thousand books on it, but we only want to render like the three

Ste (29:19.171)
nice.

Adam (29:25.441)
going.

Ste (29:26.879)
Mm-hmm.

Adam (29:28.041)
or four that are showing. I think that's one of the reasons why our list page is.

Ste (29:31.27)
Oh, and, and load the, uh huh. Yeah. Would you be able to like, uh, load them progressively? So, uh, you know, if you have a thousand books, you'd be able to like scroll this. Uh, wait, I forgot that was in Figma, uh, to scroll this, like however much you want. Wow. Yeah, that'd been really neat.

Adam (29:50.041)
Yeah, exactly. And, and that way, like even that, I think one of your mockups had like a, something where it said like top 50 books from a, from a list. We probably could get away with not even having that and just, uh, um, showing all the books.

Ste (30:09.69)
Mm-hmm. Yep showing top 50 books here it is

Adam (30:11.082)
if we did that.

Adam (30:15.267)
Oops, sorry.

Ste (30:17.692)
That's okay.

Yeah, look at this. I do it the same on desktop. So I do this and.

Here we go. Yeah, that looks nice.

Adam (30:35.461)
Yeah, that looks good.

Ste (30:42.673)
Okay.

Ste (30:46.53)
Yeah, and then the so after this, by the way, I didn't know where to put the flag button. So I just put it in here. I've, I think I sat for like 15 minutes trying to position it in here, but no, I think that's like locked. So like.

Adam (31:04.501)
Yeah. Yeah. I'm good having that at the bottom. Like it's, it's, it's going to be the least, least used thing on the page. At least it should be.

Ste (31:14.23)
Yeah, well, hopefully. Yeah. I tried to not give it. I mean, I put it here, but it seemed to be less important than everything that's in here. So yeah. OK, that's good to hear. And then I followed your suggestion to make a minimized version of the actual, where is it? Here we go.

Adam (31:28.705)
Yeah.

Adam (31:37.103)
Hmm

Adam (31:43.982)
The header, yeah.

Ste (31:44.15)
actual book. So the, yeah, it has the book, but yeah, it was, those were like really good suggestions. So we keep this, if we can make it into like a smooth transition, it would be like super neat to, you know, just have the title animate and, yeah, have the book cover.

Adam (31:47.002)
That looks really cool.

Adam (32:11.621)
Yeah, like, like move up to it kind of like as you click to a different tab, it like zooms up and yeah, that'd be really neat. I.

Ste (32:16.856)
Yep.

Yeah, I think we can do that with Trimmer Motion. It should be good.

Adam (32:22.361)
Yeah, the animate presence thing in framer motion just feels like magic.

Ste (32:28.35)
Okay, that's good. Okay, you already researched it, so that's nice. Perfect, yeah. And...

Adam (32:35.201)
And then if you went from this page back to the book page, it would like blow it up bigger too.

Ste (32:39.45)
Yeah, exactly. Yeah, that would be neat. That'll seem like really, really good. And I'm hoping we can use the same interaction for other stuff. But if we use this for the book page, because we can get the color in and yeah, everything that should be like really nice. I made the same for additions and for, yeah, uh, the actual like single edition.

And here it can have like a number associated with the page you're on.

Adam (33:13.561)
Yeah, I think that makes sense. It's like a little more context so you know, you know kind of where you are within that book. Yeah.

Ste (33:21.323)
Mm-hmm.

Ste (33:25.65)
Yeah, and for the filters, so for these ones, there were a bunch. So let me bring up your comments because it was good. So it's the flare. I was thinking about this. We can actually either put them like this or yeah, do you think the filters would need to be

more complicated than this? Or could we, I mean, the question is a different one. Should we put them in a horizontal container that you can scroll sideways? Or should we try to make them like we have them on the list page, pretty compact?

Adam (34:20.009)
you

Ste (34:21.99)
There's gonna be a lot of filters, that's my worry. But I can try to, yeah, do all of these. So, let's see.

Adam (34:30.241)
Yeah. Yeah. I'm wondering. Yeah, there's that. That was one, like I, I, I had a, some struggle with trying to figure out a good option for it myself, because I, I feel like the, the most common things for me might not be the most common things for how someone else would filter their reviews, but also don't want to make it so confusing that people get overwhelmed and don't use it at all.

Ste (34:57.25)
Yeah, that's, that's yeah, those are my exact worries. I'm thinking, I mean, I'd put like the most used options a tap away so you wouldn't have to, you know, they kind of, they kind of, they would kind of work like tags. So if you would want to see reviews

Adam (35:01.841)
Thanks for watching!

Ste (35:27.17)
click from friends. If you want to sort them by match score, yeah, you click match score. But yeah, that's pretty complicated. I mean, that's the simple one, but it's pretty complicated because it leaves out all the other things. So...

Ste (35:46.372)
Yeah, that's a...

Adam (35:48.022)
Yeah. Yeah. Cause like the other options were things like, um, which of these. Reviews have like a, um, a video attached to them and how we, how we like showcase those like media reviews and that would, I could see that being like one of the high level like filters.

Ste (35:58.991)
Mmm, yeah.

Ste (36:05.undefined)
Mm-hmm.

Ste (36:13.73)
Yeah, definitely. Okay. I'll figure that out because that definitely needs to be there. So maybe just the sorting and filter and showing it in a way that, you know, the default is what most people would want to see, but you can set it so it shows what you want to see first.

Adam (36:16.341)
Yeah.

Adam (36:35.521)
Yeah. And, and it could, another option is that it's, it's two buttons. One that's has like a, a sort icon and then whatever's being sorted by. So like a sort icon with a, um, match reader match would be like the default. That way it's sorting and then like filter and then filter, um, it doesn't say filter. It says like.

Ste (36:54.555)
Mm-hmm.

Adam (37:06.163)
from friends and it has like a filter icon. And then if you expand it, you can change it to.

Ste (37:13.15)
Oh, yeah, yeah, exactly. Yeah, so it doesn't say filter. Yeah. I was even wondering if we could remove this or hide it under something. Would maybe this be a good case to bring up the drawer? So on mobile, you would actually have all these in a drawer.

Adam (37:15.094)
So it's.

Ste (37:43.21)
stuff from your comments. So you'd have for sorting, if you'd click on, if you tap the sorting icon, you'd be able to select all of the options. If you would click the from friends slash filter icon, you would see all the options in the book drawer that we're using for the book button.

Adam (38:10.721)
Yeah. Yeah, I think that would be a good way of doing it.

Ste (38:14.47)
Okay, I think generally like the book drawer on desktop would turn into a popover and on mobile, it would turn into the book drawer.

Adam (38:24.421)
Yeah, yeah, yeah, that makes sense to me. And.

Ste (38:27.11)
Okay, that's good. I'm going to add an extra screen with that. And another thing, I just left uncommented, but we can talk about it now. I was thinking like, you know, how on letterboxed, the reviews that are like really short and witty are like the most engaging and the smartest. So

Adam (38:51.741)
Thanks for watching!

Ste (38:57.53)
or headline that would be like a glimpse into the review or summary. So you'd write like the intro and then because for reviews we have a lot of like text usually, just have it, yeah, underneath. Or if not, it would just show the actual text.

Adam (39:01.445)
Mm-hmm.

Adam (39:29.141)
Yeah, I was, I was thinking about that for, um, progress updates as well, like, or just, just discussions in general. It's like discussions without a title are hard to enter into. And these are effectively discussions about a book. So in that sense, yeah, I like the idea of having a title for an optional title for our overview.

Ste (39:48.32)
Mm-hmm.

Ste (39:56.69)
OK, OK. Yeah, for reviews, yeah, it makes sense. And maybe even for discussions as well. Yeah, that's good. Let's leave it like that. And if we decide to not do it, we can just take it out. But for these, maybe it could be nice.

Adam (40:17.521)
Yeah. And for, uh, for these reviews too, when you, I was thinking like, if you click on them, it would go to like a dedicated page for a review and then that would have like a share option to share their review too, which is something I always forget to add whenever I'm building stuff is like, Oh, people want a way to share this. And on a mobile app, you can't just copy the URL.

Ste (40:29.873)
Mm-hmm.

Ste (40:34.61)
Yeah, exactly.

Ste (40:46.35)
Yeah, exactly. Oh, yeah, that's a good point. We should put like, oh, crap, I almost forgot about that. Here we go. We should put, because now that we luckily have a mobile app, it brings up that issue that you aren't able to just copy paste the URL. So if you want to,

Ste (41:16.25)
Let me just make this bigger and get the icon for the URL. What was it?

Yeah, just put the URL icon next to the title.

Adam (41:33.201)
Yeah, like it would be like a good share. Like there's the share three dots thing that I see some places, but I don't usually associate that with sharing the same way I associate other share icons.

Ste (41:47.35)
Yeah, it can be the link. So it can be this.

Adam (41:50.141)
Oh yeah.

Ste (41:54.37)
because you're just grabbing the link instead of...

Ste (42:01.732)
I can't be here. I don't know.

I'll just leave it here and maybe we can reposition it, but just for me to not forget because yeah, there's no way of sharing stuff while you're in the app, so...

Adam (42:15.501)
Yeah, it could also be like up here, but I don't know. Yeah.

Ste (42:19.411)
Yeah, why not?

Ste (42:24.55)
Yeah, that's actually a better place for it maybe. And when you tap it, it would just copy the link.

Adam (42:31.581)
Yeah, just copy it to the clipboard.

Ste (42:33.23)
Yep, we could bring up a toast and that's it. OK, cool. That's sorted. We should be able to put that on the profile page as well and everywhere in general. And that's where this, yeah, maybe we can make this whole thing a clickable area so that this icon is just like an indicator that there's more.

Ste (43:03.17)
like area where you can tap it would be like all over it.

Adam (43:09.181)
Yeah, makes sense.

Ste (43:11.27)
Okay. Yeah, that's better. I wouldn't make it like too big because it can take a lot of space. And I wanted to get it in line with the actual text that was like the idea. So it has the same height as, uh, yeah, let's say the end. It's a little bit bigger still, but yeah, it would have been like, uh, too small to click it, so I was thinking to add padding and a negative margin so that the actual space around it is bigger. So it's like this or something.

Adam (43:41.005)
Mm-hmm.

Ste (43:42.35)
But if we make the whole area tappable, I think people are going to just learn that right away.

Adam (43:52.025)
Yeah.

Ste (43:53.674)
Okay.

Adam (43:56.381)
And one of the things that just came to mind for these reviews is maybe showing the date of the review somewhere.

Ste (43:56.39)
And this is good. For this, yeah.

Ste (44:09.993)
Yeah. Well, yeah, true.

Ste (44:18.17)
By the way, what's our date format? Is this our date format?

Adam (44:22.424)
Right now we use a locale string function. So it's a different date format if you're in the UK or in the US.

Ste (44:32.55)
Ah, okay, gotcha. Okay. So yeah, I put it in a place where maybe we can like hide it so that if the review is less than three rows, you can see this. But if it's more than four rows, you see it at the end. So part of the expanded text or I don't know. Do you think it's like very important?

Adam (44:58.224)
Oh yeah.

Adam (45:02.541)
Hmm.

Ste (45:03.35)
or I mean, to me, it's not that important, but it might be too important. I wouldn't like.

Adam (45:10.421)
I think, I think about like, you know, someone scrolling through Instagram and accidentally liking a Instagram picture from like three years ago. And like, if people would feel like that, if they were liking reviews that were like years old and maybe we want them to, but maybe we want to give them the option to make that decision for themselves.

Ste (45:20.043)
Okay.

Ste (45:31.81)
Yeah, true. Then I'm gonna do this. So I'm gonna.

put the date here and what else can we put here so that it's.

Adam (45:45.101)
Well, we could, we could always use a, this spot to do avatars of readers.

Ste (45:53.19)
Yeah, that's true.

Adam (45:54.821)
But it might be more confusing since we already... Yeah, maybe not actually. I think there's already enough avatars on here.

Ste (46:03.15)
Yeah, that's true. Yeah. Maybe some piece of info, but what else would be interesting to have here? So the date and maybe a metric.

Adam (46:11.342)
Well, I saw your, your other, um, prototype farther down had some other metrics about the user.

Ste (46:20.85)
Oh yeah, it was, you mentioned badges. So I just put some stuff in here and a supporter like Flare and I made it like really small. So it doesn't say supporter, it's just an S and the...

the border of the avatar is also orange. So I was thinking that could be like a good indication, but maybe, well, this would have to be associated with the profile name. So yeah, let me just edit this one because I think this is the final one. I just copied it. So we have the top one as well. So if we have the dates,

Adam (46:55.341)
Yeah.

Ste (47:10.25)
Maybe we can put some more contexts on this. So.

I don't know, badges or something. The idea is that this would be, this would mean that this...

a reader is in the top, let's say 50, sci-fi readers on hardcover. So we'd need to like basically make that into like something visual.

Adam (47:45.081)
Yeah, I get what you're saying. Like how do we show that this person has read a lot of sci-fi books when they gave this review or just in general, yeah.

Ste (47:57.41)
Yeah, I was thinking just to make these, I mean, have just the visual indications. So, you know, okay, this is someone who has, like, this would be relevant to the review. So this person has a lot of sci-fi and horror reviews. So they're like...

Adam (48:23.544)
One idea I had around this was to have something like, let's see.

Adam (48:36.268)
where we show like...

Ste (48:39.352)
Oh, the number.

Adam (48:40.424)
Yeah, so we show like the number of books they've read in that genre within the little badge.

Ste (48:45.951)
Okay, oh yeah, that would be nice.

Adam (48:48.861)
So it's less about the badge level and more about the underlying achievement.

Ste (48:57.091)
Yeah, that'll work.

Ste (49:02.271)
this.

Ste (49:19.93)
Yeah, and that could actually, if it's in that format, that could actually sit here.

the icon from this one. So yeah, this user has, reader has 234 sci-fi reviews and.

Adam (49:39.805)
Yeah.

Ste (49:41.99)
That could work. It's an interesting way of using the batch system. I'll just put this here.

Adam (49:42.201)
Yeah, that could be cool. Yeah.

and

Adam (49:52.601)
Yeah, I think like I did some stuff in my journal about how we could get this. And I think it would be really easy. We kind of could just cache like a little genre stats objects on every user. And then when we show the review, we look into that object and just show whatever is relevant to the book review that is currently being viewed. That way.

Like, you know, if you're viewing, um, create Gatsby, you're not going to see that they've read 234 fantasy books. You're going to see that they've read, you know, um, 180 classics or whatever.

Ste (50:36.27)
Okay. That's nice, doesn't it? Yeah. I mean, that's how these could work. And they wouldn't even be, I mean, they would be closer to stats than badges, but they would like inherently be badges. Because if you reviewed like, okay, that's, that's really nice. Okay. That would balance out the date. So I'm good from a like design point of view.

Adam (50:49.262)
Yeah.

Adam (51:04.961)
Yeah, yeah, it's looking good.

Ste (51:06.91)
Okay, yeah. And for additions, took your advice and made them into, yeah, things you'd actually feel like you need to tap. So you move on to the book addition, yeah, the actual edition page and you can switch to that edition.

Adam (51:28.441)
Nice, yeah.

Yeah, these are these addition pages. I feel like I don't yet know how people are going to use them other than as like a source of information. Like, so I'm good kind of keeping it like this. And then, you know, as we, you know, if it comes out that we need more information on this edition page, like we need, you know, a rating for this edition or lists for this specific edition, then we can, I think, figure that out down the line. But.

Ste (52:00.49)
Mm-hmm. Yeah, I always found it confusing. I know Goodreads does different ratings for different editions and we would basically associate the rating with the edition at least as like a single like individual read, right?

Adam (52:01.303)
For now, just data.

Adam (52:24.801)
Yeah, well, it's right now, so you can read through a book multiple times, but you can only rate it, you can read through a book multiple times with different editions each time, but your rating is for the concept of that book, not for a specific edition of it.

but there is still the edition that you did read. So we could still like, you know, go into the data and see that even though the rating for the book is this, we could say like this edition has a higher rating than all the other editions.

Ste (52:45.607)
Mm-hmm

Ste (53:00.35)
Mm-hmm. Yeah, that seems, I mean, it's a bit complicated for us to, I guess, really delve into it. And I think from my point of view, like just reviewing a book and not reviewing

Ste (53:31.11)
other readers as well. Of course, you know, you might like rate an audio book less because you don't like the narration, let's say. But I think you would, from a design perspective or from a usability perspective, that would rather be mentioned as part of your comment rather than having like that audio book rated. So let's say you'd normally rate the book

Adam (53:42.369)
you

Ste (54:00.35)
book, because it's a good book, four stars and you listen to the audio book, you hate the narration, so it's a three star. I think it would be more relevant for people to see how you like the book. And if you had something, if something was wrong with the narration, you just mention it as part of your review. So written instead of letting people guessing,

Adam (54:08.841)
Yeah.

Ste (54:30.72)
So

Adam (54:32.801)
Yeah, I'd agree. Like, I also wonder, like as you were saying that, I was wondering if we need to indicate like what format or what edition they read in their review. Like, we'll know like what edition they've marked here, but maybe that's not here in the like the small review. Maybe that's actually, let me go down to this one.

Ste (54:54.75)

Ste (55:02.691)
Yeah.

Adam (55:02.741)
that's not here. Maybe that's like when you click on this and it goes to the standalone page, maybe on that standalone page, we can say the addition that they read.

Ste (55:11.53)
Yeah, perfect. Yeah, that's great. That's great. I'll mock it up. Yeah, exactly. And when you go to that individual review, you can see the actual edition that they've read. I find it like, you know, there's quantifiable data and like qualitative data. And that qualitative data is like finding out why someone like the book. So I'd rather for us to skew in

instead of being just like a quantity website, which is kind of like how Goodreads approaches it. So there's the rating and we're more granular with the rating and we're also trying to get people to say why they like the book instead of... A 4.3 rating doesn't tell you much, but the review that says the narration is crap and

know, you see where it's really good. Uh, and you see that, uh, that person. Reviewed a lot and is a supporter and they have lots of good reviews. You're way more likely to trust that. And that's what we want, you know, for say why they liked something.

Adam (56:29.583)
Yeah.

Adam (56:33.201)
They're not someone who just came into the platform, reviewed one book, and this is it.

Ste (56:38.671)
Yeah, exactly. Just get into the details. We want people to be discussing books and offering other people these details. Even for editions, yeah.

Ste (56:54.15)
OK.

Over here, over here. Yeah. Because it's like, uh, it has this cover that you can change. I mean, we can keep the like actual designs you're working on, but I was assuming that this, the, the header could like disappear here because you have, you'll have a cover underneath it. So, I don't know, or you can just say upload new cover and it would be like this.

Adam (57:17.861)
Hmm. Yeah.

Adam (57:24.901)
Yeah, let me, I, can I show you something that I was doing for this edit thing? It's.

Ste (57:33.19)
Yeah, wait, let me stop sharing. Here we go.

Adam (57:36.302)
It's a.

Adam (57:39.781)
So the use case for how, like what, what can happen when you're changing an addition's cover, there are like a couple of different options. Let me just share my screen and then we can talk through them. And I'll.

Adam (57:58.481)
this one

Adam (58:06.562)
Cool. So this is a very basic representation, but the idea is this is the cover that has already been selected for this book. And we'll have some kind of formula to determine if this is a good quality cover, a bad quality cover, or an OK quality cover. That way, people can see really quickly whether we think this is good.

Ste (58:25.694)
Okay

Adam (58:35.661)
There's kind of a couple different options on what can happen. One option is that you can upload a new cover. Another option is that you can select one of the existing covers that we've already saved for this book.

Ste (58:51.431)
Okay, are these covers from other editions or?

Adam (58:58.321)
Ideally, this should only be for this edition, but I think the way that our data is sometimes multiple editions end up getting books from neighboring editions. So I think our data will get better to the point where this is just for this exact edition. So ideally, this would, these would all look very similar, just with different heights and widths and clarity.

So it'd probably mostly look like these three, all for this one, and these ones wouldn't even be here.

Ste (59:36.75)
Okay, well this looks good.

and it's like really...

Ste (59:48.45)
complete, I guess, from an editing point of view.

Adam (59:50.217)
Yeah. Yeah.

Yeah.

Okay. Yeah. I'm going to, I'm going to keep like cleaning it up and making it like, you know, actually look better. But I was just trying to come up with a, with a user flow that made sense for changing a cover when you had kind of two options on what to change it to.

Ste (01:00:11.49)
Yeah, I'm suspecting the use case here would be someone sees a book that they really like and the cover is really low quality, so they're saying, okay, crap, I'm going to make this book better, so they go into the editing flow for that edition and they search for a photo online, they upload it as a new cover.

Ste (01:00:40.79)
I don't know, less than one megabyte or something just to not like crash our, I'm guessing we do, right?

Adam (01:00:49.861)
Um, I'll probably set it at like five megabytes and maybe even 10 megabytes for this because, you know, you could update a upload, a really big scan of it. And when we upload the file, we're going to optimize it anyways. So the, the JPEG that we save that people are going to start viewing is going to be. A lower, um, file size version anyways.

Ste (01:01:03.334)
Mmm, okay.

Ste (01:01:12.29)
Smart, okay, that's perfect. Yeah, so I guess this is the use case. So having those options already there, I'm guessing would be great, but as books get better, I mean, if it's a high quality cover, I'm guessing people would just like not change it.

Adam (01:01:33.241)
Yeah, exactly. Yeah. So I was probably, I was probably going to try to get this like edit covers out to completion rather than trying to do like every single field possible. And that way, like we'll get this out and then we can, um, add more fields to it later.

Ste (01:01:36.573)
That's it.

Ste (01:01:52.81)
Yeah, this sounds good. Covers are like, if we nail the covers, the rest of the fields should be easy. And we've already got people who are lining up to edit the info, so that's really good. And we'll do it ourselves as well. So that's going to be interesting.

Adam (01:02:01.962)
Yeah.

Adam (01:02:13.029)
Yeah.

Ste (01:02:14.191)
Great! Well, lots of progress!

Adam (01:02:17.401)
Yeah, every time I see the new book pages, I'm like excited to use them as a user, which is I think a really good sign. Like I want to be able to browse those reviews in that way. And I want to be able to just like explore around within a book in that way.

Ste (01:02:28.857)
Yeah.

Ste (01:02:40.83)
Yeah, well, that's nice. Yeah, I'm also like excited to get this out and they're close. I mean, I think we have a couple of details to nail down, but other than that, they should be like really good.

Adam (01:02:56.441)
Yeah. And then, uh, yeah, once we get the mobile and desktop prototypes done, um, we can probably do, like you said, like a handful of interviews and just see what people think and.

Ste (01:03:11.13)
Yeah, that's great. That's great. I'll do the desktop ones. Those should be easy. If you start from mobile, desktop should be easy. But yeah, it's close.

Adam (01:03:11.305)
Yeah.

Adam (01:03:24.761)
Sweet. Well. Ha ha. So,

Ste (01:03:26.07)
Great, awesome. Well, on that note, we wrap up higher cover number nine.

Adam (01:03:31.381)
Yeah, sounds good. I'm gonna go, I think we're gonna go see John Wick this afternoon, so I'm excited about that. Ha ha.

Ste (01:03:37.33)
Oh really? Okay, ah that's on my list as well. Yeah, we started a new Netflix series called Beef and it's like really good. Have you seen it?

Adam (01:03:43.361)
Oh, yeah. We just finished it last night.

Ste (01:03:47.79)
Ah, okay. Oh, yeah, it's really, really good. Really nice. Pretty exciting.

Adam (01:03:51.801)
Yeah. It's, I was watching a TikTok about it and they were classifying it, the genre as millennial existentialism and I'm like, okay, that's, that, that sounds about right. I like that genre. Cool.

Ste (01:04:03.131)
Yeah. Uh-huh. Yeah. Uh-huh. Yeah, exactly. One for us. That's good. Well, yeah. Well, happy viewing and, yeah. Keep in touch later. Bye-bye.

Adam (01:04:15.661)
Talk to you soon. Bye, see ya.