The Challenge

Lululemon provides in-store yoga classes to customers as a way to extend their brand and mission. Potential class-goers need to know what classes are happening, what those classes entail, and when those classes occur during the course of the week / month.

This project was a design exercise and is in no way affiliated with Lululemon Athletica.


This app needs users to be able to: 

  1. sign in
  2. find classes
  3. add classes to their calendar

My Role

This was a quick design exercise I conducted on my own so I tackled everything from sketches to high fidelity comps.


Lululemon is already a well established company so I wanted to make sure what I designed aligned with their already existing business model.


Key elements of lululemon's community based strategy

  • design and develop innovative athletic apparel that combines performance with style and incorporates real-time guest feedback

  • locate our stores in street locations, lifestyle centers and malls that position each lululemon athletica store as an integral part of its community

  • create an inviting and educational store environment that encourages product trials and repeat visits

  • market on a grassroots level in each community, including through social media and influential fitness practitioners who embrace and create excitement around our brand

Source: Lululemon Athletica Annual Report 2014


primary target customer


Julie Miller

  • sophisticated and educated women who understands the importance of an active, healthy lifestyle

  • increasingly tasked with the dual responsibility of career and family

  • constantly challenged to balance her work, life, and health

  • pursues exercise to achieve physical fitness and inner peace




Athletic Apparel

  • Nike

  • Adidas

  • Under Armour

Women's Athletic Apparel

  • Gap

  • Athleta

  • Lucy Activewear

  • Bebe

Nike ( Nike + LA )




Whenever I'm designing anything, I like to first start with really quick sketches on paper. It's a quick way to get whatever is in your head out into the real world and get a birds eye view of the workflow and prevent getting bogged down with details.



An overview of the mockups starting from the sign in page to the add to calendar page.


High res images

Here are higher resolution images of the individual screens. 


annotated mockups

The Challenge

When employees are grabbing a quick cup of coffee, we have their attention for a span of approximately 10 seconds. We asked ourselves how we can best leverage this time span.

The Director of our department decided to purchase a digital display to to fit nicely behind our coffee machine at work. The project was very open ended and did not come with any set of requirements or goals.


The Vision

We developed digital signage that allows employees to engage by posting content such as an event or a Happy Birthday greeting to a co-worker. This content is displayed along with news headlines pulled from Twitter, videos, other curated content from the admin dashboard.

The purpose of this app is to:

  • Create a display that provides relevant and useful information for users.

  • Provide engagement and awareness toward KP related topics.

  • Develop a scalable product that can be easily implemented in other locations (even if it’s not in front of a coffee machine).

  • Develop a product that showcases and stretches our abilities.

My Role

Being a part of a small team of designers and engineers, I get to wear many hats.



The director of the department came to us with a monitor and full autonomy. We quickly dove into uncovering pain points and brainstorming. 


We brought the wireframes and mockups to life with animation through After Effects. It gave us a more realistic view of our product.

user testing

To ensure we were developing something useful, we made sure we conducted user testing throughout the entire process.


Meet the rest of the team:

2 Engineers

Lessons Learned

This wasn't the first digital display I've worked on. I've made plenty of mistakes and wanted to make sure I applied everything I learned to this new project.


Lessons learned from a previous project:

  • If you do not consider maintenance at the beginning of the project, it will come back to haunt you.

  • Content will become old and uninteresting very quickly.

  • Other departments/teams will ask if you can build one for their department. (This is where the goal of scalability came from.)




The users of the coffee machine are primarily going to be users of the coffee machine. Our primary users are those that sit on the same floor as us, the 5th floor.



We looked a few other companies and the type of content they were displaying on their digital display.



On the Left: Some initial testing to see which animation worked best. We used masking tape to indicate where a user would typically stand. 

In the Middle: Testing some higher fidelity prototypes. Making final adjustments. Our soft launch of the display. 



There are 4 different levels of information going from the most broad (1) to the most specific (4). 

1: Global - general information or news pertaining to healthcare, technology, etc.

2: KP - general information pertaining to Kaiser as a whole

3: Department - information pertaining to specific departments within Kaiser.

4: Individual - information pertaining to individual employees.



We knew we wanted to utilize a card system and so we went many iterations of animation to ensure the optimal experience. I also made sure I talked to engineering frequently to discuss feasibility. 


card layout

Now that we figured out how the card were going to move, we moved on to figuring out the layout of them. 


visual design

