Lead product designer of Adobe Portfolio — an editor for showcasing creative work

Product design

The editor must enable the user to quickly and simply edit their portfolio. The UI is very minimal — it gets out of the way and allows you to focus on the design of your website. All changes you make happen live in the editor. I was going for simple, clean and beautiful. It empowers the user to: Easily edit anything they can see, manage and add content, responsively preview their website, and publish/update a live website.

'This is an amazing tool. It is a true joy using it and playing with it. UX at its best.'

'Adobe Portfolio makes designing the website of your dreams easier than ever.'

Gear Patrol

Involvement

Lead product designer
User experience (UX)
Creative director

Client

Behance & Adobe

Date

2015 - 2016

Honours

Nominated for a Webby Award

Credits

The engineering team at Behance for building this product

Onboarding

Above are a couple example screens of the first things people see when accessing the product — a very brief tour of the basics of the UI.

Editor

The editor UI is very minimal, putting the website you are editing front and center. All edits happen live as you edit and you can preview your website responsively on tablet and mobile at any time, in the editor. Everything can be accessed via direct access by hovering over elements and being presented with edit icons and options to edit. Managing and adding content and site settings are all done via the toolbar to the left of the screen. And the draggable remote to the right accesses the main editable features of whatever page you are currently viewing.

Panels

All the panels in the editor are draggable, so you can edit and see the parts of the screen you need to see while you work.

Adding and managing content

Two simple panels accessed via the toolbar allow the user to manage and add new content, including options to reorder (via drag & drop) projects in galleries, or the order of pages in the navigation, toggle content off/on, duplicate, edit or delete content, and of course add new content.

Specs

Above is one (of many) examples of specs created for areas of the UI that document the full functionality of the editor, to ensure all angles are covered. The developers build the product using these specs, along with prototypes. The panels all share the same UI elements (style, inputs, buttons, spacing etc...) so the experience is consistent, and learning to use the product is easier.

Editing colours

The colour picker was a nice opportunity to do something a little different. Much of the editor's UI is stripped back and minimal, so as not to distract from the design of your site. I wanted the editor to be simple, but beautiful. Good UI should be invisible (so to speak). But the colour picker was a unique part where the UI required something a little different to many of the editing panels throughout the product. I could also follow the design of colour pickers we see in all design software, but that seemed dull. Why not do something visually more inspiring.

The colour wheel presented here is fun to play with, clicking and dragging around the colour wheel to explore the colours (previewed live in the editor), and dragging the sliders below changes the colour saturation and lightness/darkness. Super useful is the palette of recently used colours — of course consistency is key in web design, so make it easy for the user to be consistent with their colour choices.

Aspect ratio options

Most layouts by default have aspect ratio cropping enabled for project covers, to unify the presentation and layout of projects in galleries. For me, one of the coolest features in the product is the ability to mass change the aspect ratio (crop) of all covers, so you can very quickly and dramatically change your layout.

Masonry

The option to disable aspect ratio, in turn enables the possibility of a 'masonry' effect in your layout, or more commonly (unfortunately) known as 'what Pinterest does'. This enables cool layout possibilities as exhibited by the upcoming Juco layout (seen here).

Customising layouts

Various options exist to customise the layout of project covers to dramatically change the look of your website. Like changing the aspect ratio of cover images, or changing the number of columns, widths, gutters and margins. It's all simple and quick to edit.

Resizing and cropping images

Uploading, resizing and cropping images is easy. Also, background images have all the same (CSS) options available to you as if you were coding the website yourself.

Browse and use Typekit fonts

Since Typekit and Portfolio are both Adobe products, there is a seamless integration of using any Typekit font you like to your website. This panel allows the user to browse and filter the full library of fonts.

Masthead feature

This is one of the first big feature upgrades for Portfolio, post launch. We held it back from launch to get out a more basic version of the product, get people using it and refine the product, while continuing to work on features like this behind the scenes. This allows you to add a cover feature area (masthead) to any page/project/gallery in your site, adding huge amounts of flexibility to all layouts.

Flexibility

Above are a couple examples of the masthead feature in action. The masthead has many options that can be turned on/off and customized to your liking. The masthead can also be positioned above or below the header, or above or to the side of the navigation in vertical layouts.

Publish to Behance

One of the main selling points of Portfolio is that it syncs with the Behance Network, meaning you can create a custom website using Portfolio and grow a network and gain exposure through the Network, by syncing your projects on both platforms. This is all optional. When creating a project on Portfolio, you are given the option to also publish to the Network, in which case there are further settings applicable to the Network (as seen above).

Project and Page Editor

The previous 5 screens all show the project and page editor. This is an evolution of the project editor on the Behance Network, importantly so as the products sync together, so there has to be some feature parody where editing projects are concerned. Creating and editing projects is done in isolation from the website content so you can focus squarely on your content, distraction free. You can add, edit, reorder and customise everything, including editing styles on a global level across all your projects, or making singular edits to specific elements.

Insert media

Hovering between elements on a project/page gives you options to add more content, including importing from Adobe Lightroom (a cool feature of the product).

Previewing your website responsively

The next two screens showcase arguably one of the most useful features in the product — the ability to preview your website as it will appear at different screen sizes, so you don't need to publish and refresh on your tablet or mobile, you can do it all in the editor.