#138 - Phase 1 Complete!

#138

                January 30, 2023

            #138 - Phase 1 Complete!

                On the reasoning behind our redesign, the launch of our redesign, and the reception to our redesign... 😁

View this email in your browser

#138 | 30 January 2023

Phase 1 Complete!

We entered 2022 with the aim of resolving a bunch of our repeated UX/UI issues. I was hoping we could do this without any large redesign effort.

I was wrong!

As soon as I started to play around with where to put extra functionality, or how to make existing features easier to spot and use, I realised I was fighting with the constraints of the current layout.

                    Screenshot of the old StoryGraph book list view on desktop. The book covers are to the left, with information panes on the right. Th information panes show a variety of text in different colours, and a range of buttons, links and dropdowns.

There's not a lot of room here to add extra buttons or text without risking making it cluttered or confusing.

Even though I knew what needed to be done, I was scared! We have millions of users, and while you can never please everyone, the worst case scenario would be to upset the active users who were currently happy with the product, and not improve, or even worsen, the experience for those who had previously tried the product and found it confusing.

I did months of usability testing, with a variety of cohorts, to help increase our chances of success, but despite the results being overwhelmingly positive, indicating our redesign proposal would be well-received and solve some current pain points, the closer we got to launch, the more doubtful and nervous I got.

Will people actually like it or were the results of my customer research a lie...?? 😬 😅

Since last time...

Phase 1 of our redesign is finally out! 🎉

I have to give a massive shoutout to Rob's wife, Saron Yitbarek, for all the work she did on this! She's an incredible friend to have. I'm so lucky to have her in my life. 🥰

Why "Phase 1"? Well, despite the product having a new font and slightly different general aesthetic, we decided to focus our efforts on the book page and pane to start with.

Here's what the list view looked like previously:

                    Screenshot of the old StoryGraph list view. The book covers are separate to the left, and to the right, is the book pane with a lot of textual information: book title, author, moods, pace, pages, publication year. Top right is a plus icon, and bottom left are three dots indicating further options.

Mobile view

                    A similar view to the old mobile layout, except for the fact that the information panes on right-hand side are wider, taking up 4/5ths of the screen.

Desktop view

And here's what the same view looks like now: 

                    The new mobile list view. The book covers remain to the left, but are larger and closer to the rest of the book information. Rather than being in a box, the information is now listed alongside the book cover. At the bottom of the book title, author, pages, publication year, and moods and pace, there's a read status dropdown set to "to read". To the right of that are three vertical dots, indicating a menu of more options.

                    The new desktop list view, which features three columns per book. The first column is the book cover, the second features the standard book information, including moods and pace, and the third column features the read status dropdown, and then a menu of buttons underneath: add to up next, mark as owned, and buy.

And here are the same series of screenshots for the book page:

                    The old mobile book page view. The page is divided up into boxes vertically on top of one another. The first box features the book cover, with the title and author listed underneath. The second box features all of the standard book information, with the read status dropdown bottom right. The third box features the blurb.

                    The old desktop book page. It shows a two-column layout. The first column features the book cover and a "People You Follow" section. The second column starts with the book information in a pane. Then comes the description. Underneath that are a series of links on the page: Browse similar books, start a buddy read, report missing information, etc.

                    The new mobile book page. The book cover is smaller and to the left. Alongside on the right is the book title, author, and pages and pub year info. Then comes the read status dropdown with the three-dot icon. Underneath are the genres, mood, and pace. Then there's a grey dividing line, before the book's blurb.

                    The new StoryGraph book page on desktop. Now there's a three column layout. The first column is the same as in the old design. The second column features the same information as before, but with fewer boxes and the Community Reviews show up there. The third column features a menu of buttons and links, including: add to up next, add to reading challenge, start a buddy read, and more!

We also released one of our most-requested features:

                    The same book page as shown previously, with the new layout, but in Dark Mode. The background is a really dark grey, text that was previously dark grey (seemingly black) is now a really light grey (seemingly white). The green cyan accent colour is more of a blueish colour.

Dark Mode is finally here! 😎

And the reception to all of this has been incredible:

                    A series of tweets praising our new design and Dark Mode. The top three read: "I love @thestorygraph's new look. It's better than the previous one. It looks so clean"; "Opened @thestorygraph and the update is just so beautiful welcome dark mode!"; "The new @thestorygraph update changed the font and i am OBSESSED. The new UI is delightful."

I needn't have been worried at all!

Hindsight, eh? 😆

I should remind myself of this once we get on to Phase 2, 3, and beyond!

Next two weeks

It's time to go back to the stats work we were doing at the end of last year.

We'll also be starting to develop our upcoming reading streak feature!

What I'm reading

I've decided to do one reading challenge this year: @aishathebibliophile's 23 Short Story Collections in 2023.

Rather than saying "short stories aren't for me", I've decided I just haven't read enough of them to find the best ones for me! After all, human connection and conversation revolve around short stories! I think this challenge will help me on my quest to discover my first five-star collection.

To that end, I've picked up Kirsty Logan's Things We Say in the Dark to cover the "Horror-esque collection" prompt!

                    Three-column book pane for Things We Say In The Dark. The first column features the book cover, a black cover with white text on top, and cut-open fruit in the centre. The author's name is in red text along the bottom. The middle column, features the book title, author name, number of pages (240), publication year (2019) and tags: fiction, fantasy, horror, short stories, dark, mysterious, slow-paced. The third column features a progress bar, 9% filled, my start date of Jan 28, 2023, the read status dropdown set to "currently reading", a "mark as 'finished' button", an "owned" label, and a "buy" button.

Have a great week,

Nadia

P.S. Know somebody who's an avid reader or would enjoy following along with this journey? Please do forward this email to them! Thank you. :-)

Haven't tried The StoryGraph yet? Check it out today!

Love the app? Consider upgrading to our Plus plan!

Want to volunteer? Apply to be a Librarian!

Use Mastodon? Check out our server!

Were you forwarded this email?

If you liked what you read, you can subscribe for future updates and catch up on past ones.

                    Instagram

                    Twitter

                    Facebook

Subscribe for a behind-the-scenes look at my StoryGraph founder journey and beyond.

Want to change how you receive these emails?

You can update your preferences or unsubscribe from this list.

Don't miss what's next. Subscribe to The One-Woman Dev Team Diaries:

Your email (you@example.com)