Creating experiences based on data & research
Magic Hub is a functioning interactive home display with supported mobile app and a iOS watch that improves household coordination.
I worked as a Product Designer, UX Researcher, and Front-End Developer to build this product.
At the beginning of the project I set personal goals including :
While designing, I mostly followed traditional design thinking process by going through convergence and divergence phases while keeping user-centric focus. However, at times I took steps back to previous phases after gathering insights in order to refine the problem statement and improve the prototype.
To explore the problem, I interviewed 5 couples and studied secondary research sources. Afterwards, I created an affinity map to synthesize the insights that emerged.
Living with John for over 2 years in Toronto. Both struggle coordinating responsibilities. Works in IT, managing marketing.
Living with Nader for over 3 years in Toronto. Both complain about household responsibilities. Works in IT, in project management.
Living with Leonardo for over 3 years in Toronto. Both struggle coordinating responsibilities and planning social events. Works in IT, in technology sales.
Choosing Occupation & Early Adopters
This chosen occupation was chosen because of higher propensity to adopt technology. According to research, 4% of the population are early adopters of technology, they’re more likely to be working fulltime (63% versus 41%), and to be in IT field (11% versus 3%). They’re more likely to be younger, between 25 and 39 years of age (YouGov Data).
User Interviews
Various empathic listening methods to elicit deep responses including work from Criss Voss and Carl Rogers – labelling, mirroring, and dynamic silence.
Problem Landscape
Couples struggle to coordinate household responsibilities while living together and keeping up with their busy lives. At the same time, couples who share household responsibilities report higher levels of relationship satisfaction. On the horizon, there is significant growth in technological IoT market that may address this problem.
Using interview notes, individual data points from each participant were categorized into goals, gains, and pains using FIGMA. Themes began to emerge.
After synthesizing the insights from research, 3 major themes emerged where one one chosen.
One person uses a mobile phone calendar but doesn't share
One person makes plans in their head and expects the other to mindread them
We gather around the kitchen and use vertical surfaces to display information (calendars, stickies, reminders, etc.)
We tend to use vertical surfaces and gather around fridge to communicate information, store reminders, and keep track of notes. However, the analog approach has significant drawbacks – we can’t update them on the go, calendars can be challenging to write inside, and lack of data flexibility. I explored further how people interact with vertical surfaces at home and in outside environments such as subways, malls, and busses. Through observation, what I learned was that we use tapping gestures with vertical surfaces more often. This was the major insight that was useful later on during ideation in choosing the kind of interactions.
I formulated a persona to reflect the demographic of the average user I was targeting.
Then I created an experience map to illustrate the journey persona is taking with associated steps and emotional experience.
Based on user stories, I created epics, and then formulated the task flow. Once the user reaches home, several user stories are met including viewing today’s time, weather, current day, and upcoming events. Then the user is able to create events and add details. Through scrolling, events are seen in the future. Then, voice is used to schedule events. At the beginning, personal calendar data is captured and later presented allowing switching between the family calendar. All done on large surface.
I assembled physical touch display after ordering required parts and installed operating system with a microcomputer that powered TV in vertical position to get ready for prototyping further.
After ordering all the required parts, I have assembled the MVP prototype inside my own kitchen and mounted everything on the wall.
I wanted to get experience in coding in order to be able to communicate as a product designer in future with developers. With my limited beginner knowledge, I was able to learn how to configure Raspberry Pi operating system, navigate and install to test over 39 GitHub repositories and configure them, and most importantly learned how to modify CSS and layout to build what was in specification of my MVP.
After creating a large wall mounted surface, I translated large surface into mobile version in order to meet the requirements for BrainStation project. Later on, after user testing, users wanted mobile version to control the large screen so it all worked out amazing. For the large surface, I set up 12 column grids which are a standard for desktop screens and then worked towards mobile. Time widget was not included in mobile as mobile phones have time indicator in status bar.
Using the task flow and vertical touch screen, I developed sketches using UI inspiration with InVision followed by creating mid-fidelity prototype.
After task flow is created, it’s time for inspiration. Designers create Inspiration Boards that are a collection of UI components, patterns, and interactions that users will find beneficial in completing the job they are trying to do.
From this collection, low fidelity sketches would be created to explore variations of possible screens.
InVision is a platform to organize the visual elements on one digital board.
Dribble, Mobbin, and UX Archive were some of the websites that were used for inspiration.
A card is a container for a few short, related pieces of information.
Let’s take the best from what Google Calendar, Apple Calendar, Fantastical, and Sunrise Calendar has to offer.
How would the cards look like for entering events? Is there a way of having a card pop out instead of blocking the whole screen? How would calendars look like in static state?
More examination on best calendars that are out there.
How would the cards look like for entering events? Is there a way of having a card pop out instead of blocking the whole screen? How would calendars look like in static state?
Form fields enable users to fill out a form. While looking at the task flow, I began thinking about at which areas the users would be inputting information.
Inputting user information during sign up process deals with inputting names and selecting calendars to sync. Information is also inputed at the event page with details.
Considering it’s a large visual surface we are working with, the fields should be large and easily clickable.
How would UI look like to make it easy for household members to enter information?
Icons are visual representation of an object, action, or an idea. What kind of icons could be representing calendars, events, and voice recognition? What about weather?
Navigation is generally defined as the set of actions and techniques guiding users throughout the app or website, enabling them to fulfill their goals and successfully interact with the product.
What can be displayed to make navigations easy? How should voice recognition step look like?
For more comments and inspiration pieces visit the InVision link bellow but the ones presented here were the essentials.
Using inspiration gathered from UI Board in InVision, I began the divergent phase of skething solutions and potential navigation flows of how the first prototype will look like. No critique just yet. Open minded brainstorming, an exploration of a range of concepts and ideas that relate to chosen task flow.
More sketches.
A timer was used for 30 minute increments for 3 sessions with breaks in between each session. Since imagination is limitless and as creative people we are abundant with ideas, a timer served as a creative constraint while maximizing focus time to extract a workable number of ideas. In other words, without time constraints, divergent phase would continue forever which will be counter productive in order to be prepared for the next phase.
After stepping back, it was time for convergent phase of sketching. Having brainstormed earlier, I marked began highlighting areas that seem interesting, essential, important and areas that may not be relevant for upcoming solution sketches.
More sketches.
Best sketch solutions were then chosen.
Now it’s time to put best ideas together.
From a narrowed down paper sketches, an actual prototype began to emerge.
A hand drawn low fidelity prototype was created.
Normally after this step I would prototype the hand drawn sketch with Marvel’s Pop app but because the screen size is bigger then the size of cell phone the app was not applicable in this situation.
Figma interactive paper prototype was created.
Because I was unable to use Marvel’s Pop app, I decided to recreate the same experience using but using Figma. Still using paper. Figma mobile functions similarly to Pop mobile app. Problem solved.
Transferring paper solution sketches from low fidelity prototype, using Figma, a mid fidelity prototype was created. No detailed UI elements but rather approximations of how the app would look like in grayscale. No color was used because that is often considered a distraction during upcoming phase of user interviews. Only the core elements are presented with components that are essential to the task flow described previously.
After going through the paper low-fi prototype earlier I realized the prototype needed couple of more frames to illutrate changes during core functions, reflected in the live prototype. Further, I added a logo during Google sign in for consistency and aesthetics. Finally, a secret button to reset prototype to save time testing next person.
A mid fidelity prototype was created.
Once the prototype was created and tested for basic functionality, user testing was the next step.
Goal: Conduct usability testing with at least 10 users in order to improve design of the prototype before creating a next prototype. Understand the mental map of users and evaluate their experience in order to create user centric product.
Criteria One: No Designers
In my experience doing tests with fellow designers leads to big bias towards aesthetics, much like how software engineers towards coding.
Criteria Two: In Person Testing Only
Over the years in entertainment I became highly skilled in reading body language and empathic questioning which is my strength. Too much info is lost on Zoom.
Criteria Three: Under $20 Budget
Living the student life.
I went for a walk and explored…
I walked into one small business called Ed’s Mercantile located on one of the busiest streets in Toronto, Bloor Street.
“Hey Leo, my vendors have bailed tomorrow so there is nobody selling anything in front of the store” said the owner. “Well, I am doing a UX project, what if I borrow the space?” I answer. “Sure, see you tomorrow.”
How am I going to set up big screen?
What will be the reward under $20?
How am I going to do 10 tests?
What am I doing in the middle of tests?
How can I make this experience a win-win for store owner?
Solid Wall Secured: I find a wooden skid realize that if that is flipped vertically, you can mount a large screen on it so it resembles a kitchen environment. I ask them if I could have it and they end up helping me carry it home because its heavy.
Transport Dolly Secured: In order for me to carry the “wooden wall” I now needed to figure out how to carry it physically to the store. I find a dolly that someone threw out because it had one flat tire. I couldn’t believe it. The universe aligned. Putting this wall on the dolly and wheeling it on one wheel I somehow make it to the store.
No Internet, No Problem: Because Figma would need internet. Wi-Fi of the store doesn’t reach it. I sync my cellphone as a hot spot for mobile Figma!
Rewards Secured
What am I going to give participants and why would they even care stopping and giving me time, half an hour, even more?
I walk to a local convenience store and see a table full of perfectly ripe one-day organic bananas. I buy the whole table for $11.35 which fits under $20 budget.
One organic banana was offered as a reward to each participant because they taste great and everyone loves bananas 🍌
I find an exotic plate and set up a mountain of banana’s on one bowl. Literally a mountain.
I raise customer awareness further for my user test.
I ask my amazing partner to blow up balloons and fixate them around the store. People are noticing and stopping. That’s the plan.
Once the participants were selected and the prototype was tested for basic functionality including having hot spots hidden within Figma, participants were greeted with the following script before getting into performing any tasks.
Participants were asked to perform essential tasks while verbalizing their responses under several scenarios.
Empathic Listening
Observing Non-Verbal Communication
Body language was observed including micro expressions. Whenever participant displayed incongruent body language with respects to what they said, empathic listening techniques were deployed from above to clarify the response.
I come up with any idea of filming a video and posting it on Instagram that the store owner recorded. During video, I promote the store by attracting people to come, do the user test, with exchange for bananas.
Hours later I meet several recruits because of the awareness that was raised. This was positive for awareness for store owner also.
Stopping Couples On Street:
I stop people on the street who are walking together and holding hands which is a safe indicator they are a couple. Also, those not in a rush. It worked. Asked for 25 minutes. “I am a student doing a project…” line works better tha “Can you help me?” Everyone loved bananas.
The balloons, crazy wall, salsa music, lit up display, a mountain of bananas worked slowing people down.
Once someone agreed to proceed, I turned off the music and did the test. Some tests were 45 minutes because of amazing insights that people generously shared.
Regroup After 5 User Tests
After 5 user tests, I take out the laptop and went inside the store to take notes before doing more user tests.
Created a marketing campaign in 5 minutes.
I come up with another idea to raise brand awareness after synthesizing notes. The board is outside and can’t just sit there.
Using FIGMA, I create an advertising display with a dancing banana. It goes on social media. Strangers stop and take pictures. I get more user testers. 5 minutes. Store is flooded with visitors.
I manage to import a GIF and match the store’s typography to create a sign that stopped people. Watching through the window at the back, I saw people taking bananas with smiles, stopping to take a picture of the sign, and then going inside the store! t worked!
The video get’s posted on official social media.
Win-Win number two.
Being in front of the users is one of the most valuable activities because the insights were useful for iterations and have shown my blindspots as well as opened up ideas I never considered before.
These are the participants that were interviewed during the first round of interviews. For the purpose of this assignment, I will be sharing the insights from 10 users in total.
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
After conducting user interviews and recording notes, here are the patterns that emerged regarding core tasks.
After analyzing individual testing records, a summary of insights was created. They represent core issues the users experienced.
Checking weather and navigating calendar were the biggest issues.
Assumptions
I believed that the weather would be intuitive to understand with the line graph. People would want to provide location without hesitation and “add a user” text would sound personal.
Ways to Improve Insight Accuracy
Testing with greater sample size and with users that resemble the persona would improve accuracy of overall insights. Part of this will be done in the next phase.
Design prioritization matrix shows the relative importance of a set of items based on two criteria’s – the value to the user and the effort required to implement the design choice. The low hanging fruit is the highest value for the user with lowest effort required to make that happen.
Highlighted in green are the concepts that are high in value and require mostly low effort to make maximal difference for the users.
Weather: Add Y Axis: Helps with understanding of temperature
Location: Add Description: Tell user why location is important
Navigation: Put Arrows on sides of month name: Users are used to having arrows on side of month
Navigation: Add Full Text to Toggles
“I don’t know what W, M, Y stands for, takes effort to think”
Navigation: Add Circle: “I look at the month to see what day it is”
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
These are the participants that were interviewed during the first round of interviews.
For the purpose of this assignment, I will be sharing the insights from 10 users in total.
Being in front of the users is one of the most valuable activities because the insights were great and have shown my blindspots as well as opened up ideas I never considered before.
After conducting user intervies and recording notes, here are the patterns that emerged regarding core tasks.
After analyzing individual testing records, a summary of insights was created. They represent core issues the users experienced.
Checking weather and navigating calendar were slight issues.
Assumptions
I believed that adjustments from previous sections would be beneficial.
Ways to Improve Insight Accuracy
Testing with greater sample size and with users that resemble the persona would improve accuracy of overall insights. Part of this will be done in the next phase.
Using information from summary of insights and other issues gathered from testing records and sessions output document, a set of sticky notes were created.
A design prioritization matrix was constructed using sticky notes.
Design prioritization matrix shows the relative importance of a set of items based on two criterias – the value to the user and the effort required to implement the design choice. The low hanging fruit is the highest value for the user with lowest effort required to make that happen.
Highlighted in green are the concepts that are high in value and require mostly low effort to make maximal difference for the users.
Inspirational Quote: Add Inspirational Quote: Users want a motivational quote or something with affirmations. Many wanted this feature although it was not considered earlier.
New Format Note: Ability to format a note
Weather: Create Labels
Add User: Change Text: Rephrase the text; Confusing and impersonal, has a strange question mark… add a person?
View Event: See who created event: In households with many people, it can get confusing who created the note
I went through a multi-stage process to create a brand name and associated wordmark.
I followed multi-step process bellow to develop the name, tagline, and associated mood board.
A moodboard is an arrangement of images, materials, pieces of text intended to evoke a particular style or concept. It’s a tool that I used to create a visual identity for the solution. I began the process by brainstorming adjectives related to brand.
After brainstorming the adjectives that embody the brand, I created a top 5 word list to narrow down the words that I felt reflected the brand the most.
By using the A more than B list, I was able to determine the boundaries of the moods and concepts of brand’s identity.
While brainstorming for potential names, I kept the words innovative, minimalistic, elegant, safe, and magical in mind.
It was challenging to select the name because there were so many ideas available but based on the previous filter of words I was able to narrow down the choice.
“Magic Hub” with “The hub of your home” tagline was chosen because of several reasons:
For inspiration, I used InVision to assemble images that reflect the color, mood, and style of reflected brand values previously selected.
After assembling the images to set the mood, I began searching for inspiration for typography that will reflect my wordmark to make the brand stand apart from others.
A wordmark is a type of logo design that includes only the company name, a text only typographic treatment of the name.
I was looking for thick and simple sans-serif font with thick weight to represent minimalistic look and increase accessibility because of easier visibility.
Using the inspiration gathered from the moodboard, I began sketching wordmark ideas with variations of letter formations. The purpose of sketches was to get creative juices flowing and create connection to the meaning of the brand.
San Francisco font was chosen because it’s simple and elegant without having rough edges.
Here are some of the variations that I brainstormed using the sketches done previously.
Capitalizations and weight were chosen as an accessibility consideration and higher wordmark visibility.
As I was using Figma to create Vectors, I came up with few more ideas. Creativity never stops.
After selecting the main choice, I decided to experiment with three two other fonts to see if there are major changes in how it looks.
I also added a gradient. That gave it a polished look and transition between black color into accent color.
I decided to keep the choice with San Francisco. The lato font although sophisticated seemed too thin and would be challenging to see. Futura font’s “i” is challenging to see and may pose accessibility issues.
After testing the logo in front of family members, I decided that this will be the final choice as it relatest best with my brand’s values. It’s minimalistic in nature. The circle represents some of the circles present in calendar’s view and is a form of a reminder for an event which is a core feature. We also tend to read from left to right in Western hemisphere, so the letter M will stand out and be easily remembered.
Once the user interacts with technology, there is a possibility of animating the M within the circle in elegant ways that are non-distracting which is another way we can make the name stand out during use.
Here are the variations of the black and white versions of the wordmark to have high contrast options at the disposal for future.
After word was was selected, I ideated the design for the logo to have a symbolic effect.
After word was was selected, it as time to determine the mobile icon for the app. I began sketching for ideas that resemble the values of the brand along with the context of home based coordination solution.
After coming up with sketches, I decided to settle on an icon that is minimalistic, magical, and feels safe.
It’s a simple symbol to perceive which will aid in easy recognition & recall for users.
The style is also consistent with the wordmark.
The icon fits the brand’s chosen representative words of innovation, minimalism, elegance, safety, and magical feel.
Furthermore, it represented symbols and illusions within the design.
Using InVision, I utilized the moodboard to create high fidelity colors related to the brand.
Using InVision, UI inspiration board was expanded to focus on high fidelity treatment regarding typography, colors, and icons.
From the mood board assembled previously, several colors stood out.
These colors seem to fit with the feeling that the brand is trying to evoke.
The chosen colors for the brand also correspond to psychological effects with relation to perceived color.
Black – evokes a feeling of sophistication and minimalism
Grey – a neutral color where the impressions of this color is easily affected by their surrounding colors
Blue – evokes a sense of loyalty, dependability, and trust
After trying combinations, I was able to choose the colors that seemed to work together while providing contrast.
Primary colors are the building blocks from which all other colors are derived
Secondary colors are color combinations created by the equal mixture of two primary colors.
Tertiary colors are the combinations of primary and secondary colors, the accent colors that pop.
I kept in mind the golden ratio which represents that 60% of colors should be primary, 30% secondary, and 10% tertiary. These selections seem to fit the golden ratio criteria.
After choosing colors that look best, I organized the colors in a color palette to include functional, neutral, and systemic colors. This made it easier to have one place of reference for colors that I will come back to as I inject color into UI
The atomic design system was used which is a methodology created by Brad Frost seeking to provide direction on building interface design systems more deliberately and with explicit order and hierarchy.
To ensure that color combinations were accessible I used an accessibility tool to determine best WCAG legibility and accessibility ratings.
I created an Apple Watch prototype because it fits within the user stories. They included being able to manage events and reminders while on the go and having an easy way of entering information through voice – which are the core functionalities of the watch. The watch functions as an input and reminder medium compared to the primary surface that is used to look at for general information. Furthermore, this fits within the persona of a person who works in IT, having positive outlook on technology, and a person who loves trying new technology. By having a third compatible device, there is an opportunity for greater adoption of this new technological solution and an opportunity of increasing usage.
Voice input is one of the key features that is supported by user stories. Voice diagram helped me plan animations and few visual modals that needed to be created to reflect the user journey more visually.
I created a responsive desktop and mobile version of website to promote the product after doing exploratory sketches, solution sketches, and deciding on breakpoints.
Using the design system, I created a mobile and digital board prototypes. Bellow is the mobile app that is used to control the Magic Board remotely.
There were several key learnings after completion of this project
It seems easier for a designer to tell developers to "make it pretty" but after experiencing the challenge of building, coding, and creating a prototype I learned about limitations of design ambitions.
Eye tracking technology can be used to increase accuracy of user tests compared to observational research methods.
Never do one kind of user testing, try to supplement other methods of validation, especially if working within tight timelines & budget.
Conducted heuristic analysis of Canada’s Tim Horton’s iOS mobile app for user flow of a persona trying to redeem points. As a result, key points throughout the user journey were identified and design was created to reflect improvements that increase business value. Our team won 1st place for presenting business driven design suggestions based on analysis.
As a UX Team Lead Designer, I led a team of 2 UX Researchers to conduct comprehensive heuristics analysis to improve the mobile app experience and was involved with designing the visuals of prototype. I proposed to improve this app after a personal experience of being a user tester for marketing agency that was involved creating Tim Hortons app.
At the beginning of the project I set personal goals on top of correcting heuristic issues including :
Our team applied the heuristic evaluation to the Tim Horton’s app. We found seven heuristic issues and prioritized three that had the greatest impact on the user’s experience using efficient design solutions. Our approach was through the lens of a returning user looking to redeem their rewards.
The most impactful heuristic was Consistency & Standards on the Homepage. We discovered that the header, which states to redeem awards, left the user confused as there was no action to take. To resolve this issue, we recommend deleting the “details” button text and replacing it with a “redeem” instead. This will eliminate confusion and frustration of the user and lead them seamlessly to the next screen.
The second most impactful heuristic is Recognition and Recall on the Details page. Here, we noticed that in attempting to redeem rewards, the amount of points are missing. Our recommendation is to have the points visible on the header to avoid the frustration of recalling that information.
The third most impactful heuristic was Visibility of Systems Status also on the Details page. We found that after selecting an item to redeem, there was no next step provided, leaving the user at a dead end. To rectify this confusion and frustration, we propose a call to action button to lead the user to scan and complete their task.
Overall, our team prioritized heuristics and solutions that would provide the user with the most value and feasible design effort.
A heuristic evaluation framework developed by Norm Neilson Group was used. It’s a usability inspection method that helps to identify usability problems in the user interface design. It specifically involves evaluators examining the interface and judging its compliance with recognized usability principles.
As a regular user of the Tim Hortons app, I was chosen by a user researcher from a marketing agency that did Tim Hortons app to share feedback. After visiting several in-store locations, I noticed that it was highly frustrating for retail employees to facilitate redemption of points for people and have observed frustration in body language and voice of users trying to open the app and redeem the points. There was a significant cost for business and user experience.
After user testing the app among the team, Redeeming Points function was chosen because it provided most overall frustration to user. The app was rated 4.5/5 and we wanted to get it to 5/5.
Scanning QR code after each purchase
Redeeming points after purchase and accumulation easily for food & drink items
Ordering items to pick up
As the person is standing in line trying to redeem points, considering that they are standing in line with social pressure of having people behind them who are usually in a rush – the user is feeling highly anxious going as they attempt to complete many steps trying to redeem points.
A heuristic analysis discovers usability problems within a specific area and how they impact the overall customer experience.
Our team used design prioritization matrix using Figma Figjam to determine high value and low effort design decisions for recommendations. A Design Prioritization Matrix is a useful technique to identify which problems are the most important to work on solving first. Click bellow to explore in-depth design process.
A prototype using Figma was created to reflect the design decisions that reflect the persona’s task flow of trying to redeem points. Less steps and less stress for the user and more business value, a win-win situation.
There were several key learnings after completion of this project
Having a framework, a checklist, of heuristics is a useful tool towards creating a seamless experience for the end user and eliminating usability issues.
I highly suspect that the usability issues could have been avoided if the agency put more effort into user testing earlier thereby reducing the development cost of revised design.
I learned how important it is to connect design decisions to business value as an antidote to creating designs that look great but don't provide measurable benefit to the business and the user.
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.
Created product strategy, redefined menu, improved customer experience to increase sales by 150% and customer retention by 35% backed by evidence based research. Facilitated weekly design meetings with business owner. Designed and launched a responsive website with 180% monthly visitor growth.
Say hello to receive access
Conducted competitive analysis and collaborated with business owner to develop a website with a service booking system making it easy for customers to schedule laundry pick up & delivery service. Interviewed local patrons to create a social media engagement strategy, designed graphics, and increased number of business reviews. Launched a responsive website and wrote SEO targeted content to educate prospective website visitors.
Say hello to receive access
SAI experienced challenges gaining traction regarding validating problem-solution and problem-market fit after release of Beta. As part of a product design contract, I led a team to uncover reasons of limited traction, introduced design thinking framework to align team members, and formulated a path forward. Through leading regular design meetings and conducting over 30 user interviews, major insights were identified. I created several Figma MVP prototypes and conducted user testing over 3 Sprints to develop a product roadmap using synthesized insights.
Say hello to receive access
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.
