Google Admin Console is a critical tool for IT administrators managing Google Workspace accounts. This project aimed to address the significant inconsistencies between the iOS and Android versions of the app, creating a unified experience while respecting platform-specific design guidelines.

The Google Admin App was outdated with legacy Material UI and needed an update to Material UI 2. Since the engineering team didn’t have Material UI 2 in their codebase, extensive documentation and annotations were required to guide them to the correct components. I also had to highlight the differences between iOS and Android native interactions and prototype them in Figma for handoff.

I started with user interviews with Google Workspace administrators and competitive analysis of other admin console apps for key pain points and areas for improvement.

The final end-to-end flows were identified through an audit of the current Google Admin mobile app, with new flows created to address missing experiences based on web functionality.
• Search members and groups
• Add members and groups
• Delete members and groups
• Edit role for members
• Filter members
• Add external users
• No connection edge cases
• Create group with specific domain email ID

Develop a unified design language that respects platform-specific guidelines and prioritize features and functionality for consistency. I mapped out every flow and interaction for both iOS and Android. These design flows went through multiple iterations and were prototyped to help engineering identify any gaps in the experience.
• Group list
• User list
• Group profile

I first prototyped all motion interactions for iOS, as the engineering team didn't have them built into their framework. This went through multiple revision cycles for design and development to assure this follows Apples Mobile native principles.

Following interactions that had to be prototyped in Figma:
• Bottom sheet
• Drawers
• Filter
• Page transition
• Snackbar
• Loading states

Created high-fidelity mockups for all screens and develop a comprehensive design system documentation iOS and Android developers to ensure feasibility.

Developed detailed specifications for the engineering teams using high-fidelity prototypes, serving as a reliable reference and source of truth.

Overall solution:
• Unified group management interface
• Consistent navigation and information architecture
• Streamlined group & user management workflows
• Improved search and filtering capabilities

• Reduced learning curve for administrators using both platforms
• Increased efficiency in common tasks (e.g., adding users, managing groups)
• Stronger visual consistency for Workspace
• iOS and Android achieved consistent functionality, reducing customer frustration

Custom Ink is a leading online platform that allows customers to design and create custom apparel and accessories. With a user base of millions, delivering a seamless and enjoyable user experience through a scalable design system is paramount to the company's success.

As a design lead collaborating with Custom Ink's design team, I undertook the challenge of enhancing their 'Design Lab Editor,' a critical tool for customers to create and visualize their custom designs, along with other screens such as checkout, account management, and the catalog.

I needed to create a library for the designers where they would have all the components synced to one master. This was extremely hard to do in Sketch. I suggested to move all designs to Figma and ditch the softwares they were currently using such as abstract, invision and zeplin.

First step for me during the transition phase from Sketch to Figma was do an audit of the entire experience at Custom Ink. Take as many applications and screens through a funnel to find inconsistency with colors, typography, components and general design patterns. Examples of problems found:

- Multiple hex codes for the same color
- Typography sizing all over the place
- No consistent components even buttons
- Marketing was not in sync with product
- No visual language or principles for designers to work from

I undertook various initiatives to discover companies with similar experiences or challenges, adopting a customer-centric perspective. This approach ensures that we learn from other businesses' solutions, avoiding the repetition of mistakes, and gaining valuable insights into the benchmarks for new and innovative solutions.

In my research, we have cross-referenced numerous companies that offer excellent customer-oriented design tools, streamlined order processes, and proficient management of their customer interactions."

At this juncture, the product team had adopted Figma as the primary tool for all design work, which presented an opportune moment to commence evaluations of the visual language. The rudimentary aspects such as color, typography, and spacing were meticulously scrutinized to create a foundational library of tokens with consistently accurate naming conventions. This proved to be an optimal course of action, as the components were built around these crucial elements, which, once resolved, prevented potential hurdles during the development of components.

The first round for all the atomic elements needed to be tested for contrast and correct sizing in order for the users to have a consistent and easy experience. I worked closely with the marketing and brand to get the correct HEX codes for the colors. The color palette was too small and would not work if we scaled it to large components and states. So I expanded the shades of the colors and creating a larger palette that could support the new design system. Same went for typography and spacing they needed to be documented and consistent.

After the visual design language and the atomic elements were defined I could publish the library and let the team start linking all the designs to the correct styles. I started with the most used components such as: Buttons, checkbox, text fields, alerts and many more

I broke out these piece of the design system as patterns such as forms, headers, footers etc. The designers needed these to complete actual screens and this helped reduce the time it took to actually complete a screen. I would do workshops and teach the design team on how to use all the atoms, molecules and organisms together in harmony otherwise they would not use it and the main goal of the system would fail.

A design system is a never ending product that needs constant maintenance and design input. Getting feedback from the team on weekly basis on what to improve and fix was the nature of Pigment. I ran some test on how fast a designer could actually make a screen and how many they had to make and it dramatically decreased. From taking 3-4 hours on creating a simple checkout screen to only 1-2 hours with redlines and documentation. The engineering team had a library that was parallel to the design team and could be communicated easily with the new naming convention.