The monitor displays a series of cards that pulls content from Twitter, YouTube and custom made content. We went through several iterations of the visual design of the card while making sure we adhere to the department's style and aesthetic. 


user testing

We leveraged online tools and hallways testing to collect feedback and data.



Having come up with several different variations, we did some user testing to narrow it down to 3 possible choices. From those 3 choices we then conducted some hallways testing to narrow it down the the final design.



We want people to be excited about our product. In order to validate whether we were going in the right direction or not, we announced features that hasn't even gone into production. For example, we announced that we would feature the weather but it turns out no one cares about the weather. (Maybe because this is Southern California, where the weather never changes.)

We went back to the drawing board. That's when we discovered a pain point. Kaiser has an awesome shuttle system but the schedule is on this piece of paper that everyone always loses. With this in mind, we created a countdown for the next shuttle.


VISUAL DESIGN - final design

We created 5 different variations, one for each card category which includes: Social Media, Events, Videos, Shoutouts, and Quips.


the delightful factor

Not only do we pull live feeds from sources such as Twitter and YouTube, we created our own content. Our display is located behind a coffee machine so it's only appropriate that we showcase the types of drinks it makes through fun animated GIFs.

We realize most people already know what sparkling water or tea water is, but people still get a real kick out of it. Instead of the display and machine being two separate entities that happen to be in close proximity, this helps us create a relationship between the two things.

Nitty Gritty

If we want this display to function predictably and exactly the way we wanted it to, we needed to establish plenty of rules for it.

a few rules

Each card category has a few different rules and levels of access.


scheduling algorithm

How does the display know which card to pull? We knew we wanted the experience remain as diverse as possible so we developed an algorithm accordingly.

Next Steps

We're still hard at work perfecting, iterating, and exploring new ideas for this project. Our next big step is to create an admin panel that serves as a tool to allow users to upload and manage content.


wireframes - ADMIN PANEL

In order to create a scalable product that's also easily accessed by users, we need to develop an admin panel. Below are a few of the early iterations. 


mockups - admin panel

This page allows users to add/edit their own events. 


The Challenge

For typical patient with diabetes common tests include: Hemoglobin A1C and Creatinine. The results of these tests can be difficult to decipher due to its lack of context and color. If patients had a stronger understanding of their overall health, they would be better equipped to make better decisions about their health.

The Vision

The goal of this web app is to: 

  1. utilize human-centered design to develop a system of displaying lab results that makes it easier for patients to interpret
  2. create universally accessible data that can be accessed on desktop, tablet, and smartphones but also as a printout
  3. present patients with actionable items according to their specific needs that are both short term and long term

My Role

I worked closely with a Senior UX Designer and a Physician to develop a proposal and prototype to pitch for funding.


user testing

We collected both qualitative and quantitative data to aid design decisions and ensure we were moving in the right direction.

solution brainstorming

We had many meetings with physicians, designers and engineers to to come up with ideas on how to best create this interactive product.


We went to numerous rounds of wireframing to optimize and develop the best user experience possible.


Meet the rest of the team:

Senior UX Designer, KP Phyician


There are many problems we want to solve within the healthcare space but during the discovery phase we narrowed in on specific issues we can tackle.



We looked into existing products on the market.



Consulting the physician, we came up with several different groups of users.



Although we had many potential issues we could solve, we decided on one that suited the services of our department. We focused on 3 main topics: interactivity, connecting patients with healthcare professionals, and developing personal action plans for patients.


After honing in the problem we wanted to tackle, we ran with it.



After assessing several different existing products we began to understand what type of content we wanted to have while leveraging all the resources KP has to offer.


1st iteration

We developed the first iteration very quickly to get feedback on from physicians and managers.The consensus was to continue to push the digital experience and focus on the personalize action plan for each patient. 



After gaining a better understanding of what the physician is envisioning we went through another round of wireframes, this time spending more time fleshing out the details. 

3rd iteration

At this point I began to work with the Senior UX Designer to gain feedback and further develop the wireframes into mockups and eventually a prototype.



To make sure we were moving in the right direction we conducted some user testing.



Do users have an easier time interpreting bar graphs over line graphs? In this scenario, the accuracy remained the same. Regardless of the type of graph we presented, users were able to understand and interpret the graph. The biggest difference between all 3 solutions is the amount of time it takes for the user to get to that state.


overall health score

