The goal of this story was to allow the user to add posts and replies to a conversation in the Workshare mobile application. Visual and motion design needed to deliver an elegant, familiar and easy-to-digest experience for those actions. Each post or reply had four different states — regular, pending, successful and offline — that needed to be visually distinct to allow the user to feel in control.

Selected screenshots of the designs:

The Process ​​

1.

DEFINE

Stakeholder interviews to define the goal, scope and constraints of the project.​​

2.

IDEATE

Creating design variations and ideas in collaboration with the UX designer.

3.

PROTOTYPE & REFINE

Upon agreeing with the initial designs: working on motion designs and refining the copy and the look and feel of the visuals.

4.

5.

TEST

Using these samples we carried out internal user testing to ensure the designs are easily understandable and also aesthetically appealing for the user.

BUILD

In collaboration with the development team ensuring that the implementation is as per design.

Working on the motion design idea, timing, and flow:

Initial samples of animations for loading states were created in After Effects and the final sample was created in Framer to allow efficient and clear handover to the development team.

User flow and visual specifications for development and QA teams:

Thanks for reading!