Working on something cool,
please wait...
All done!
Dashboard
The Mission
Provide the customer with a customized experience on the second most important page in an e-commerce site, which is the homepage after login. This homepage should have all the tools required for a business when ordering business supplies, such as order tracking tools and a list of frequently ordered items. These tools should help the customer purchase their business supplies quicker and easier.
The Process
This project adhered to agile values while following the Scrum framework. And the team structure was a perfect candidate for a two concurrent sprint model, where the design team works in the design sprint, and the development team works in the development sprint.
I was the lead for the UI and Front End team for this project. Where UI worked in the design sprint and Front End worked in the development sprint.
![](/Content/ImagesWork/dashboard/Dashboard_Prop_7.png)
My Contribution
This project focuses on front end technologies, and because of this, I have many notable contributions. For instance, I architected the technology stack so that we can integrate the React framework into our DotCom solution. I also implemented most of the front end functionalities for our Widgets.
What I am most proud of regarding this project is the fact that I built the drag, drop, add, edit, and delete functionality from scratch. The first requirement was to use an off the shelve solution. But, after some usability testing with off the shelve solutions, the team determined that none of those solutions adequately satisfies the user stories for the Dashboard. And building the functionality for drag, drop, add, edit, and delete was accomplished within one sprint.
![](/Content/ImagesWork/dashboard/Dashboard_Onboarding_Assets_4.gif)
![](/Content/ImagesWork/dashboard/Dashboard_Onboarding_Assets_Clipping.jpg)
![](/Content/ImagesWork/dashboard/Dashboard_Onboarding_Assets_2_Clipping.jpg)
![](/Content/ImagesWork/dashboard/Dashboard_OrderTracking_Clipping1.jpg)
![](/Content/ImagesWork/dashboard/Dashboard_OrderTracking_Clipping2.jpg)
The End Product
Since we were following an iterative process, our first release deployed four widgets. These widgets included: Order Tracking, Frequently Ordered, Quick Order, and Custom Lists.
Each one of the widgets released was in the highest possible quality and satisfied the user stories that were chosen for that release.
![Grand & Toy Dashboard Screen - Order Tracking](/Content/ImagesWork/dashboard/Dashboard_Screen_1.png)
![Grand & Toy Dashboard Screen - Quick Product Entry](/Content/ImagesWork/dashboard/Dashboard_Screen_2.png)
![Grand & Toy Dashboard Screen - Custom Lists](/Content/ImagesWork/dashboard/Dashboard_Screen_3.png)
![Grand & Toy Dashboard Screen - Custom List Expanded](/Content/ImagesWork/dashboard/Dashboard_Screen_4.png)
![Grand & Toy Dashboard Screen - Frequent Ordered](/Content/ImagesWork/dashboard/Dashboard_Screen_5.png)
![Grand & Toy Dashboard Screen - Dashboard Onboarding](/Content/ImagesWork/dashboard/Dashboard_Screen_6.png)
![Grand & Toy Dashboard Screen - Management](/Content/ImagesWork/dashboard/Dashboard_Screen_7.png)
![Grand & Toy Dashboard Screen - Dashboard on iPad](/Content/ImagesWork/dashboard/Dashboard_Screen_iPad.png)
![Grand & Toy Dashboard Props - Sticky Notes Fruit](/Content/ImagesWork/dashboard/Dashboard_Prop_1.png)
![Grand & Toy Dashboard Props - Blue Sharpie](/Content/ImagesWork/dashboard/Dashboard_Prop_2.png)
![Grand & Toy Dashboard Props - Sticky Notes Message](/Content/ImagesWork/dashboard/Dashboard_Prop_3.png)
![Grand & Toy Dashboard Props - Sticky Notes Star](/Content/ImagesWork/dashboard/Dashboard_Prop_4.png)
![Grand & Toy Dashboard Props - Blue Marker](/Content/ImagesWork/dashboard/Dashboard_Prop_5.png)
![Grand & Toy Dashboard Props - Yellow Highlighter](/Content/ImagesWork/dashboard/Dashboard_Prop_6.png)
![Grand & Toy Dashboard Props - Sticky Notes Star](/Content/ImagesWork/dashboard/Dashboard_Prop_7.png)
The Dashboard
Company
Grand & Toy ( www.grandandtoy.com )
Technology
ASP.NET, Oracle, C#, React JS, Redux, Babel, HTML, CSS3,
CSS Transitions & Animations, SASS, JavaScript
My Role
Lead Front End UI Developer