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.


Requirements

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.


Discovery

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

 

 

Competitors

Athletic Apparel

  • Nike

  • Adidas

  • Under Armour

Women's Athletic Apparel

  • Gap

  • Athleta

  • Lucy Activewear

  • Bebe

Nike ( Nike + LA )


Action

 

Sketches

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.

 

Mockups

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.

 

strategy/solution

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

prototyping

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.)

Discovery

 

users

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.

 

Inspiration/moodboard

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


Action

 

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. 

 

content

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.

 

layout

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.

 

VISUAL DESIGN

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.

 

content

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.

wireframing

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


Discovery

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.

 

Competitors

We looked into existing products on the market.

 

users

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

 

brainstorming

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.


Action

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

 

content

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. 

 

2ND ITERATION

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.

 

testing

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

 

graphs

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.


Results

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. 

Wireframing

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


Action

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

 

content

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

filming

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.


Results

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.

workpg.gif
 

Refinement

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

About

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.

Wireframing

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.

mockups

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


Discovery

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

 

ideating

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.

 

Action

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

 

WIREFRAMING

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

 

MOCKUPS

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


Refinement

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.

Wireframing

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.


Discovery

Researched competitors to create personas and journey maps.

 

Competitors

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

 

PERSONAS

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. 


Action

Card sorting, sitemaps, and wireframes. 

 

content

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

 

sitemap

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.

 

Wireframes

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.

photography

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


Discovery

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

 

SURVEY

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

EXPLORATION

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


Action

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

 

design

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.

 
 

photography

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

 

animation

The animation of the facewall was created through After Effects. 


Results

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. 


Refinement

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


Discovery

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

 

USERS

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.

Shortcomings:
• 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.

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

process

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

 

Action

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. 

 

FEATURE VALUE MATRIX

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.

 

wireframes

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?

 

mockups

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

These were created in Adobe Illustrator.

 

 

testing

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.

BEFORE AND AFTER - Search

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.


Results

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. 

 
 
 

Exploring Akzidenz Grotesk

 

