#503product

Desktop:

https://www.figma.com/proto/mZTT36vZdvo33ZQlNVpiNu/503-Desktop-Prototype?page-id=0%3A1&node-id=1%3A534&viewport=385%2C-183%2C0.1430063545703888&scaling=scale-down

Mobile:

https://www.figma.com/proto/QQ2MkUM3BzEVSt3fyq3ahQ/503-Mobile-Prototype?page-id=0%3A1&node-id=23%3A1187&viewport=1241%2C105%2C0.09036967903375626&scaling=scale-down

Promotional Site:

With the desktop prototype fully completed, I’ve moved on to the mobile screens.

Luckily this took much less time, as all of the desktop components had mobile variations, so the prototype settings persist across.

Now for the most painful part of the entire design process... linking everything into a clickable prototype.

Luckily I set the base components up in such a way that it can affect all the screens at once, but for the individual panel options, I had to do everything manually... the pain. At least it works now though!

Now to the main event. I produced all the various combinations of visuals on the screen, with different control panel configurations, both collapsed and expanded.

The brilliant thing about exporting the visuals as GIFs is that when you play the prototype, the visuals animate!

Aside from the main control panel, there are other sections to Synthesesia that I considered, such as the track listing, shortcut menu, and video clipping flow.

These particular screens don’t need a background container, as Figma can treat these as real modals which overlay on the content.

Next up on the feature list is the default starting screen, and the flow around uploading songs to the queue.

For the empty state, I thought that it would be beneficial to show helpful keyboard commands (which can be accessed elsewhere).

Alternating between the light and dark themes, I first looked at the loading screen and onboarding flow.

For the loading screen, I decided to incorporate the logo as a nifty loading element, where different colours fill up the logo in quick succession.

As for the product onboarding, mentioned in previous posts, I’m treating the onboarding as a quick introduction to Synthesesia, with glances at different features to familiarise the users, so they don’t go into it completely blank.

The final screen is a considerate confirmations screen, just to double-check that they don’t have epilepsy or other similar conditions.

With the visualisations and lo-fi flows out of the way, it’s time to look at creating the hi fidelity screens for Synthesesia!

Whilst I have produced plenty of project in the past with design systems and fully fleshed out component libraries, I don’t think the scale of this project really needs anything more than a component sheet and typographic styles.

Where some complexity finds itself is in the separate light and dark themes, as I’ll need to setup the component structure to be able to easily hot swap styles, without breaking prototype links.