Building the Dream Factory
Dream Factory is one of the most complex projects I have participated in. This case shows the transformation of a recommendation app into a platform to digitalize processes of any type of business; Where my ability to adapt and problem solve helped define the course of its evolution.
Understanding the Challenge
From the beginning I noticed that this project was an ambitious effort: a highly customizable, AI-powered recommendations app that sought to transcend its initial tourism-focused scope. To define the problem it was necessary to navigate between the untapped potential and the complex aspirations of what this app wanted to be.
The software proposed interesting features on the administrator side: a tool for visually structuring databases and a highly customizable application menu editor. However, the challenge was that the company's objectives were changing. The sales team, driven by the vision to diversify reach into new industries, was constantly suggesting new directions for the product. Reviewing priorities, focusing on the scalability of our ideas, and navigating the fine line between visual consistency and UI flexibility became part of our daily routine.
Studying the app's structure
Visualizing complexity
My first focus was to fully understand management software that supports the functionality of the application. To do this I needed to visualize the landscape of current and future features, the role the product plays for our users, and the wish list of the product and sales teams.
At this point the app wanted to be a little bit of everything and its user interface was starting to look like a digital garage sale.
Reviewing the user flow
Some of the pain points we identified in the first administrator review
As an exercise to map the different aspects that would influence the direction of the product I began by analyzing the current flow and collecting the information available about our user base.
Not having an established UX team at the time, I worked with the customer support team to gather feedback from our clients and conducted some down-the-hall interviews with colleagues who were using the product to help clients configure their platform or their app.
Reflecting on this information I identified a question that, as a designer, I would need to resolve together with stakeholders: What is our role as service providers in customizing the platform for the client? It was necessary to consider whether we wanted to allow the customer to have more control over their experience, as this would dictate the need to invest resources into improving admin usability.
These insights also informed the design strategy going forward: If our product offers a personalized platform for each client, the menus to navigate it must obey the logic of the client's processes. If the user has access to generic parts of the manager that have nothing to do with their process, they become confused and diverted from their tasks. We can visually organize information in the admin's UI so that tasks and actions common to most of our clients' processes follow a predictable pattrn.
Navigating between what's urgent and what's important
In the initial sprint, the sales team asked us to prioritize the goal of having an attractive and functional product ready for the market in a short time; This drove our first design approach.
To accomplish this goal, I worked closely with the development team to create a website editor that used existing data structures (that users had already created for their apps). This editor allowed us to offer our clients the possibility of creating landing pages to promote their apps, and even provide the recommendation service within their website.
Mockups of elements to include in the first web pages, which would serve as a basis to create the editor
The second task was a quick redesign of the existing app that centered images uploaded by users. This not only improved our clients' ability to strengthen their brand image in the app, it also highlighted our ability to display multimedia collections, one of the most important features of the app at the moment.
Mockups of the first redesign of the app
This process also forced us to divide the product design into two parts, to obey the user profiles we are trying to reach: the backend (administrator), to which only we, the client and their trained staff have access, and the front-end (app, web and other future applications), to which the end user, or the client's client, has access.
Understanding this division better and the importance of having a clearer hierarchy of information, I worked on a first iteration of the management software interface design. For this version I prioritized a more cohesive visual language with greater typographic contrast, strongly inspired by Material Design, as well as creating an action menu that was consistent across most screens. In this way we aspired to make the data loading and handling process more intuitive. I also collaborated in its front-end development to streamline processes and have our MVP in the shortest time possible.
First_admin_redesign_1_after
First_admin_redesign_1_before
Before and after screen to show entries
First_app_2_after
First_admin_2_before
Before and after screen to configure an instance
Building a strong foundation for growth
Thanks to the success of our first launch, our customer base grew, and with it the number of new features began to increase exponentially. At this point my role focused on achieving a proper integration of all the new functionality into our existing user interface. From implementing shopping carts and paid event reservations to increasing the options allowed in the database, my focus was on maintaining a consistent visual language.
Visually, the administrator and the website continued to receive updates, borrowing the visual metaphors and graphic resources of Google's Material Design System, but adding our unique style. This way developers would have a well-documented base design system to rely on, so they could request fewer design revisions when testing new features.
Shopping cart feature for purchases and reservations, adapted to the platform design
The functionality of the web editor, one of our key tools, was significantly expanded. The development team and I streamlined the process of adapting the sites to the client's brand by creating a CSS template system. In addition to creating the styles for the templates, I requested that CSS library utility classes be implemented, and customizable variables within the templates that could be changed for each website within the web editor. This allowed customers to modify the appearance and content of their site without needing to constantly request support from us. This templating system not only facilitated client autonomy but also simplified the maintenance of style sheets for all sites in our portfolio.
Wireframes to visualize the operation of the template system variables
Simple websites, which could be converted from mockup to web in a couple of days thanks to this system.
Visualizing the future
Out of all this exponential growth a critical question emerged: "Who are the users of our admin software as our product matures?" A quick survey of our user base at the time revealed that their profile had changed. Our core users were no longer people who wanted to create a custom app to recommend places to visit in their city, but rather business owners and content specialists, willing to invest time in mastering complex tasks to automate their business processes.
This revelation forced us to think about which features are most valuable to a more tech and business savvy user base, alleviating the pressure to oversimplify our user interface for less technical users. From this moment on, new iterations of the administrator user interface focused on optimizing navigation to perform more complex tasks
Planning how to organize navigation by grouping actions
Left menu proposal to improve admin navigation
At the same time, the web and app editor went through several redesign proposals. While one of our ambitions was to incorporate visual editing capabilities, I chose to rule out drag-and-drop solutions to prioritize correctly displaying the application's information hierarchy and database relationships. Instead, I proposed accompanying the editor with a graphic representation of the app or website that provides visual feedback and makes it easier for users to understand the impact of their actions.
Visual editor proposal for App and Web
How the user shapes the design
Throughout the design process I stayed in contact with our clients and users, not only to provide support, but as a design collaborator on their projects. Daily interactions with our application and platform and user queries were not just notes; They were a treasure chest full of inspiration and ideas, which helped us shape our product roadmap. I needed to be cautious and not say yes to every request, but instead identify growth opportunities and desired functions.
Support for downloading data in PDF, batch image upload, customizable form pages, CSS classes for form fields and visualization with graphs are some of the most valuable features of the platform that were created thanks to crowd sourcing feedback from our users and customer requests. Being attentive and listening helped us turn casual suggestions into the backbone of product evolution.
Process of the Design and Product teams to integrate new features requested by clients into the platform.
Defining our value
With the platform transforming from a simple recommendations app into a tool for businesses to digitize their information and processes, the relationship with our users and customers became crucial: Their success was as vital to us as it was to them. This interdependence drove my team's mission: to infuse value, through design, into the product we are offering.
Rejected sketches from different iterations
As our commitment to doing things right for our clients grew, we wanted to define our brand in this same direction. Visually we also wanted to position ourselves as trusted collaborators who put their clients' best interests first. To define the brand and make this vision a reality I worked closely with our product manager, a very experienced marketing specialist.
Like our product process, the brand underwent iterations and even a name change, a testament to the dedication put into getting the message right.
Iterations of the logo with the original name
From the beginning, we identified a key facet of our brand image: the use of a library of icons, illustrations and other graphic elements that maintained strong consistency without being rigid. The elements had to adapt to various shapes, colors and styles, reflecting the essence of the flexibility of our product.
Visual style of the brand's graphic elements
In later iterations, I chose to put the focus of the brand message on these elements and a primary color palette instead of our logo. This was simplified and focused on having a strong typographic identity: being both a recognizable image and a blank canvas, symbolizing our adaptability.
Brand_light
Brand_dark
Logotipo y paleta de colores de Dream Factory
Accepting change
When reviewing this case, I found it difficult to define in a few words what my role as a designer was. I believe that, more than just doing design tasks and solving problems, I wanted to get involved as part of a transformative narrative. From the beginning I decided to believe in the ambitions of the project, embrace the challenges of modeling priorities, visualize the scalability of each designed component, balance visual consistency with flexibility, simplify without sacrificing versatility and help adapt to a rapidly changing market.
The success of our design process was based on our ability as a team to adapt. The iterations, twists and revisions were not just a response to the urgency of creating a product to sell or user feedback, but reflections of our commitment to stay ahead of market changes. The UI/UX design, the backbone of our product, sought to constantly adjust to the changing needs of decision makers, customers and users.
Although this is the end of this chapter, for me the design process of the Dream Factory does not end: it continues to evolve. Even with all the considerations to anticipate future demands no design process can be an end point, but I'm confident that our work represents the solid but flexible foundation that this project needs to continue growing.
