Go Home

WebBites.io

Bookmarking, made accessible.

Many bookmarking tools are so text-heavy that they cause accessibility issues to users with visual impairments or learning disabilities such as Dyslexia. As someone with Dyslexia, I understood that first hand, so I set out to build the most accessible bookmarking service out there.

If you'd rather try WebBites for yourself, head over to webbites.io




Fig.1. WebBites.io in its current and ongoing iteration

Protoype it

The very first prototype, designed and built-in one-weekend using Vue.js and FireBase, served as a very simple MVP and starting point.

The concept and interaction of the early site was simple: the user inputs a URL, and a screenshot of the site gets added and displayed back to the user. Having an accessible interface was key, so from that point, I started using Spectrum, Adobe's design system and JS framework, which has a strong focus on accessibility and is WCAG 2.1 compliant.

Fig.2. Early concept screen and working prototype and progressive web app

All about the Feedback

Since the early stages in 2018, until the first beta was launched in 2020, users have been an integral part of the project. During all stages of the process, I have constantly been reaching out to potential users for feedback as I was designing and developing WebBites.

The feedback was gathered from posting on Facebook groups, asking on Reddit subreddits, to online surveys on the landing page. It was during the user feedback sessions that I understood the problem and the lack of bookmarking tools made with accessibility in mind.

Fig.3. Feedback from Reddit

The Data

The simple question I posted on the Innovation Hackers FaceBook group generated a considerable amount of interest and insights. The comments varied substantially, from users stating that they don't see any value in hoarding digital content to others using multiple services like Pinterest, Pocket, Google Keep and browser bookmarks.

Independently of their tool used, two main patterns repeatedly appeared:

    ·
  • Users save data across multiple services, making it hard and annoying to find and retrieve.
    ·
  • Bookmarking tools quickly become an uncontrollable mess and information is hard to find.

Fig.4. A sample of some of the answers given

The Insights

The information extracted from the research was synthesised to a few key insights:

    1
  • Users save data across multiple services, making it hard and annoying to find and retreive.
    2
  • Efectively managing bookmarks is too time-consuming and labour intensive, users eventually give up.
    3
  • Many users reported having built their system around note-taking apps, mostly due to their simplicity and ease of use.
    4
  • Speed is massively important, hence why some rely on the convenience of instant messaging to store URLs.
    5
  • Users are saving URLs but are not going back to visit the saved sites, losing them in oblivion never to be seen again.
    6
  • There is a lack of an external and intrensic motivation to go back to the tool with saves sites.

The Approach

Instead of waiting until the product is complete to start iterating, the democratisation of the internet has enabled a leaner and more empathetic type of product design. The MVP was given to a small portion of users to reflect on their feedback and iterate accordingly.

The implementation of an iterative development process resulted in the adoption of features and design choices that have been built along with the end-user. The design of the service is still under development and may be subject to future changes.

Fig.5. Interactive wireframes, built on Principe.

The Development

The service is currently under development and a series of extra features such as a Chrome plugin and mobile offline access are all also planned for the future. In the meantime, sign up for the open beta at https://webbites.io


Full tech and design stack:

Fig.6. WebBites Main View

My Playground

IBM