To view all the professional projects, click here
Spec Builder is a cloud application that gives the user ability to view the list of guidelines, create one based on the available
template and open it in guideline editor.
It is built on top of an existing application by adding new requirements. For more info, click on the product details page here.
The current application did not allow the user to create a new guideline. The guidelines were a part of central file repository that included other items. So a workflow was designed to address this and integrated into the existing product. Guidelines entity were given a separate workspace for which I had to design separately. Creating a new guideline required user to select one of the many categories, standards, versions and guidelines from the template. The UI was designed considering that.
Specbuilder Cloud (current system)
Design Process
1. New Requirements by PM
Product manager came to me with 4 sample designed screens for creating a new guideline. The design wasn’t consistent with the
established theme of the product and the workflow was very complex but I got familiarized with the content. My contribution was to simplify the workflow and make sure it comes together as a part of unified product experience.
Along with
brainstorming on different ways of creating a workflow based on template, I studied the existing application design to understand
the patterns and styling and created a new UI based on it. As we started the design process, we added few more requirements like
‘requesting access of guidelines’ for the benefit of users.
Requirement Screen (1)
Requirement Screen (2)
2. Initial Sketches
After the requirement screens were given, I started exploring different options of simplifying the workflows. I sketched different
approaches and presented them to the product manager to further analyze them.
Initial Sketches (1)
Initial Sketches (2)
3. Initial Design
Once the workflow was determined, I started translating it into lo-fidelity wireframes. The visual design theme was already established
so I just followed the same for the consistency of product experience. I simplified the four requirement screen into two.
Initial Designs
Final Design
The final design is the UI of entire workflow that enables user to view and create guidelines based on the template. It consists of
following screens:
1. Guideline list
2. Create a new Guideline
3. Guideline editor
(Click on the individual pages to see them full screen)
Specbuilder Cloud was a small project assignment to accommodate new requirements into the existing application. I was the Lead UX designer for this project of 3 weeks where I collaborated with a product manager to understand the requirements. Along with brainstorming on the workflows, I studied the existing application design to understand the patterns and styling and created a new UI based on it. I integrated the new designs with the existing application to make sure it comes together as a part of single product experience