My first reaction to giving users an overall health score involved using icons since it avoids barriers of language. The Senior UX Designer suggested using a letter grade. For the age demographic we were aiming for as well as the fact that we only cater to those living in the US made it compelling. 

Although the standard deviation for the letter grade system was larger, users were able to develop an interpretation of their score quicker.


past results

We not only want to give users a more holistic, birds-eye view of their health but nitty gritty specifics as well. We aren't looking to reinvent the wheel here but we did want to try and optimize the time it takes for users to interpret and understand their results. Overall, we were able to improve this section by 17.5 seconds.


4TH ITERATION (final iteration)

Using all the feedback and testing, we made some changes and developed an optimized version.


We ended up with a clickable prototype that would help aid us in pitching the idea to business partners.


The Challenge

Our department (Business Enablement) needed a presence on the web that would showcase latest projects and keep potential collaborators a means of connecting with us.

The Vision

Business Enablement is a small part of an extremely large organization (Kaiser Permanente). We want to keep in line with the current style guide while providing some elements that would help us differentiate from other groups.

My Role

I worked closely with the director of Business Enablement along with a developer to ensure this website accomplished any business goals and was also functional.


ui design

Created the overall feel of the website through common elements and patterns to help facilitate efficiency. 


Created a layout of screens to determine how we want users to process information. Figured out the various states and behaviors of all the different elements.  

visual design

Took photos and designed other imagery to fit our needs and create a cohesive look.


meet the rest of the team:

Director, Creative Director, Engineer


After coming to a consensus on the basic structure of the site we dove into creating content.



The most important aspects of the site are projects and the team.


We filmed a video for the home page that would showcase the type of work we do but also expressed the culture of the department.


Wireframes & Mockups

Working alongside the creative director we went through several revisions to get the experience and look just right.


The website is an ongoing process that expands and flexes to fit department needs.


final design

We continue to periodically make changes as the needs of the department changes.



Business Enablement is still a fairly new department. As the needs of the organization changes, we are quick to make modifications.


This project was created during a hackathon sponsored by both Kaiser Permanente and Microsoft.


The Challenge

Sharing the real perspective, the whole story, a day-by-day breakdown of a patient’s lifestyle doesn’t always occur in a healthcare setting. So how is a patient’s story told to get the best care possible? For the 72 year-old Chinese woman who can’t speak English, for the scared man who conceals the severity of his symptoms, for the manipulative patient who tries to increase his dosage - we need to create a web application as a tell-all for what goes on outside of the doctor’s office.

The Vision

Alluringly sleek, intuitively straightforward, and invitingly useful, Round Robin goes beyond just a pretty interface. To open the doors to the magical world of 360-degree evaluation of a loved one, all it takes is for the primary caregiver (appropriately dubbed Batman throughout this submission) to create an account for the patient. Batman can invite friends and family to participate by using the super special invitation code generated specifically in reference to each patient. The physician is loaded along with supporting medical staff. Once someone logs in, they instantly see a dashboard of existing data and can easily add a new entry (aka new feedback). Busy medical professionals (especially those superstar doctors) can simply answer three general questions about how a patient is doing and optionally provide a quick note for each answer. For the loved ones with more time, someone who loves providing extensive narrative accounts, or someone who loves using beautifully coded forms, they can answer additional questions catered more specifically to the patient and condition. 

True to the name, the patient's loving circle of care uses a round robin style of reporting to provide a 360-degree view of the patient's patterns. Well, for the medical staff, its 360-degrees because they see all submitters and all content. Friends can’t see anything beyond their own submission. Batman fully sees what the medical staff has written, and can only see which friends and family members have submitted (but not content). Perhaps that means Batman has a 270-degree view. After all, no friend wants Mrs. Wilson to hear about their shenanigans with her son.

My Role

As a part of a team at a hackathon, this project was highly collaborative. 


user research

Due to the tight constraints of time of a the hackathon (48 hours) user research was condensed down to consulting with a physician quick interactions with other healthcare members.


At this stage we realized there were many features to had to cut in order to make this project feasible. With the help of a physician we were able to trim it down to a MVP.


While the developers took the wireframes and started building the product, I created mockups to further enhance the usability of the product.


Meet the rest of the team:

2 Engineers, Business Consultant, KP Physician


At the hackathon many people pitched ideas surrounding healthcare where we formed well rounded groups.



As we formed a group encompassing a consultant, a ux designer and 2 engineers we tossed ideas back and forth while gaining feedback from different physicians.



