To enhance Pixelied's capabilities and address the needs of users requiring quick and easy mockup creation, we developed the Pixelied Mockups tool. Our aim was to simplify the process of creating professional visual mockups without the need for complex software or extensive design skills. By integrating the mockup tool into Pixelied, we provided users with a seamless and efficient way to produce high-quality mockups for their digital projects.
Role:
Design & Development
Industry:
SaaS, Design tools
Duration:
22 Weeks
Research & Exploration
We began by deeply understanding user requirements and pain points related to editing visual mockups. Our research included:
User Interviews: Speaking with designers, marketers, and entrepreneurs to gather insights into their challenges with existing mockup tools.
Surveys: Collecting data on user preferences, desired features, and common frustrations.
Competitive Analysis: Evaluating other mockup tools in the market to identify gaps and opportunities for innovation.
Key Findings:
Complexity of Existing Tools: Many users found current mockup solutions to be overly complicated and time-consuming.
Desire for Simplicity: Users wanted a tool that allowed them to create mockups quickly, with minimal steps involved.
Integration Needs: There was a strong preference for having mockup capabilities within an existing design platform to streamline workflows.
Real-Time Preview: Users valued the ability to preview mockups side by side while editing.
These insights guided us to focus on creating a user-friendly mockup editor that could be accessed directly within the Pixelied platform.
Design
Discovery
In the discovery phase of the Pixelied Mockups tool, the goal was to deeply understand user requirements and pain points related to editing visual mockups. After understanding the pain points we aimed to provide users a very easy and quick mockup editor for their digital needs.
Key features such as browsing mockups based on keywords or categories, easy mockup editing with hardly 2-3 clicks, mockups preview side-by-side while you are editing, incorporating any mockup with a ready-made template, and much more were prioritized to be worked on.
The timeline for this phase was around 1 week, with the aim to deliver some rough low-fidelity mockups to understand the UI requirements and to have a good starting point for high-fidelity designs.
Components
Since the mockups are one of the features of Pixelied Editor, we used the same design system to ensure consistency across the editor. New components that are specific to mockups like editing windows, preview sidebar, and mockups gallery were made.
High-fidelity designs
By following the theme of Pixelied editor, we have designed a very simple and intuitive UI for Mockups. The key flow here is to choose a mockup and edit it right away by just pasting your image, text, and elements, or else in the mockup editing area. The designs aimed to lessen the unnecessary clicks for choosing layers or the actual editing window. Thus, the completion time from choosing a mockup to editing and finalizing it is very short. The overall design speaks of a great user experience and a friendly user interface.
Delivery
To facilitate hand-off, self-explanatory flows were created for each feature, with important notes and annotations to ensure a quick understanding of the flows simply by reviewing the design file.
Development/Implementation
We developed an extensive Mockups tool by creating 3D models and rendering them from multiple angles. The development process involved several key steps and technical challenges:
3D Modeling and Rendering:
Challenge: Creating realistic and high-quality 3D mockups.
Solution: Utilized Blender to model and render 3D objects, providing a variety of angles and perspectives for users.
Refining Visual Elements:
Challenge: Enhancing mockups with accurate shadows and highlights.
Solution: Used Photoshop to refine shadows and highlights, adding depth and realism to the mockups.
Detailing and Integration:
Challenge: Adding final details and integrating mockups into the design system.
Solution: Completed remaining details in Figma and generated mockups using the Figma API, ensuring consistency and efficiency.
Frontend Development:
Challenge: Building an intuitive and responsive user interface within the existing editor.
Solution: Implemented the frontend using Angular and FabricJS to create an interactive editing experience that aligns with the Pixelied Editor's design.
Technologies Used:
3D Modeling and Rendering: Blender
Image Editing: Photoshop
Design and Prototyping: Figma
Frontend Development: Angular, FabricJS
Backend Development: Node.js
Throughout development, close collaboration between designers and developers was essential to address challenges promptly and maintain alignment with the original vision.
Outcomes
The introduction of the Pixelied Mockups tool led to significant positive outcomes:
Improved Efficiency:
Users experienced a notable reduction in the time required to create mockups.
The streamlined process allowed users to complete mockup projects with just a few clicks.
Positive User Feedback:
The side-by-side preview feature was highly appreciated for enhancing the editing experience.
Increased User Engagement:
The new feature led to increased user activity within the Pixelied platform.
Users explored additional templates and design options, deepening their engagement with the tool.
Competitive Advantage:
The Mockups tool positioned Pixelied as a more comprehensive design solution.
Attracted new users seeking an all-in-one platform for their design needs.