Overall the harmony between UX team, marketing team, and engineering team was of the same vision. Now Custom Ink could scale the products with consistent design and focus on how to improve user experience of their customers rather than spending most of their time on fixing design.

During the entire building process of the design system I worked with engineers to hand off components that were prototyped, spaced and redlined. This helped the transition from design to code providing the correct documentation on the components and token names to easily reference. The development team used Storybook to house the components and to undergo a review process with me.

UpTrade wanted to offer users a reliable solution for selling their old device or purchasing a new one. The reason was lack of trust and authenticity in third party businsess that offer this solution. Most common users prefer carriers because that was the original origin of the device but if they did not trade in their old device usually it is kept in a drawer collecting dust. They had a selling site up and running but was not meeting the needs.

My solution was to start from scratch and focus on the problems of our users, by simplifying the user experience and giving everyone accessibility to the technology they want at a price they can afford. We need to be the first option for anyone trying to buy/sell a device and create the easiest process that is transparent from start to finish. Giving the users more than just an option but a solution to their problem and support for any other obstacles they may venture.
• Wanted to make technology affordable
• Empower the world by extending the life of used electronics through the hands of others
• Commit to providing a safe and trustworthy service for everyone
• Provide a user friendly experience and put the customers in the center of it

1. Conduct a competitive research and audit their experiences based on customer needs
2. Schedule customer interviews to collect pain points that can be converted to visual solutions
3. Test user flows, wireframes, and A/B test multiple experiences through prototypes
4. Redesign the visuals to match the audience that we are targeting (colors, typography and photography)
5. Create a design system that can keep both platforms consistent and cohesive
6. Launch beta testing for a full week in order to catch any broken components
7. Review data after launch to make sure it is meeting the outcome we are looking for (CVR + bounce rate)
8. Generate feedback and revise the experience until the goals are met

1. Growth of smartphone market
2. Smartphone sales in the United States

I conducted rounds of interviews with current users and users who did not use the product. We needed to find out exactly what our customer problems are and how can we niche the scope of the pain points down into achievable solutions.

Verdict based on data and revised problem and solution statement.

Once the user goals and journey was finalized I moved forward with creating a experience flow for quickly selling your device. This flow was already made but the experience did not match the user needs and was updated to tackle the pain points that were mentioned above.

After colloborating with the stakeholder and the engineering team I moved forward with creating a information architecture to layout the entire site. Since we were introducing a new buying platform that did not exist it would need to be a global website that housed both of them.

After the direction was set with the wires I completed the remaining screen wireframes for the selling and buying platform which were two different experiences combined in one.

The current typography and colors did not appeal the idea of trust and being authentic. We needed a new palette along with a strong and clear typography which spoke to the audeince on desktop and mobile.

I came up with a general style guide that we can follow along with a mini UI kit. This would include colors, typography and atomic components such as buttons & icons.

A quick concept to show the before and after of the sell home page.

From rough wireframes to a high fidelity design, this would be the global platform that supported buying and selling at the same time. Unified experience that solved the needs of the user. The core pages were constructed for the final design.
• Global home page (Buy + Sell)
• Uptrade landing
• Catalog
• Product detail
• Shopping cart
• Warranty
• Refund & Exchange
• Account
• Checkout

Our results after testing proved that we stood out from the rest of the competitors and had an edge when it came to market selection. From opportunity to price and experience Uptrade was setting the standard for buying and selling used devices.
I came up with a general style guide that we can follow along with a mini UI kit. This would include colors, typography and atomic components such as buttons & icons.

Allergan Aesthetics classically operated under empowering clinics to grow their business and as the user-base began to grow, there was an growing need to build a educational platform support their customers. We decided to fill the gap with a coaching app that would provide desired business learning specific to their practice area.

Customers have voiced lack of business skills, knowledge, and time to grow their clinics with confidence. In order to do this I had to create a learning experience that provides a structure from learning into real world application for the future state experience.
• Industry is growing rapidly; find it difficult to recruit people with expertise to support that growth
• Unsure how to optimize changes and/or where to invest to guarantee growth and increased profit
• Don’t know how to craft a strategic vision or business plan; more comfortable with patients.

A new customer journey was needed to funnel the user from the main website into the learning experience platform. Which allowed the current customers and new customers to have visibility that a learning experience exist.

After identifying the learning experience, I broke up the tasks into journeys based on certain scenarios.

After completing the first draft of the flow diagram, I needed to refine the new user and returning user wireframes. This would be the last step before going into design and adding the brand visuals.

The visuals were given to me from the brand team and was a high level design language. We still needed to consider that this is a mobile application experience and how to bring in the visuals without distracting the user.

Key takeaway, I used small sections or patterns from the flow diagram and used those as a foundation to start adding the visual design language.

In order to get buy in from stakeholders I took 3 rough wires and applied the brand visual language. This confirmed the direction and was a quick way to get buy in without making every screen and revising.

Design sections that made it to the MVP
• Landing and login
• Questionnaire sections
• Review your goals
• Engagement section (Email)
• Home
• Course view
• Lesson View
• Assignment view
• Booking a VBC
• Milestone
• Settings