Are.na is a place to save content, connect ideas, and create collections over time.
Users primarily interact with blocks, which are pieces of content containing images, videos, pdfs and more. These blocks can be added to various collections, which are known as channels. This process is called "connecting".
This model of building webs of knowledge over time has led the community to describe it as "a garden of ideas", or "playlists, but for ideas". For me, it acts as my digital notebook of inspiration and ideas, and I use it almost everyday.
In October 2023, I was in the process of learning SwiftUI, and thinking of what to build as I went along. Are.na's mobile app came to mind – it had always felt a little slow and buggy from my and other users' experience:
It's built with React Native, which is known to be less performant than native solutions, with more compatibility issues as well. So I found myself thinking that this could be a good opportunity to build a new iOS app for Are.na with SwiftUI.
In terms of feature parity, the current Are.na app is more or less on par with the web client. It's serviceable, but I found myself only using it to check my feed and notifications, and occasionally connecting things.
I'm not inclined to do anything outside of that because of the aforementioned performance issues and bugs. There's also friction involved with the workflows I'm most interested in, namely diving into rabbit holes, connecting things quickly, browsing blocks, and saving images.
With those in mind, I began hashing out some ideas, bug fixes and quality-of-life improvements that I wanted to work on.
There is a public channel set up by the Are.na team for collecting feedback and feature requests, effectively acting as a forum for users to express what they want to see fixed and/or implemented:
I kept it close by as a reference throughout development, and also sent out a Tally.so form on Twitter and Posts.cv, asking users how they currently use the Are.na mobile app and for any suggestions on improvements or new features.
Since most of my network comprised designers / software engineers who either use or have heard of Are.na, I figured I would be able to get good responses.
In the end, I received over 150 individual suggestions, with the following topics appearing far more frequently than others:
To organize everything, I used Linear for issue-tracking, compiling all the relevant feedback and requests I got throughout the development process.
I tagged each issue as either a feature, bug fix, or improvement. This system allowed me to leave no stone unturned when it came to improving the overall experience of the app.
And with that, it was time to start building.
A faster and more refined mobile app, Are:na is optimized for browsing channels and blocks, going down rabbit holes, and making connections.
Building with SwiftUI means leveraging Apple's native framework for the platform, ensuring maximum performance. This approach eliminates the overhead associated with cross-platform solutions like React Native.
What that ultimately means is a fast and smooth app. Helped along by native fluid animations and lazy loading techniques, it's a polished experience that feels right at home.
In channel view, you can switch between various viewing formats, such as the normal 2-column grid, but also a more condensed 3-column grid, a more focused single-column view, and a table view that contains block titles and original authors.
You can also customize the sort order within a channel, allowing you to view blocks from oldest to newest, or vice versa.
Also new are the ability to swipe between blocks in a channel, enabling a slideshow-like viewing experience, as well as zooming functionality for blocks that contain media to examine finer details.
The app also allows you to bookmark any channel for quicker access. This is especially useful if you have a handful of channels that you are constantly referencing for ideas or inspiration. Think of it as your personal stream of reliable content.
Because browsing should be interrupted as little as possible, user actions can be dismissed as easily and quickly as they are surfaced. This is done through the use of context menus for common actions like saving images or visiting a URL, and a drawer for connecting content.
Navigating Are.na is all about using your intuition and following your curiosity, traversing connections and going down rabbit holes. Over time, you build various paths for yourself to walk down later on, and construct contexts for yourself and your ideas.
However, the app currently doesn't give you a good way of keeping track of those paths, apart from connecting blocks. Say you start with a channel, and after some time going down a rabbit hole, your path looks like this:
Now, what if you wanted to go back to a previous channel you visited, but not lose your current trail?
In the current app, there's no good way of doing so – to navigate back is to lose track of your current progress.
So that's where the history view comes in, which automatically records any channel, user or block that you visit within the app. Because it's in a separate tab view, it enables you to quickly jump back to any point in time during your browsing escapades.
In this initial release, the history view is very simple in both its appearance and functionality – it's a catch-all collection of past channels, users and blocks visited, organized in a single column. I went with this route because it was straightforward to design and implement, and most importantly easy to parse and understand.
An extended version of this feature would allow users more granular control over what type of content is recorded. For example, choosing to record only channels but not users and blocks visited, or only URL blocks, etc.
Other explorations include a webOS-like carousel for traversing paths, with rich previews of the last viewed content for better context of what was viewed:
I thought it would also be nice if the app could automatically detect the start and end of a path, and bundle it as one rabbit hole to display in the history view. Then, it would record multiple rabbit holes over time like so:
These explorations were scrapped due to time and technical constraints, but I plan to revisit them in the future.
The app includes light and dark modes that can be set independently of their device's system theme (which the current app doesn't support), along with custom app icons.
It's especially nice for a media-rich platform like Are.na, because images and gifs just pop.
Last but not least, there's a homescreen widget that displays a random block from a channel that users can specify, and it refreshes every 5 or so minutes.
It was relatively straightforward to implement with WidgetKit. It mostly reused the logic that I'd already wrote for the main app.
I stuck closely to Are.na's understated and almost skeletal interface. Following their restrained approach to design, I stripped back color and ornamentation to let the content shine.
Though, to distinguish my app from Are.na's, I softened most corners of the user interface.
Sticking closely to Are.na's design also meant being very deliberate about some feature requests, one of which was showing follower / following count on a user's profile. I personally wanted it as well, but didn't want it to be prominently displayed, because Are.na is not a social media platform.
So you'll need to tap into the followers / following tab to view it, and even then it's hidden beyond the bounds of the scroll view. It's not emphasized in any meaningful way; it's just there if you're curious, nothing more.
I also experimented with Rive to create playful animations that not only give character to the app, but also act as guides on how to use the various new features.
To be honest, I don't use the app any more than Are.na's official mobile app. In fact, I sometimes find myself still reaching for the latter just to see my feed and notifications.
I thought I would go down more rabbit holes, or check my bookmarked channels more often, but those simply did not happen. I realize that I'd rather do all of those on a larger screen.
Still, after its TestFlight release, it was well-received by the community, with ~1,000 users signed up, alongside a lot of good feedback and kudos, which I really appreciate.
I also got the opportunity to chat with one of Are.na's founders, Charles Broskoski, about the project, as well as potential collaborations in the future. It was also featured in their Q3 + Q4 2023 Investor Report.
Addressing more user needs and conducting more research
Closer collaboration with users and founders
Working around technical constraints
Despite a few hurdles, I'm satisfied with where the app eventually landed, especially for a first attempt at building with SwiftUI. If I were to build a version 2.0, I would prioritize:
These require either significant engineering lift, or access to Are.na's internal APIs, or both, making them longer-term goals.
Batched media uploading in particular is an interesting problem, from both a technical and design standpoint: on one hand, it's annoying to only be able to upload one piece of media at a time. On the other hand, it makes you more prone to connecting random media with less intention. Implementing this feature also involves addressing rate-limiting, chunking, and duplication issues. The complexity of these factors makes it a nuanced problem to solve.
In fact, Are.na as a whole has many similarly nuanced problems that often can't be solved with the usual approaches that platforms like Pinterest or Instagram take. That's what I find most interesting about it, and why I enjoy using it and working on projects around it. I plan on writing a fuller article on this in the near future.
I was digging through my Figma files in the middle of writing this and found these old mockups, circa January 2022:
The seeds for this project were planted almost two years ago, and I'd been thinking about building Are:na for a while, but I'd only finished a semester's worth of computer science then. I didn't know how to build it, or even where to start.
So I'm glad that I finally saw that through with this project. Feel free to download and check it out here.