Web App Redesign

My recent work was to redesign a web application used for designing mobile applications from the predefined templates. Today I will write about the redesign process of this application and about features and tools I worked with.

Tasks

There were two main tasks:

1. to design layout and appearance of the entire editor and
2. design how the user should move between Design Page and Flow Page and distinguish these two pages.

At first I reviewed the assignment and broke it down into smaller tasks:

Navigation Bar Redesign

The first part of the redesign was creating a new Navigation Bar, where all information and tools are discoverable and easy to use.

At first I divided Navigation Bar into four parts:

1. Project Menu,
2. Tools for Working with Artboard,
3. Project Info and
4. Tools for Working with Screens.

Navigation Bar Structure

1. Project Menu

Project Menu contains:

1. Options for Working with Project (Publish, Connect, Delete Draft),
2. Info Section (About, Help) and
3. Close Option.

Project Menu Structure

I placed these options into Project Menu because they’re used once upon a time and there is more space available for other tools consequently.

2. Tools for Working with Artboard

There are three tools used for Artboard control:

1. Switch between Design and Flow Page,
2. Mode Selection,
3. Zoom Control.

Tools for Working with Artboard

Switcher consists of icon, project name and colored stripe:

• icon helps with faster orientation,
• active item is colored and also marked with colored stripe above it because of the color blind people.

Mode Toggle contains current mode icon and current mode name:

3. Project Info

The Project Info was originally quite long and placed to the left side of the Navigation Bar:

Old Navigation Bar

I removed .mdl suffix from the Project Name and moved it to the middle of the Navigation Bar:

• Project Name is shorter and simpler,
• Project Info alone is more discoverable and
• switch between Design and Flow Page remains on the same place (left side of the Navigation Bar).

New Navigation Bar

I used different colors for Project Name and Project Draft/Version Information to distinguish these two items:

Project Name and Draft / Version Distinguishing

4. Tools for Working with Screens

I grouped Device and Orientation into Device Settings Section and Preview and Device Preview into Preview Section:

Tools for Working with Screens

Toolbar

Toolbar on Design Page is made up of four parts:

1. General Design Settings — App Design Settings,
2. Predefined Design Items — Pages, Components, Screen Flows,
3. Tools for working with arrangement of components — Outline and
4. Tools for working with data — Data Model, Dependencies.

Toolbar — Design Page

Toolbar on Flow Page has only Screen Flow Properties:

Toolbar — Flow Page

Panel & Previews

I made the Left Panel almost a half narrower than the original Panel. Therefore it occupies much less space than the old one.

I also adjusted the thumbnails to “life” Previews of each Screen. The main advantage is that the user knows what is the exact content of each Screen and is not referred just to the name of the screen.

Old vs. redesigned Panel

Every Preview is 96 × 155 px wide. I utilized Golden Ratio Calculator to set the ideal dimensions:

Preview Size Calculation

When creating Previews I worked with Repeat Grid feature of Adobe XD.

I prepared .txt document listing the names of each Screen and just pasted it into the name placeholder. All the names were updated accordingly.

I repeated the same process with images.

Prototype

Finally I created a clickable Prototype in ProtoPie application:

Web App - ProtoPie

The Prototype consists of:

1. Scrolling,
2. Preview Window Opening / Dragging / Closing,
3. Project Menu Showing / Hiding,
4. Switching between Design and Flow Page,
5. Panel Showing / Hiding,
6. Toggle between Light / Dark Mode.

1. Scrolling

The Artboard scrolls vertically and horizontally just by dragging:

Scrolling

2. Preview Window Opening / Dragging / Closing

When the user clicks Preview Button the Preview Window appears. The Preview window is draggable so the user can move it wherever he wants.

Preview Window Opening / Dragging / Closing

3. Project Menu Showing / Hiding

The Project Menu appears when the user clicks Project button:

Project Menu Showing / Hiding

4. Switching between Design and Flow Page

When switching between Design and Flow Page, the color of icon changes and the stripe moves above the active item.

Tools in toolbar changes according to Page.

When Flow Page is active, the arrows connecting each screen appear.

Switching between Design and Flow Page

5. Panel Showing / Hiding

When the user clicks Screens Icon the Screens Panel appears and the content moves to the right. When the user clicks the icon again, the Screens Panel disappears and the content moves back to it’s original position.

Panel Showing / Hiding

6. Switching between Light / Dark Mode

Switching between Light / Dark Mode changes the Editor color.

Switching between Light / Dark Mode

Auto Animate

I also tried to make the animations with XD’s new feature — Auto Animate. The workflow was absolutely amazing.

I draw the initial state of the Artboard:

Initial State

Then duplicated the Artboard and modified objects to the aimed state:

Finally I just set the Action to Auto Animate in Prototype Mode and the animated transition between Artboards was created:

Only thing that I couldn’t do with Auto Animate was dragging the Preview Window.

But still, it’s a great feature that’s worth trying out and it saves a lot of time.

Protopie vs. Adobe XD Prototypes

You can compare both prototypes below:

Protopie Prototype

Adobe XD Prototype

And that’s it. Thank you for reading this article — hope it was helpful and if you have any comments just write them down below this article.:)