As we ideated and discussed what the product would be we quickly jumped into action and first laid out the wireframes. 



As a group we laid out the different screens and flow of the app.



As the engineers got started on building the underlying structure based on the wireframes, I went forward to create mockups.


This impromptu team has pulled together this project completely from scratch in less than 24 hours. Once well-rested and with less strenuous time constraints, we’re taking this idea back to Kaiser. We’ll attempt to implement it with existing care coordination platforms like ParkinsonNet and integrate it into Kaiser’s strong IT and clinical infrastructure. We’re KP-IT gurus, so that won’t be a problem. This app can bring together patient-based care, disease management, and a circular support group.

The Challenge

Thousands of lives are ended due to preventable diseases. Preventive care places the focus on preventing the disease in the first place through immunizations and healthy choices, but these choices are not always easy.

The Vision

This is an app that will help encourage members/employees to maintain a healthy lifestyle and promote preventive care. It consolidates biometrics and provides small rewards to those that strive towards a healthier lifestyle. By tracking metrics such as exercise, sleep, blood pressure, cholesterol levels, etc it shows both physicians and users a better picture of their health.

My Role


information architecture

Identified, audited, and grouped content as well as developing taxonomy.


Created and annotated wireframes for the app after developing system states.

usability testing

Sat down with people 1-on-1 to gain feedback and ask questions.


Researched competitors to create personas and journey maps.



Researched not only health related companies but also apps that incorporated gamification.



I developed a set of personas to help define the users and what their goals are. 


journey map

Taking a persona into consideration, I constructed a potential user's journey and potential scenarios. 


Card sorting, sitemaps, and wireframes. 



I created a list of content and used methods of card sorting to create taxonomy.



A sitemap was created to show how the navigation should be structured and the different relationships between the pages.


System state

The system state spelt out major components of the app.



Created wireframes for major components of the app.

The Challenge

Dunbar's number is a theory which states humans can only comfortably maintain 150 stable social relationships. Following this law, workplaces that exceed 150 people have a higher risk of becoming an anonymous workplace. The Southern California Business Information Office (SCAL BIO) has over 200 employees. This posed a problem. To maintain a sense of connectedness, we put a digital wall of faces in our lobby. The display in the lobby rotates through faces of SCAL BIO staff, and shares something positive about each employee.

The Vision

The keywords were clean and simple. Let the picture of our staff shine and encourage learning about our people. We had the employees answer the following 3 questions: "I like to", "I'm good at", and "I want to". The answers to these questions were combined with custom head shots to create a visual that consisted of a mosaic of animated tiles. The end result was a stunning center piece for our lobby that allowed us to promote our people and help us all feel a little more connected. 

My Role

Under the guidance of a creative director I not only worked on the user experience but also the visual design.


ui design

I developed a layout that took into account human behavior and worked around any technological constraints.


Utilizing my previous experience as a photography intern I held photoshoots for the staff that remained consistent but still allowed for their personality to shine. 

visual design

I created a set of icons to help visually represent the various statistics and information that's featured on the facewall. I also helped layout the typography and planned out the animation.


Meet the rest of the team:

Creative Director, Design Intern


Keeping in mind the purpose of the digital display, we explored different possibilities.



We utilized SurveyMonkey to create a survey that asked employees questions such as: "What is your favorite music genre?".


We explored different solutions such as touch screen monitors and utilizing motion gestures.


As we established what the limitations were and the types of monitors we would use we mocked up potential layouts. 



We established a look and feel through creating a color scheme, icons, etc. We also made sure to survey each person we took a photo of.



All the photography was done in-house in various conference rooms.



The animation of the facewall was created through After Effects. 


The final product was displayed across 6 monitors in a lobby.


final design

The video is played on loop and rotates through profiles of different people. 


As employees join and leave the team the facewall also gets updated to stay accurate. This happens on a biannual basis.

The Challenge

Kaiser Permanente is a large organization. KP Southern California alone serves over 3.7 million members, has 14 medical centers and 198 medical offices. In order to provide high quality healthcare we have a lot of projects, ideas, and pilots. Keeping track of all of these projects has proven to be difficult.

The Vision

The goals of this app is to:

  • Track projects by allowing users to upload new projects, edit projects, and find projects.

  • Help users more easily filter their views and reports based on their individual needs.

My Role

As the lead UX designer for this project I took on various roles that included usability testing and wireframing. 


usability testing

