Changes to Developer Specs

An ever evolving remote project that involves creating an interactive specs, from Adobe XD, that is easier for Lumen.com developers to view and understand our proposed module functions.

My Role

Remote UX / UI Designer,

Wireframing & Prototyping

Project Duration

Ongoing Improvements

Ranging 1 month per dev spec

Area of Focus

Visual Communication, Functional Specifications, Web Development

Synopsis

In order to help the developers know exactly how the new web modules' functioned and designed, I helped popularize the formula of adding more visuals like storyboarding and videos to make it easier for them to understand the functions of the web module.

If you want to jump ahead to view the background, different iterations or final design you can click on their respective links below and it would take you straight to that process.

1. Challenge

2. Inspirations

2. Iterations

3. Recent Design

Challenges & Restrictions

Despite being an internal projects that involve only creative and developer team would view, there is still technical limitations when creating the specs.

Adobe XD Prototype Features

Have to submit both functional and visual spec to the developers, more room for outdated errors

Everchanging request on features

Have also update and change the spec to reflect on recent changes due to developer request or overlooked features.

What inspired me to improve the specs.

The developers express concern about tediousness of having to build modules with only a few visuals to reference.

How might we improve the dev specs so that its better organized and easier for the develops to understand how the component is built and function.

Inspiration

Screenshot taken from Adobe XD prototype tutorial.

Simulating user interaction.

What better way to visually show what we want than a video showing how a component works when the user is using it.

Screenshot taken from interactiondesign.org

UI - Step by Step Storyboards

Having each description be accompanied by a specific step would help developers know what's happening in a specific step.

Proposed Features

This is your Feature section introductory paragraph. Use this space to present specific credentials, benefits or special features you offer. This is a chance to highlight the unique and valuable aspects that differentiate you from the competition.