Berkeley Electronic Press 


SelectedWorks is one of the 3 products offered by Berkeley Electronic Press.  The product is the smallest in scale, making it the best candidate for a modernization upgrade.  The technology stack includes Python, Django, jQuery, Bootstrap, HTML5/CSS3.

The product was redesigned from ground up and designed with mobile friendly-ness in mind.  Here's my process for the project.

The Big Picture

Whenever I embark on a new project, I need to understand the general flow of the entire product.  So, I spent some time with the veteran product manager and drew this up using Google Draw.

Transitioning to Cards

One of the main priorities for the new SelectedWorks was that we want to make sure that author's works and contributions were well recognized and showcased - making it the highlight of their profile.  The old site did not do a good job of doing that.  This was also a good starting point of the project as each of the author's work is considered as the smallest unit of transaction-able currency on this publishing platform.

This author's work is shown as a set of links which led them to the detail page of that particular work, no visual queues to entice a visitor to click on the particular work.  So I introduced and proposed the concept of cards - where informations can be chunked and summarized in a somewhat small space on the author's profile.  So I embarked to test different layouts of a card to present and pitch to the stakeholders.

Horizontal version of the cards in wireframe.

Vertical Versions of the cards in wireframe.

The one constant variable to the cards is that we know we liked showing a thumbnail to jazz up an author's profile and give users reasons and interests to want to click on a particular work,  but it was the balance of how much information we wanted to display that made us decide to go with the horizontal versions of the cards - the max height of the card was a bit more predictable with horizontal cards, and we can always truncate titles and description using either Django or CSS.

The Author's Profile

Now that we have decided to go with the horizontal-styled work cards, its time to put it to test in an actual profile. The profile itself needed a redesign as well.  The original profile had an old-school two column layout which badly needed an update.  So we decided to go with the tab approach - this way the author's work and information about the author can be separated, but giving it equal weight at the same time.

The original SelectedWorks profile look and feel.

Wireframe of the Profile's about tab.

Wireframe of the Profile's works tab.

The cards in a way, drove our process of the iterations of the designs of the profile.  There were many debates on whether that "about the author" snippet should be above in the profile header, or in the about tab itself.  We ended up with putting that snippet in the profile header where its a constant space independent of whichever tab the user maybe on, and they can always learn about the author at any given time.

High Fidelity

After the wireframes get approved, its time for high fidelity mockups.  I used Adobe Photoshop for all my high fidelities mocks.


Once the mocks are approved, its time for implementation.  I took care of the many aspects of the front-end development using Twitter Bootstrap, jQuery, AngularJS, and Django - being that the app was built on Python.  I strived for pixel-perfect implementation to the mockups rendered.

You can view the implemented version of the live website by heading to and for an example of what a profile looks like.

The Process

All the features that is currently live on SelectedWorks went through the same iterative process of design and creative thinking.   Keeping the users at the center of the design use case, mind you, the process that I took you through above is only the path of a visitor to the site.  There are also user stories of author's editing their profile, authors uploading their works, library administrators managing institution's collective work of all of their authors, etc.