Since the users are scattered across the region it was vital that we took advantage of online usability testing.

Wireframing/prototyping/visual design

The wireframes and mockups were created through Adobe Illustrator and Axure.


meet the rest of the team:

2 Engineers, 1 Product Owner, 1 Scrum Master


Before going into developing this product we looked at the pitfall of our current solution.



Users can be split up into two main categories, those that do and don’t work for Kaiser.

competitive analysis

While looking into possible solutions we looked into applications such as Formstack.

Microsoft SharePoint Formstack
Purpose of the site:
This was the solution that was already in place. A tool to share, organize, and discover information.

Competitive Advantage:
• Store and access information securely.Integrate with other Microsoft products more easily.
• Changes can be made by non-developers.

• Usability issues.
• Does not create meaningful reports.
Purpose of the site:
Online form builder that enables users to create online forms, including surveys, contact forms, and event registration.

Competitive Advantage:
• Drag and drop, flexible form builder.
• Follows standards of the Americans w/ Disabilities Act, Section 508, WCAG 2.0
• Provides analytics / reports.

• Expensive to get an Enterprise Plan.
• Project filtering system is lacking.


We sat down and created a timeline for design and development to create a working prototype.



As a team of project managers, designers and engineers; we built the entire application in-house. 


high level workflow

Since we already had solution in place (Microsoft Sharepoint), users already had a mental model of the system. We did not alter the overall workflow too much to match that mental model, we also tried to keep terminology/taxonomy the same to ensure there is some level of familiarity. 



When trying to determine the MVP, we map out features according to their value and complexity. Complexity is directly correlated to the number of hours it would take to develop.



These are of course not all of the wireframes produced but just a few key screens. 

These were produced in Adobe Illustrator.


wireframes - detailed view

The filter function was incredibly important to our product and we wanted to get all the details just right. We wanted to answer questions such as: How many information is really necessary to show? How much information is too much? What happens when that piece of information gets too long?



These are not all the mockups produced, but just a few key select screens. 

These were created in Adobe Illustrator.




Along the way we continually tested the product to ensure that we were on the right track. Before it was even launched into alpha and beta testing phases, many of the issues were sorted out.

We also had a built in bug reporting / feedback system that allowed us to continuously gain feedback in areas that needed improvement. 

We also host bi-monthly meetings where we gather stakeholders and users to discuss new features and gain feedback.

Detailed View

A deeper look into some of the features.


before and after - dashboard

Left: Our old solution. Right: Our new custom built solution.

One major complaint that we had was that users we not able to see enough content on their screen at once. With this in mind we wanted to really optimize the space we had.

BEFORE AND AFTER - Filter system

Left: Our old solution. Right: Our new custom built solution.

We have over 50 questions in our intake form. Every question is also a column on our dashboard. In Sharepoint it was difficult to manage and re-order all these column so we came up with a new system (on the right) that allows users to simply drag and drop. It made it more intuitive and easy to use.


Left: Our old solution. Right: Our new custom built solution.

We have over 2,000 projects in our system so it's important to allow users to very quickly sort through these projects. In the old solution, any keyword search took the user to a new page with the results. It wasn't an optimal workflow and slowed down users so we implemented a live search (on the right).

Documentation / Collaboration

The other designers (includes the creative director & senior ux designer) mostly work off-site so it's even more vital to be able to produce effective documentation.

for other designers

This is the type of documentation I produce and present to other designers. Although the content varies, the overall flow remains consistent. 

It always starts with the problem we're trying to solve followed by 1 proposed solution. The following page provides research & data that backs up this solution. Lastly, I include any alternative solutions.

FOR engineers

An example of the type of documentation I would prepare for engineering. Light on the annotations since we sit directly next to each other and collaborate on a daily basis.


It’s been over 6 months since we first launched and since then we have:

  • gained over 200 users

  • house over 2,000 projects

  • service 15 major regions (in S.California)

Next Steps

As we finish phase 1 of this project we will continue to iterate and move forward to phase 2 and add more features while taking into consideration any learnings. 


Admin Panel (mockup)

Admin panel

For the past sprint I worked on designing an admin panel that would allow our business consultants control over some aspects of the program (such as deleting users and editing the project form) without having to ask the engineering team. Because there are other groups at our company that are interested in the product, in the long run, it helps us create a more packageable / scalable product. 


Starbucks Coffee Machine


Assessing the usability of a coffee machine through constraints and affordances.