DevConsole
A platform for developers to mixed reality apps.
Company:
Jio Tesseract
Project & Deliverables
Interaction Design
Visual Design
Prototype (XD)
Project Details
My Role: Product Designer
Project Duration: 4 Months
Project Team: DevGrowth
Context
Jio Tesseract released SDK for JioGlass to the developer community.
Under a Developer Program, Jio em-panelled more than 60 developer teams to create Mixed Reality apps. These apps will be published and distributed through an app store. The DevGrowth team is currently in charge of managing interactions between developers and Tesseract, but with more and more developers registering every month, the manual operation has become unsustainable.
The need for a developer dashboard has arisen to automate and streamline these processes, provide real-time insights and analytics and improve the overall developer experience.
Current System
DevGrowth team is in charge of onboarding, engaging, and maintaining the developer community
Currently, the process relies heavily on manual communications between multiple parties. Once a developer team is registered, a member of the DevGrowth team is assigned to keep track of all communications and development progress through spreadsheets and documents. Each member of DevGrowth is responsible for multiple teams and managing multiple channels of communication between developers and in-house testers.
The team is also responsible for app approvals, testing, communication with developers if an app is not approved, and publishing the app on the app store backend, all done manually. Keeping track of different build versions and publishing them has become extremely time and resource-consuming resulting in inefficiencies and potential errors, taking the focus away from the team’s primary functions such as bringing in new developer teams, providing dev support, and managing the developer community.
Challenge
How might we automate and streamline developer onboarding, approvals and publishing process?
How might we provide real-time insights and analytics to improve overall developer experience and app store success?
How can we allow the DevGrowth team to focus on their primary functions?
Solution
A developer dashboard that automates and streamlines these processes, providing real-time insights and analytics, improving the overall developer experience and increasing the success of our app store.
We Called it DevConsole.
Advantages of DevConsole
For Developers:
- The developer dashboard will provide more autonomy over their content and apps by allowing them to track project status, performance, and analytics independently.
- Developers will have control over their own graphics and the ability to iterate as needed.
- The developer dashboard will facilitate collaboration among team members, providing real-time updates on project status.
- Developers will have access to the latest resources and documentation in a centralised location, rather than having to navigate multiple platforms.
For DevGrowth Team:
- The developer dashboard will enable quick and automated self-onboarding of developers, saving time and effort.
- By offloading many activities to developers and reducing the need for intervention between developers and testers, DevGrowth will be able to focus on their primary functions.
For Testers:
- The developer dashboard will provide clear management and communication of builds, reducing chaos.
- Testers will have direct access to builds from developers, improving productivity.
- Testers will be able to update test results directly to developers, reducing communication and the possibility of errors.
User Journey Flow
Since Developers would be primary users of DevConsole, their user flows were prioritised. It was decided that DevConsole has to cater to the developers first and foremost. So I mapped out an ideal user flow of all developer activities.
Once I had a user flow in place, I could move on to building the Information architecture. This user flow ended up informing a lot of components of the IA.
Information Architecture
In a project like this, we are dealing with multiple types of users and use cases. I always begin a project by first creating and getting consensus on an Information Architecture(IA) from the team. For me, IA is important in identifying and defining the relationships between different pieces of information, and it can help to identify any potential issues or gaps in the data that need to be addressed. This will help me to ensure that the DevConsole is effective and efficient in meeting the needs of the users.
Sketches
Wireframes
Style Guide
I whipped up a quick style guide, following the brand’s identity and the latest trend in developer tools: dark mode. Not gonna lie, a big reason we went with it is because it looks pretty awesome. Plus, it aligns with the current industry trend for developer tools, making it easier for developers to work in low-light environments. It’s a win-win situation! 🙌
High Fidelity Designs
I created a high-fidelity prototype using the established style guide. These designs were specifically aimed at getting early feedback from stakeholders and the developer community. While feature detailing was still ongoing, the prototype focused on the areas where we had the most clarity, such as the sign-up/sign-in process, project creation, and app publishing. This approach helped us to validate the design concepts quickly and make iterative improvements.
We shared our designs on the Tesseract Discord server and the response was overwhelmingly positive! The high-fidelity prototype helped everyone from team members to stakeholders envision the project more clearly and identify some gaps. So we took all that feedback and used it to add new features and detail out the existing ones. It was like a flood of new ideas and user stories came pouring in. Overall, it was a great way to get the community involved and make sure we’re building something they’ll love.
Feedbacks and changes
I took this opportunity to refine a few things and did a review of the design. I noticed a few issues that needed to be addressed and made the necessary touch-ups. It was a great chance for me to improve the overall look and feel of the developer dashboard before moving forward with the development process.
Revised Designs
Console Home
Project Overview
Project creation form
App Overview
Release Management
Final Designs
Interactive Prototype (Adobe Xd)
Please use any of the following options, if the embedded window isn’t active in your browser:
Design Screens:
Welcome page
Sign-in / Sign-up elements
Onboarding
Side Panel
Project creation & Approval
App management & release
App Overview
App Performance & Analytics
Team Members & Org Manangement
Activity Monitoring
Resources and other pages
Impact & Learnings
Impact: Streamlined Processes
Faster and more frequent testing:
The DevConsole allowed developers to easily install and test their apps, reducing the time and effort required for sideloading.
Elimination of version errors:
With the DevConsole, developers could easily check and confirm the version of their apps before testing, minimizing confusion and wasted time.
Up-to-date APIs and SDKs:
The DevConsole provided developers with the latest APIs and SDKs, ensuring they were using the most current and supported versions for their apps.
Impact: Improved Developer Experience
Consistent and streamlined workflow:
We designed the platform to have a consistent and intuitive experience, reducing the learning curve for developers.
Release with confidence:
Developers can now manage and edit their app listings in real-time, improving discoverability and making a strong first impression on users.
Access to rich data and analytics:
DevConsole provides developers with in-depth insights into app performance, allowing them to make informed decisions and optimize growth.
Impact: DevGrowth and Tesseract
Improvement in team performance:
By not constantly catering to individual developers, the team was able to focus on onboarding 20% more new developers in a quarter.
Better app promotions:
The use of Tesseract allows for better targeted promotion of apps based on categorization and content ratings.
Understanding customer trends:
Dashboards such as DevConsole make it easy for businesses to understand customer trends, which enables better planning and packaging of services.
Faster approvals and feedback:
Streamlined communication has led to quicker feedback, encouraging more accurate iteration by developers. This in turn has led to better apps, improving the overall quality of the app store and ecosystem.
Learnings
Understanding the software development pipeline:
I gained insight into the inner workings of a software development pipeline and learned to think from the perspective of a developer.
Empathizing with multiple personas:
I learned to understand and empathize with different types of users, and to design pages with different requirements and limitations for each role.
B2B vs B2C thinking:
I learned that designing a B2B solution requires a different mindset compared to a B2C solution. B2B solutions are often tools that other people will use for their own benefit, rather than a product that users consume.
Project Update⚡
DevConsole is a live platform released in the summer of 2022. It is being used by more than 120 teams on a daily basis. About 200 apps have been published on JioMR AppStore using the DevConsole. More features for analytics, monetisation and legal had been added since.
Leave a Reply