Led team of 3 front-end developers, 3 data scientists, and 2 UX designers to create high fidelity MVP using Figma UI Design System for a mobile iOS app to improve user engagement. Prototype was tested for accessibility. Presented demo to senior WNBA executives and development team which resulted in WNBA incorporating majority of proposed features that are now part of their official app!
I worked as a Product Designer to lead a multidisciplinary software development team by coordinating front-end developers, data scientists, digital marketer, and UX designers while contributing on UX research and UI development for MVP prototype within 24 hour Hackathon. I was nominated because of previous front-end development experience, statistical background knowledge from finance that was relevant to data science, and digital marketing experience – that I became the point of contact for disciplines and managing the project.Â
WNBA executives have presented a business challenge :
I proposed a hybrid process between Design Thinking Framework and Google Sprint Framework supported by simple agile methodologies because of 24 hour time project limitation. Figma FigJam (Miro equivalent) was chosen as a collaboration tool. Also, during ideation Disney’s 3 Room ideation exercise was used.
This was the broad scope of design challenge presented by WNBA executives.
The WNBA is the longest-running professional women’s sports league in the country with combined viewership in 2021 of 379k viewers among ESPN and CBS, 23.8 million page views on official website, and 10% growth in League Pass live game package subscribers.
A network of partners that includes product managers who own WNBA Digital Portfolio, Developers for WNBA League Pass, Designers for WNBA.com website, Content Managers and Consultants
Changemakers, entrepreneurs, influencers and content creators who invest and inspire WNBA (Deloitte, Google, US Bank) and regional & national sport networks.
I created Fig Jam (similar to Miro) for our team. For some, it was the first time using the tool so we did an ice breaker by introducing ourselves using cards and choosing a team name. I introduced the philosophy of design and set up a Kanban Agile Board with lanes and WIP limits where each sticky note corresponded to department for keeping track of deliverables and transparency. During the meeting, we discussed limitations and technical scope within the deadline.
In order for everyone on the team to have a common understanding of the problem, I suggested to 30 minutes per specialized department to do secondary research and take 10 minutes to present insights to everyone. The Fig Jam collaboration board was a visual artifact that anyone could refer to, a visual space for common understanding of the problem. To support UX research, I examined 3 competing apps and relevant Neilsen reports.
After each specialized department representative presented the research findings, I set a count down timer for everyone to go around individually to share the insights they found interesting as I marked those insights with stars. Several themes began to emerge. Furthermore, a How Might We statement was created to narrow down the addressable problem space.
Increase in engagement while consuming sports content
Cryptocurrency and sport related gambling growth
Increase in connectivity and growth in digital platforms
To prepare for stage of ideation, I led the creation of a persona based on research insights to keep the user centricity focus during design and development process. The needs, desires, and goals of this user were referenced during the formulation of the prototype and a sanity check of making design decisions – making sure there is alignment to value brought to user.
After HMW statement, themes, and persona were developed, each specialized department took 20 minutes to generate solutions towards addressing the problems – the divergence phase of ideation. Afterwards, I facilitated discussion of sharing ideas and building upon them outside of departments. It was fascinating to observe how outside departments such as digital marketing had ideas for data analytics and visa versa. This cross pollination and improvement of ideas was positive. Then, during divergence phase I facilitated common critique of ideas where the best ideas were left. I then converted final solution ideas into MVP Features while keeping in mind requirements for big data analytics.
Using the Minimal Viable Prototype (MVP) features, I led the development of low fidelity prototype sketches. I had to make sure to keep in mind the technical limitations and needs of data team during formulation of wireframes.
Figma UI Design system was created as a main source of information for front-end developers. I trained the front-end developers to extract CSS code attributes from FIGMA to expedite developer handoff. As UX team worked on producing hi-fi wireframes, front-end team had real time access to reference files.
To ensure adequate contrast between UI elements, I conducted WCAG accessibility check.
High Fidelity Figma prototype was created as I coordinated with UX designers to stitch wireframes and add visual UI components using the design system. Meanwhile, front-end developers created a functioning prototype. I was the point of contact to explain interactions and design elements for front-end developers.
I coordinated the development of presentation to make sure each specialized department was represented by a speaker from front-end development, data science, and digital marketing. As a UX design lead, I was responsible for presenting the FIGMA prototype to WNBA executives. The presentation was a success because the WNBA executives were blown away by many features developed while some claimed that several features were secretly being developed – which means that our design team was on the right path! The WNBA developers were impressed by the design system used during formulation of prototype since they began to incorporate such practice in-house with front end developers.
This project was a success because many features are now integrated in official WNBA app.
There were several key learnings after completion of this project.
Adjust design process to essentials, especially when facing tight timeline or budget constraints. The value of UX for developers is tangible because the UX process minimizes development of time and avoid pursuit of flawed ideas.
I learned that having a generalized understanding of each discipline was helpful in communicating with specialized team members while making sure that we were building a product that added benefits for the user and business value.
Agile methods of a simple Kanban board and segmentation were effective at combatting overwhelm. The front-end development team could not believe the quantity of features that were developed in such a short period of time and felt high achievement satisfaction.
Led team of 3 front-end developers, 3 data scientists, and 2 UX designers to create high fidelity MVP using Figma UI Design System for a mobile iOS app to improve user engagement. Prototype was tested for accessibility. Presented demo to senior WNBA executives and development team which resulted in WNBA incorporating majority of proposed features that are now part of their official app!
I worked as a Product Designer to lead a multidisciplinary software development team by coordinating front-end developers, data scientists, digital marketer, and UX designers while contributing on UX research and UI development for MVP prototype within 24 hour Hackathon. I was nominated because of previous front-end development experience, statistical background knowledge from finance that was relevant to data science, and digital marketing experience – that I became the point of contact for disciplines and managing the project.Â
WNBA executives have presented a business challenge :
I proposed a hybrid process between Design Thinking Framework and Google Sprint Framework supported by simple agile methodologies because of 24 hour time project limitation. Figma FigJam (Miro equivalent) was chosen as a collaboration tool. Also, during ideation Disney’s 3 Room ideation exercise was used.
This was the broad scope of design challenge presented by WNBA executives.
The WNBA is the longest-running professional women’s sports league in the country with combined viewership in 2021 of 379k viewers among ESPN and CBS, 23.8 million page views on official website, and 10% growth in League Pass live game package subscribers.
A network of partners that includes product managers who own WNBA Digital Portfolio, Developers for WNBA League Pass, Designers for WNBA.com website, Content Managers and Consultants
Changemakers, entrepreneurs, influencers and content creators who invest and inspire WNBA (Deloitte, Google, US Bank) and regional & national sport networks.
I created Fig Jam (similar to Miro) for our team. For some, it was the first time using the tool so we did an ice breaker by introducing ourselves using cards and choosing a team name. I introduced the philosophy of design and set up a Kanban Agile Board with lanes and WIP limits where each sticky note corresponded to department for keeping track of deliverables and transparency. During the meeting, we discussed limitations and technical scope within the deadline.
In order for everyone on the team to have a common understanding of the problem, I suggested to 30 minutes per specialized department to do secondary research and take 10 minutes to present insights to everyone. The Fig Jam collaboration board was a visual artifact that anyone could refer to, a visual space for common understanding of the problem. To support UX research, I examined 3 competing apps and relevant Neilsen reports.
After each specialized department representative presented the research findings, I set a count down timer for everyone to go around individually to share the insights they found interesting as I marked those insights with stars. Several themes began to emerge. Furthermore, a How Might We statement was created to narrow down the addressable problem space.
Increase in engagement while consuming sports content
Cryptocurrency and sport related gambling growth
Increase in connectivity and growth in digital platforms
To prepare for stage of ideation, I led the creation of a persona based on research insights to keep the user centricity focus during design and development process. The needs, desires, and goals of this user were referenced during the formulation of the prototype and a sanity check of making design decisions – making sure there is alignment to value brought to user.
After HMW statement, themes, and persona were developed, each specialized department took 20 minutes to generate solutions towards addressing the problems – the divergence phase of ideation. Afterwards, I facilitated discussion of sharing ideas and building upon them outside of departments. It was fascinating to observe how outside departments such as digital marketing had ideas for data analytics and visa versa. This cross pollination and improvement of ideas was positive. Then, during divergence phase I facilitated common critique of ideas where the best ideas were left. I then converted final solution ideas into MVP Features while keeping in mind requirements for big data analytics.
Using the Minimal Viable Prototype (MVP) features, I led the development of low fidelity prototype sketches. I had to make sure to keep in mind the technical limitations and needs of data team during formulation of wireframes.
Figma UI Design system was created as a main source of information for front-end developers. I trained the front-end developers to extract CSS code attributes from FIGMA to expedite developer handoff. As UX team worked on producing hi-fi wireframes, front-end team had real time access to reference files.
To ensure adequate contrast between UI elements, I conducted WCAG accessibility check.
High Fidelity Figma prototype was created as I coordinated with UX designers to stitch wireframes and add visual UI components using the design system. Meanwhile, front-end developers created a functioning prototype. I was the point of contact to explain interactions and design elements for front-end developers.
I coordinated the development of presentation to make sure each specialized department was represented by a speaker from front-end development, data science, and digital marketing. As a UX design lead, I was responsible for presenting the FIGMA prototype to WNBA executives. The presentation was a success because the WNBA executives were blown away by many features developed while some claimed that several features were secretly being developed – which means that our design team was on the right path! The WNBA developers were impressed by the design system used during formulation of prototype since they began to incorporate such practice in-house with front end developers.Â
This project was a success because many features are now integrated in official WNBA app.
There were several key learnings after completion of this project.
Adjust design process to essentials, especially when facing tight timeline or budget constraints. The value of UX for developers is tangible because the UX process minimizes development of time and avoid pursuit of flawed ideas.
I learned that having a generalized understanding of each discipline was helpful in communicating with specialized team members while making sure that we were building a product that added benefits for the user and business value.
Agile methods of a simple Kanban board and segmentation were effective at combatting overwhelm. The front-end development team could not believe the quantity of features that were developed in such a short period of time and felt high achievement satisfaction.
