top of page
Marketplace components
Launching design components for cross-platform apps.
Challenge
Kony’s marketplace is a website catering to a collection of mobile components based on an internal product to primarily build cross-platform apps. These components or widgets are provided as templates to the customers inside the product to speed up their development process. The challenge was to design solutions to enhance the user experience of mobile components and adapt it to the current market and user needs.
Role
Initially, I worked with a senior visual designer on the user experience/ user interface design in aggressive timelines. Later, I was handed sole responsibility under the supervision of a UX director. My tasks primarily included market research, drafting wireframes, interaction design flows, visual designs, and presenting design solutions carrying out design discussions with multiple teams.
Vision
A high percentage of the customers already use visualizer for their products. A big advantage of using it would be to decrease customer time to market since the code is reusable and caters to multiple cross platforms. The marketplace comes into the picture further decreasing the customer’s time to market by providing ready-to-use building blocks or components. Initiation to enhance the designs of these components was taken up to match up to customer’s expectations and level up the brand value as well.
Design process
Product Understanding
The components are primarily used by customers to build cross-platform applications with help of in-house product Kony Visualizer. To deliver delightful experiences, our understanding of Visualizer needed to be solid. Therefore, a lot of the initial hours of the project were spent on learning technical skills of the product to give us a head start on the project E.g. We tried developing a few static screens to understand the customer workflow and be familiar with the technical terminology to bridge the communication gap with multiple teams.
(left) Marketplace website showing various mobile components & (right) Cross-platform app software
User needs
A high percentage of the users were developers/teams shipping multiple products using Visualizer. Feedback from users trying to use components and meetings with the management team helped me to draft user needs, which were reviewed later. Unfortunately, due to the time crunch in the project, I could not carry out more detailed research.
LOW LEARNING CURVE
Less time to understand component specifications.
IN DEPTH CONFIGURATION
Detailed Interaction/user interface configuration to cater to specific needs.
ADAPTATION
More adaptive to dynamic data.
SMOOTH INTEGRATION
Component integration with the product.
Outlining Problems
OUTDATED DESIGNS
The old existing designs needed to be revamped and restructured with emphasizing user experience in the first place. These components (made by a third party) had a lot of UX / UI problems and were outdated from the current trends.
BRAND VALUE
From the business point of view, a lot of new markets were being explored, it was important for the company to push for design updates to engage the customers and attract potential ones. This project was a part of the plan to level up the company’s brand value in terms of experience design.
CUSTOMER EXPECTATIONS
The designs had to match up to customer’s expectations. Components had to be reusable, interactive, and engaging for the customer. End-to-end experience had to be catered covering not only the market design but the actual scenario of using the component in the product. Customization was also one of the important expectations determining the versatility of components.
Customer giving feedback for more component configuration
Usability analysis
Consider this example above. Search and location is combined into one form field. Not only does this give a vague picture in terms of functionality but also is not thought through. Going by the flow, I must search for “Pizza hut” and “California” at the same place. Again, resetting or modifying the value would lead to confusion. What’s the purpose of keeping the search button? What’s the point of selecting restaurants and then having a CTA. Results could be fetched on the first tap.
Current market analysis
Extensive research was carried out identifying current industry trends, common interaction patterns, and design inspirations. In addition to referring to several design websites like dribble etc, we also made research more realistic by exploring real day-day applications to keep the interactions simplistic and meaningful. Competitor research associated with a component was also done.
Market trends for component patterns
Wireframes & Interactions specifications
Low fidelity wireframes were drafted with the basic structure and interaction flow. Alternative designs were made and discussed in case of conflicting opinions. Wherever needed, different design alterations were made to target specific platforms (Android, iOS). Interaction specifications included detailed interaction flow with constraints like time and space.
Example of wireframe set demonstrating interaction states for a component
Iterations were done to find a better solution if the problem still existed. Additionally, the agile process was followed by involving PM & Engg team for wireframe iterations.
Visual Design
The visual design had to bring consistency in brand design. We followed a modest approach to achieve the omnichannel experience. For some components, basic skeleton screens were designed too. During the project, I worked on visual designs under the supervision of a senior designer.
Documentation & Handoff
Handoff included design presentation and shared documentation including design, interaction specifications, and decided configurable parameters. These parameters were the change in properties of UI elements/interactions to offer component versatility.
The Impact
1.End to end experience catered adhering to brand value as well as product experience.
2.Providing in-depth customization of UI elements across cross platforms.
3.Download count increased by 40%.
4.User adoption rate increased significantly.
bottom of page