← Back to all work

Universe · 2024

Universe's Website Editor

Led the end-to-end design process to build an entirely new website editor for Universe — an Apple Design award winning iOS app and web app.

Role

Lead Product Designer

Skills

  • User Experience
  • Information Architecture
  • Motion Design
  • Prototyping
  • User Testing

Team

  • 1 Product Manager
  • 1 CEO
  • 3 Web Engineers
  • 4 iOS Engineers
  • 1 iOS Product Designer
  • 2 Brand/Template Designers

Company

Universe

People could only build a desktop site that looked like a giant version of their mobile site.

This dissatisfaction with the responsiveness of the site led to many leaving Universe for other more flexible website builders.

Goal
Redesign the website editor so it allows for both desktop and mobile layouts while being editable on any device.
Limitations
Some blocks won’t support undo/redo because they have their own save states or connect with external APIs. Won’t work in iOS app.
Success Metrics
Neutral or improvement to main business metrics such as new users, trial-to-sub, and retention.

Creating a new editor architecture

Exploring other editor approaches

I looked at how competitors approached desktop and mobile website builders.

Free-form (Wix)Desktop and Mobile Grids (Squarespace)CSS Grid (Framer)

Grid concept explorations

What if the grid adjusted to the content and the browser?

Root scratch pad grid concept exploration

Final Approach: Flex Grid

After many design reviews, we arrived at a grid editor shared by mobile and desktop where content is able to scale to fit the browser size.

Final Flex Grid editor

How does the Flex Grid work?

The grid fits to the content instead of the content having to fit into a rigid grid, like the previous editor.

Rows resize to fit content

Rows resize to fit content

Gutter space outside the grid

Gutter space outside the grid

Page content sizing

Editor blocks page sizingEditor blocks page sizing across breakpointsEditor blocks page sizing across breakpoints

How do blocks work in this new system?

Text block editor — Style tab with text formatting controls

Block Settings

Creating some new settings required creating new components, like segmented control, and design them to be useable across many different contexts.

Block Size

Set the content size based on aspect ratios or a fixed pixel height.

Block size settingBlock size setting — aspect ratio and fixed-height optionsBlock size setting — aspect ratio and fixed-height optionsBlock size setting — aspect ratio and fixed-height options

Spacing

Padding and margin to add optional space around the content.

Margin spacing controlsPadding spacing controls

Crop (Image/Video)

How the content should fill the container.

Positioning

Where to anchor the content within the block container.

Image crop and positioning controls

Accordion Block Editors for iOS and Web

For the first time, we created a consistent design language for the blocks across iOS and Web App.

iOS designed by and in collaboration with fellow designer Alex Burdin.

iOS

iOS Block Text — MainiOS Block Text — StyleiOS Text — SummaryiOS Text — Expanded

Web

Web Text Block editorWeb text block editor — Style tab and color pickerWeb text block editor — Style tab and color pickerWeb text block editor — Style tab and color picker

Sites made with Flex Grid

River HousePaper ScrapsBarbara restaurantKascaCanvas PaintingsMOOOD STUDIOSFleetwood (collage)river honey studiosgreen flash projectsahava studiosMr. Potato WorldKyle Fink MusicBlack Tech GlobalPokemon TCG Card StoreAnthropoceneFit Girl BombSlam Central Wrestling

Follow Up Features

Stack Block

Allow content to automatically adjust how it flows across devices.

Stack Block follow-up feature

Multi-select

Give creators the ability to select multiple blocks and combine them into Stack or Group Blocks.

iOS multi-select interaction

Final Designs

Launched in August 2024, the new editor unfortunately had little to no impact to the major business metrics like user acquisition, trial-to-sub, and retention. However, we did receive many positive reviews from existing users.

What I learned

  • Good work takes time, especially with complex projects.
  • Document EVERYTHING. This project had a lot of micro-decisions and I was always thankful we wrote out decisions and reasoning in organized Notion docs.
  • Don’t be precious about an idea, new context will come up that changes how we’re thinking about a feature.
← Back to all work