AtomicWriter: UI/UX Design

AtomicWriter is a Chrome extension that helps content creators write for their audience and the internet. While the functionality of the application was loved by its large user base, its previous interface was unintuitive and confusing. As such, attracting and maintaining new users was an uphill battle. I was tasked with doing a total redesign to make AtomicWriter more user-friendly, appealing and enjoyable.

A whole suite of applications sharing a unified identity was developed to support AtomicWriter. 

One of the first problems I tackled was the name. Previously, the then WordPress plugin was called Atomic Engager and had a heavy, dark tone. I brightened up the personality of the soon-to-be Chrome extension and lead a brand brainstorming session during which AtomicWriter was renamed. I defined a brand identity for both AtomicWriter and the soon to be AtomicSuite that best suited the intended tone of voice that fit in yet stood out from competitors.

I solved many of the usability issues by cutting down the number of steps and creating a new system for communicating information. The extension now walked you through its scoring process and then offered a very clear interface explaining how close a user is to their score and intended knowledge level. The dictionary was also moved from the hidden backend so users could easily and visually make changes.

The functionality of AtomicWriter is extensive. Rather than try to compact so much information into one module I split it up into three when editing is occurring. This allowed users to focus on improving their content's title, format, and readability separately rather than being overwhelmed by doing so all at one. The separate editor modules also allow users to just highlight what they wanted to focus on.

And here are some promo graphics!

Early development required lengthy assessment of user flow. As time proceeded, flow chart became more visual (so the whole team could asses with ease). The challenge was to cut down on onboarding steps. This was hindered by technology that had many levels of user authentication and permissions. Here are two samples of such charts.

For a long while the bar concept was pursued. Unfortunately, this did not test well as there was too much information all at once.

Everything was scrapped. The team started from the ground up. That is when the multiple modules came to exist. While inspiration had come from the mobile world, an extension has the advantage of having a whole screen worth of space. This simple solution meant elements appeared and disappeared when they were needed. Users didn't have to worry about them, and they were familiar to anyone who's used a word processor.


using allyou.net