The intended name for this additional feature was "Customize Homescreen." It was a literal translation to what this asset for the mobile app company was to actually do. Overall we, the company, valued our customers and wanted to give them a tool that they had wanted for years. Also, it was intended to compete with similar customization design tools other competitors had. I had been asked by the person I reported to essentially run with this intended concept and create a product that would blow the competition out of the water. With that in mind, I sought to create a design tool that had familiar editing queues related to prototyping and design software. I split the area into a canvas accompanied with four quadrants; objects, layers, specific customizations, and animations. As I began to create the product specifications, I knew that the product would come along as I was working through ideas of how the bits and pieces would interact with each other.

To start, I laid down the foundation of the product's look and feel, the intended actions and core concepts. However, I knew in order to successfully showcase how the product would work I would have to mimic how the intended user would actually use the design tool. This process of interaction design would assist greatly once the product was to be engineered. I split the canvas into grid format, to allow components to be added and snapped easily. 

First things first, I started with the component section. I added some minimal generic options here that I had seen in other softwares. They included navigation layouts, images, text, icons, shapes, and code. Adding an image component was the first move, I felt a user would do. 

Once an image component is added a window displays that has options for placement, height, width, and the ability to upload any image.

Image components can be resized before or after an image is uploaded. 

Once an image is uploaded, customizable options are available in the "Cusotmize" section

If an image is selected various basic customization options are shown. The options available include the following: Cropping, Color Overlay, Opacity, Drop Shadow, Stroke, Brightness & Contrast, Hue & Saturation, and a Gradient Fade. The options I added were intended to give the user a sense of personalization without overwhelming the user.

While working through the different factors that an end user would use, I felt some interesting effects that would help the user actualize an ideal homescreen were animations and gestures. The "Effects" I added were Deep Linking, Transitions, Fixed Option, and Click Animations.

The animated image below shows the process of adding a shape component to the homescreen canvas. Basic shapes are provided  and can be adjusted in height, width, and placement. Similar customization and effects options, as displayed in the image option, are provided.

Adding text is simple and straight forward. Users have the option to add their personalized text and customize it to liking. 

Adding any shape can be used as a button if the right customizations and effects are appended.

I added some widget components that would directly integrate with features the mobile app company had available. They included the following: Music, Event Calendar, User Account, Blog Feed, and RSS Feed,

Adding the ability for users to add comments and a style guide was the next step in allowing users to design together.

Let's see how it all comes together.

Although the design exercise was placed under the concept ONLY umbrella, it was a wonderful method for the team to look beyond what features we had already accessible and ideate how our core product could evolve over time to accommodate power users in the future to drive more business/

Bizness Apps values it's customers, however some of the content showcased to first time users was a little outdated. The action to update the look and feel was perpetuated by the disparity between what the Program entailed vs what was shown to the end user. The backend admin area is an overview of a users' plan as well as a catalogue of their apps they had created. The primary goal for this area was to reorganize content and restructure the information architecture provided. Based on the feedback of the User Experience Director and Director of Customer Success the following changes for resources were proposed.

Polishing the overall experience of the User Interface was the conceptual process for consolidating the content of the initial start page. The initial Dashboard Page redesign is completely reworked, however it still holds some of the same aspects as it's predecessor. The new look on the right showcases helpful documents and resources to assist the end user, while simultaneously showing what previous apps have been accessed recently. Keeping the timeline progression was a necessity asset, however curating the top header and left sidebar resources into cohesive ctas was the major priority. 

As the user begins their Reseller White Label Journey they have a guide that shows exactly where they are in the entire program. Based on their progress the week's icon would change. The necessity for this timeline view was used as an aid for the end user and would sync up directly to what the Partner Success Managers would describe in phone calls, emails, and other various types of support. Other materials provided were documentation and tutorials on how to be successful. Based on the end user's progression in the entire Reseller Life Cycle, the materials presented would adjust accordingly. 

Consolidating the available resources and materials for Partner Resellers was the most important aspect of this project. As requested by the Customer Service team a majority of the older assets had to be removed and new resources were created. To ensure that these resources were of brand on face value to the customer, I made custom thumbnails. However an issue that was prominent was, if new material was added would a new custom thumbnail be made? To ensure that a new thumbnail would not needed to be made, generic images were made, that could be used over and over again.

As a White Label Reseller Partner, the customer is able to brand our product as their own. As so, in the backend Reseller Admin area, a user can easy edit and create their own version of the Bizness Apps' App Builder Editor. When approaching the solution for this, it was important to first and foremost create a wireframe of what a generic version of the Bizness Apps' App Builder would look like. Then distinguish how a user would assign different color values and images to their rebranded product in the backend. Any changes adjusted in the Partner Admin Area would reflect on their own version of the Bizness Apps' App Builder.

A priority for the overview 'My Apps' area was to promote another revenue service Bizness Apps has to offer. As so when a user enters this area they prompted with two different choses, to have our professional graphic design create an app or do it themselves. In order to get the ball rolling the option to have our designers complete an app, is placed above the "DIY" option and the CTA is orange rather than . transparent.

The Apps area has both a thumbnail and list view option. As the user hover overs an application they are able to view a list of information pertaining to that app. To promote a cohesive design style for page overlays, a dark blue blurred overlay is displayed. Motivations for this concept were fueled by power Reseller Partners needing a direct grasp of top level information, without having to go in-depth into the actual applicaiton. The option to login and make individual edits to a specific app's content is available.

A list view for individuals who have a large amount of applications under their account is also provided. In order to not stray away from visual information and appeal, a small thumbnail of the individual application is provided. Top level information is provided immediately and not hidden through hover overs or buttons.

After initial launching of the reworked White Label Reseller Partner area, there has been measures to have immersive user testing and eventual iterations on user feedback.

Bizness Apps had an already developed mobile view for Events, however it's representation was a little outdated and did not look slick enough compared to today's UI visual mobile app standards.  A lot of the initial design visual flow was influenced by the popular events feature that Eventbrite, Facebook, and Ticketfly have to offer. I wanted to go for a large display that showcased as much information as possible with the restricted space of a mobile phone device.

Using the initial wireframes I created and a collective color scheme I added data to provide the executive team a visual queue for how the final product would look. Rather than using filler dummy text, I felt it was best to fill in the content with actual data to provide a better story.

When a mobile app user clicks into an event they see the details that pertain to that event. The detail views shown below describe how an end user would see the event on a device along with full page and scrolls views.

As a Bizness Apps App Builder Editor a user is allowed to completely customize what content they wish to provide. To have optional customization show in the end product, without having empty white space, I drafted a series of visual use cases. Below shows just how much the mobile app can changed based on what content the App Builder user chooses to provide.