Subset

The Daily Subset

Each edition contains 5 sections that start with an embedded tweet followed by a few paragraphs of commentary to add context. This is the current structure:

• Design & UX: I like starting with something visual. It could be purely graphic design, interface design, or even something related to design thinking.

• Development: This section is more to do with the nuts and bolts of building a product. I'll talk about code, tech stacks, data, or tutorials.

• Marketing: I'll talk about building a brand and getting the word out.

• Feedback: I take a new product and share ideas to make improvements. This section is about building the instinct to make continuous improvement second nature.

• Wildcard: It's nice to end with something more philosophical and often inspirational in nature.

With the latest design change on the hero, the transition to new subsets below the fold just didn't feel right. Going from a bright image to light grey just felt too stark. So I've added a dark background wrapper. I plan to add this design to individual subset pages.

I'm exploring a new visual language for Subset. The flat/minimal design is fine, but it doesn't evoke an emotional response. It's pure utilitarian.

I want users to feel like they are in a peaceful, expansive environment. So I started dabbling with Midjourney to try and create AI-generated images in that theme. After a lot of trial and error I came up with a style that combines mid-century, minimalism and neo-precisionism. I'll likely use that style to generate images of cityscapes, libraries, and parks. Then I'll need to figure out how to effectively incorporate these images into the interface.

Here is my first take on a new homepage in the style.

I made a few small iterations to the homepage to improve the design and UX.

1. I made the hero height 100% of the viewport's height. This is a bit of a trade-off. It looks nicer and will give the primary heading more exposure. But it also eats up a lot of real estate and pushes the secondary content below the fold.

2. I introduced new cards below the hero to show approved subsets. This is a much better design than the previous hard-coded treatment.

3. I added stats to the subset cards.

Rereleased XP giving

I had to rewrite a lot of the code to handle giving XP. I think I've got it working as expected with minimal testing. I've released the new system, but I'll continue testing to make sure I haven't missed any edge cases.

Released new Subset creation flow

My initial architecture for building subsets was overly complicated. I made the premature optimization to try and accommodate 2 use cases in v1:

1. Knowledge library - I expected users to initially create a personal library of knowledge. Each unit of knowledge in their library would be called a "resource" which would essentially be an annotated link to an article, tool, etc.
2. Subsets - With a library of knowledge, users could create subsets, a collection of resources on a topic.

Sounds great, but the workflow was just not intuitive. While using the product, I found myself in the "publishing resources" mindset most of the time. So If I set out to add a resource to a subset, I'd first need to add it to my library, then go into subset editing and find my resource to add it. I thought I had some clever solutions to make that process less painful. But even with a drag-and-drop interface with thoughtful filtering, it just felt fundamentally off.

So I've temporarily removed the idea of the knowledge library and made it so resources are added to subsets inline. There is still design/UX work to make this a smoother process, but it already feels so much better to me.

Todo:

1. I need to reintroduce the XP giving functionality to be compatible with the new schema.
2. Continue working on the design/UX of the subset workflow.

The subset creation screen is now saving subsets in the database! I've also upgraded the design and some of the messaging. (still needs work)

Next steps to launch v1 of the new subset creation workflow:

1. Update the subset edit screen
2. Update the rendering code on the subset page to be compatible with the new schema
3. Migrate old subsets to use the new schema

Bonus todos:

1. Update XP system to use the new schema
2. Iterate on the design/UX

I've made progress wiring up the data for the new Subset editing interface. This probably gets me 80% of the way to releasing v1. I'll need to remove XP giving from Subsets to get this interface out sooner. Then I'll start on connecting XP giving to the new schema.

Figuring out how to structure my list of links so I always have an Add Link button between each resource was surprisingly annoying. I built a React component to contain the form+preview along with the Add Link button above each component. Then I added an additional Add Link button at the bottom of the list.

This seems to have the desired effect.

One of the challenges I'm facing with the new Subset creation workflow is figuring out where/how to introduce the save button. Here are a few things I thought about as I came up with a v1 solution:

1. Autosave is nice if it works well, but it introduces a lot of complexities. It is frustrating when you publish something in a half-baked state. So I believe you need a distinction between save and publish. Your work automatically gets saved as you make changes, but you must hit the publish button to make them live. I'll eventually likely move in this direction. For now, I'm going to go with a simpler but clunkier UX solution, a single save/publish button.

2. Positioning the save button is challenging when dealing with a page containing a header combined with a long list of links. You can't put the save button at the bottom of the list because users might not realize they have to scroll to the bottom to save...and that feels clunky to me. Putting the save button at the top is also clunky in cases where you scroll down to edit, then have to scroll up to save.

Adding a sticky save button makes a lot of sense because it is always visible no matter where the scroll position is. My initial thought was to make a "table of contents" component that sticks to the right of the links. But that feels out of place, and you must accommodate narrower screen sizes. So I settled on a bar that sticks to the bottom of the screen with the button centered.