In 2015 I worked on 6-week engagement with a growing startup company called Written, located in Austin, Texas to design the next iteration on their product.
Written is unique because they connect highly-trafficked content owners with big-brands looking to attract new customers in their sales pipeline. The actual application acts as both a marketplace, campaign monitor, and analytical tool.
My role was as lead product designer on the project, and I was tasked with expanding & evolving the user interface from the current UI.
The original UI was built on top of Twitter Bootstrap and wasn't exactly designed, rather engineered to meet a lot of functional requirements. At first, understanding the business of Written was really difficult, and then understanding why they had created all of this different functionality was crucial in determining a strong UI. Overall, being an expert on the why's of the interface, informed my decision-making in removing & combining elements from the interface.
The design below is for the content owners of Written and it definitely works for their needs, but brands and the people purchasing content needed a lot of functionality and a lot of ways to discover great new content. This just wasn't going to cut it.
Taking a look at the original concept you can tell that the analytical element can be really useful, but it's not very engaging. I also thought the left side navigation was starting to get so populated with list-items, that having large hit areas for navigation wouldn't be feasible vertically.
Being able to condense the analytical component into a tabbed navigable element kept the functionality intact, but something I was especially proud of was introducing a timeline-based tool for seeing how different content is faring chronologically, as it happens.
Content Purchaser Tools
Creating a button, which lead to a modal for advanced functions allowed for us to remove some of the clutter from the interface.
A big part of Written as a customer is being attracted to highly-visible, highly-trafficked content that is up for sale. The original design for Written on the listing screen had no visual hierarchy, and it didn't leverage the great imagery that might be already present on some of these webpages. By putting images like these into the design, it increases the amount of conversions by making some content more important than others.
However, we still wanted to keep a way for high-volume users to be able to see a lot of listings and so we included a toggle button which would switch over to a more dense view, lacking any hierarchy in the listing itself.
Part of Written's bottom-line comes from getting big-time brands on board with their services and one of the ways that was considered in attracting them was by sending them links to curated content selections in the style of the application as a non-user. For this I decided that continuing with a visual hierarchy for the listing would be more attractive to prospective customers. Making the content appear successful and highly trafficked would lead to a better chance of converting prospects to customers.
Creating the detail screen came with the requirement of showing how each type of html markup may appear in the detail screen since much of the content is being imported from existing webpages.
Approving a Listing
Once you've shown interest in a listing, the content owner is contacted by Written, and when it's ready to be purchased, you can then view the status of it here. This screen is very dynamic and acts as a calculator when determining what type of license will be best for the purchaser's needs after getting approval.
After finishing the project, Connor Hood of Written went on to develop the application's new user interface and they are currently still going strong, acquiring more customers, and continually testing the interface