Akzidenz-Grotesk is a grotesque (early sans-seriftypeface originally released by the Berthold Type Foundry in 1896 under the name Accidenz-Grotesk. One of the first sans serif typefaces to be widely used, its design influenced many later designs, especially many neo-grotesque typefaces released after 1950. Akzidenz means a 'trade' type for commercial use. It was sometimes sold as Standard or Basic Commercial in the USA.

 

 

Research


Final Type Specimen Poster

New York Times Op-Ed

During my final year at Art Center I took a class called: Op-Ed taught by both Paul Rogers and Brian Rea. An op-ed (originally short for "opposite the editorial page") is a piece typically published by newspapers, magazines, and the like which expresses the opinions of a named author usually not affiliated with the publication's editorial board. Op-eds are different from both editorials (opinion pieces submitted by editorial board members) and letters to the editor (opinion pieces submitted by readers).

 


Inspiration

The piece was inspired by a book I had recently finished reading: Stiff by Mary Roach.


Progress

It took several iterations and feedback from the instructors and classmates to get to the final product. 


final image


Other op-ed pieces

Jackie Kennedy's pink suit

Treating lyme disease.

Dealing with constant noise.

Baseball rivalry.

Mercedes Benz C250

 

Assessing the usability of a car against system constraints.

 

 

Starbucks Coffee Machine

 

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

 

 

Developing new products

 

We're developing a new app here at Kaiser Permanente revolving around pregnancy and new borns. We worked with a vendor to help us out on the UX/UI design and development. 

 

I was in charge of creating the app/website icon. By following KP's icon design guidelines this was the result.

 

 

Preliminary sketches

Some initial sketches with pen and paper before jumping on the computer.


Adhering to Brand Guidelines

Like people, brands have personality. The most important effect of our brand personality is that it makes us not just recognizable but knowable. And it's that familiarity that allows audiences to create lasting bonds with us. 

Some of our personality traits include: friendly, caring, dedicated, expert, health activist.

 

A sampling of KP icons.

Icons

Icons help us cut to the chase. They allow our audiences to consume information quickly and easily. And in their simplicity, icons can help eliminate language and education barriers. 

Some of the key characteristics of KP icon are: simple & functional, even line weight & cohesive appearance, read well at small sizes, universal appeal / usable by diverse groups.

 

Final Vector

The final vectorized icon. We ended up using the baby icon.

The Challenge

Kaiser Permanente hosted a short conference in Riverside, CA surrounding the topic of innovative 3D healthcare solutions. We needed to create posters to promote the event.


The Vision

Since the event is about 3D innovation, we took that quite literally and created a 3D object. 


My Role

I worked closely with a fellow designer, creative director, and a project manager.

 

design

Working together with a fellow designer, we cut shapes of human organs out of paper and constructed a large three dimensional diorama. 

photography

I worked as the photographer to turn the 3D object into a 2D poster. I also did some post processing to ensure it was color corrected and added type.

 

meet the rest of the team:

Creative Director, Design Intern


Process

After cutting out all the shapes with paper we moved into construction and photography.

 

Results

We ended up with 2 posters that were showcased during the conference.

 

The Challenge

Measuring the behavior of people interacting with interfaces is a critical part of developing products such as websites. There are two major types of usability tests: formative tests and summative tests. Summative tests can be described as “the usability of an application using metrics.” It can be further broken down into benchmark and comparative tests. The main goal of a benchmark test is to describe the usability of a product relative to a goal. It can also be used as a baseline for any future design changes. A comparative test involves the comparison between two different designs of the same product or the comparison of two competing products.

For this project I assessed the usability of the Mercedes Benz website by the means of one benchmark test and one comparative test.

Disclaimer: This project is not sponsored or affiliated with Mercedes Benz. It was done purely for academic purposes.

 
 

Benchmark Test:

If a user knows what car they want, they are going to want to figure out if there are any in-stock at their closest dealership. Users were presented the task of finding out how many Mercedes Benz AMG S65 Sedans there are at the dealership closest to the zip code of 91101. If users got the numerical value correct (which is 5), they are assigned the value of 1. If users inputted anything other than 5, they were assigned a 0. The goal of the test is to find out if at least 70% of users are able to complete the task. We are therefore testing the following hypotheses:

H0 : p = 0.7 versus H1 : p > 0.7

The best point estimate of p, the proportion of the population with a certain characteristic can be expressed by:

p̂ = x / n

For this task I utilized Amazon Mechanical Turk to obtain a random sample of 50 potential users and found that 30 out of 50 are able to successfully complete the task, so p̂ = 30/50. To determine if a sample proportion of 0.6 is statistically significant, we build a probability model. If we took a second random sample of 50 users, it will likely result in a different sample proportion. Since np (1 - p) = 50 (0.7) (1 - 0.7) = 10.5 10 and the sample size (n = 50) is sufficiently smaller than the population size (if we assume there are at least N = 1,000 users), we can use a normal model to describe the variability in p.̂ The mean of the distribution of p̂ is μp̂ = 0.7 since we assume the statement in the null hypothesis is true and the standard deviation of the distribution of p̂ is σp̂ = (p (1 - p) / n = 0.7 (1 - 0.7) / 50 0.065.

The level of significance is α = 0.05 so that we only have a 5% chance of making a Type I error. We want to know if it is unusual to obtain a sample proportion of 0.6 or more from a population whose proportion is assumed to be 0.7.

The test statistic is:

z0 =p̂-p0 /(p0 (1-p0)/n)
= (0.6 - 0.7) /
(0.7 (1 - 0.7) / 50) = -0.1 / 0.0648 = -1.54

Because this is a right-tailed test, we determine the critical value at the α = 0.05 level of significance to be z0.05 = 1.645. The test statistic z0 = -1.54 is less than the critical value of 1.645, we do not reject the null hypothesis.

There is not sufficient evidence at the α = 0.05 level of significance to conclude that more than 70% of users are able to successfully complete the assigned task.

Conclusion:
It is up to individual companies to set a bar of their minimum task completion rate. For example, if Mercedes Benz wants at least 70% of all users to be able to successfully complete this task, they will need to continue to iterate and make changes to their website until the goal is met. Another way to look at it is to use this statistic as a benchmark for future website edits. 


 

Mercedes Benz

BMW

 

Comparative Test:

It can be useful to measure up your own website with competitors that are offering similar products. Using Amazon Mechanical Turk, I collected the time required to find safety features of 2 vehicles with similar price points (the Mercedes Benz C250 Coupe and the BMW 428i Coupe) from 34 random potential users on the Mercedes Benz website and the BMW website. The goal of the test is to confirm if the Mercedes Benz website is easier to navigate (as far as finding safety features are concerned). Half of the users were required to complete the task on the Mercedes Benz website first and the other half of the users were required to complete the task on the BMW website first.

This is a matched-pairs design because the variable is measured on the same set of users for both websites. We first compute the difference between the time taken on the Mercedes Benz website and the BMW website. If the time taken on the Mercedes Benz website is less than the BMW website, we can expect the Xi - Yi values to be negative. We are testing the hypotheses of:

H0:μd =0 versus H1:μd <0 with an α=0.05 level of significance.

The sample mean is d-bar = -35.3235 seconds and the sample standard deviation is sd = 79.1855 seconds.
The test statistic is:

t0 = d-bar0 / (sd / n) = -35.3235 / (79.1855 / 34) = -2.601

Because this is a left-tailed test, we determine the critical value at the α = 0.05 level of significance with 34 - 1 = 33 degrees of freedom to be -t0.05 = -1.692

The test statistic, t0 = -2.601 lies in the critical region, we reject the null hypothesis. There is sufficient evidence at the α = 0.05 level of significance to conclude that the time taken to find safety features on the Mercedes Benz C250 Coupe is less than the time taken to find safety features on the BMW 428i Coupe.

Conclusion:
It is safe to say that it is quicker to navigate to and find safety features on the Mercedes Benz website. While speed is not everything it is a vital part of any product. We can either continue to test it against other similar websites to conclude that the process is sufficiently quick. When prioritizing requirements for website updates for any potential changes to the workflow of finding safety features, I would label it as low priority since it seems to be working well.