OVERVIEW

Project Background

Fusion Builder was an inhouse project for TripleE Fusion, the CEO wanted a fast and agile website builder that would empower designers to focus on design without worrying about coding.

Designers now could build client websites, quickly making multiple versions was easy and most importantly fast with consistent well-formed code, without a need for developers. Freeing up the dev team to focus on new and custom features for each project.

ROLE: UX/UI DESIGN

My Responsibilities

Gather specifications from stakeholder, Senior Web Designers, and Web Developers
Technical discovery to understand feasibility and constraints
Design wireframes, high fidelity mockups, interactive prototypes, and assets
Conduct User Testing thur each phase of development
Design a innovative website builder to create customized world-class layouts

Project Goals

Drag & drop
Content organization
Responsive Grids
Layouts Without Writing Code
Add elements
On the Fly
Build Content
Easy and Fast
Live preview
Everything is Instantly Shown
Intuitive Interface
Easy to Learn
Global
UI Components
Google Fonts
500+
Modern Icons
120+
Blog
Multiple Layouts
Footer
Builder
Mobile header
Builder
Color Picker
change in real-time across the site
Menu
Animations
Sticky
Header Navigation
Menus
Dropdown and drop-bar

DESIGN PROCESS

To Start the Project I Decided on a Lean UX Approach

Sketching, presenting, critiquing, researching, testing, prototyping, and wireframing. Driving the design forward, with the developers in on the process early it helped us create team cohesion and speeding up dev time, and see surfacing challenges earlier.

Once we had hammered out the design we then moved to an agile scrum methodology I would work infront of the dev team proto-typing and testing with the in-house desgners and the CEO.

Then kick off the next sprint with the development team with all assets, and prototype to help ensure the completed stage was in line with the design.

Sketches
Using agile scrum method sketches help get my ideas and my teams ideas flushed out quickly on what would work and make sense, as well as identify problems that may arise.
Hundreds of sketches to help layout a great foundation and direction of what we needed to build helped in the technical audit

Tools Used:
Wireframes
Moving the project along it really started to take shape once we could start seeing the project layout and then make changes really fast. I needed to get the designers onboard this builder was built for professional web designers not for the general public, it would speed up there work but they had to use it. seeing wireframes of the project started to get them involed a lot more.

Tools Used:
Mock-ups
While creating the UI designs for the website builder I provided the team with High-Fidelity mockups.
Testing inhouse was really nice it was fast moving and as the designers where now getting excited for the builder to be finished so they could start using it. During the mockup reviews discovered some problems that where easyly fixed due to the fact that the developers hadnt started coding anything yet.

Tools Used:
Proto-type
Designed and built a prototype in Adobe XD so the developers had a clear vision of all functionality, look and feel of animations, button hover, and active states.
Tested with designers was easy since we are all in the same office. I was abble to monitor and give out tasks to designers and have them test and give feed back in real time.

Tools Used:

Finished Fusion Builder

Since finishing the Fusion Builder we have built hundreds of sites and proto-types saving thousands of hours in development time. The best part was the designers and myself keep coming up with need and improved features as we where now using it production work.