Case Study: Heem

Background

Client: Heem
Duration of Project: 2 weeks

Heem is an app that utilizes augmented reality (AR) to help users visualize furniture in their space and bring home the perfect piece of furniture.

Heem believes that offering a truly big catalog makes a significant difference to the user experience and furniture, they believe, shouldn’t come necessarily from only the same store. They’d like to provide an app to customers that allows users to view a catalog of furniture and place it in their home via AR.

Design Goals & Objectives

• Design a new end to end app that helps users browse furniture and view products in their homes using AR

• Define a unique brand identity that reflects Heem’s attributes

Empathize

Research Goals

• What other companies have or are developing AR apps in the market?

• What are the current issues & difficulties around buying furniture?

• What is users purchasing process?

• What are the main deciding factors in purchasing?

Methodologies

I first started researching for existing AR apps. I came across a lot of competitors such as Houzz, DecorMatters, Homestyler, Ikea Place, Hutch and Pottery Barn 3dRoomView. I quickly learned that my phone is not compatible with the AR technology so I wasn’t able to download the apps. As a workaround, I ended up borrowing my friends’ phones and watching videos of users rating each app online.

After getting a sense of the marketplace and the different apps, I started my user research.

User Interviews

• 3 participants (2 female, 1 male)

• Age ranges: 26-30

• Varying professions, marital status, education, number of members in household
  

Key findings

• Options - Too many options made choosing difficult

• Comparison - All users cross referenced prices while shopping

• Filters - All participants used filters when searching for furniture

• Price - Price was the most important to users when searching and deciding between two items

Define

Project Goals

Once I completed user interviews, I listed Heem’s goals to find commonalities of what I needed to solve for in my design.

App Map

I created an app map under the assumption that users would categorize the items in this manner.

Product Feature Roadmap

Having the project goals in mind, I started listing out features needed to allow users to successfully pick out furniture and place it within their homes.

Ideate

Branding

Another part of this project was to create a logo as their brand is not defined. I started sketching logo ideas and then quickly moved into Sketch. Once I was able to finalize the logo, I put together a style tile which incorporates the final logo, color palette and typeface.

Prototype

High Fidelity Wireframes

With Heem’s branding defined, I worked on incorporating their identity to create final, high fidelity wireframes and a final prototype.

We start with the welcome and onboarding screens.

Next the user is instructed to scan and browse for furniture. The products are organized by room as most users shop this way. Once they select a room, they’re able to filter and dive deeper into that category.

Here the user is able to see all the details of a product and can favorite, view in room, or add to cart. If the user selects view in room, they’re able to swap colors and interact with the furniture in their home.

Lastly, these next few screens showcase if a user selects an item as a favorite, logging back in, and seeing what they had previously set as favorites.

Testing

I created a prototype using InVision and conducted user testing with 2 participants ages 26 & 30. Both participants were male and the tests were conducted in person and remotely using Google Hangouts.

Key Findings

Successes

• All participants were able to successfully complete each task

• All participants felt each process was intuitive

Frustrations & Confusions

• Mixed reviews about whether there was enough information after opening the app

• One participant was reluctant to allow camera access without further information

• One participant wanted the option to add multiple pieces of furniture at once

Next Steps

• Reiterate and modify prototype based on users feedback

• Repeat usability test to evaluate my solutions and see if any new issues arise

Case Study: DYR

Background

Client: DYR

Duration of project : 2 weeks

DYR is an association of animal shelters. They partner with shelters all over the country to raise awareness and foster the discoverability of pets waiting for a home. They're looking to create a platform that connects people to available animals in shelters. 

Design Goals & Objectives

• Design a responsive website (desktop, tablet, and mobile) that is functional: search for pets, information about specific pets & information about DYR/shelters

• Design and define new branding that effectively communicates DYR's personality 

Empathize

Interview

I interviewed users who are dog owners since they've been through the process of adopting or purchasing from a breeder. Hearing their past experiences is valuable information that I can use when designing for DYR. 

I interviewed 2 females & 2 males ages 27-38 with varying professions, marital status, education and number of members in household.

Key Findings

Fit their lifestyle: All participants expressed wanting to find a dog that would fit their lifestyle - whether it was a running buddy, a dog that was okay just sitting around, or a dog that wouldn’t get too big for their current apartment.

Specific type: All participants were looking for specifics while doing their search such as specific gender, age, and whether or not they were hypoallergenic.  

Location: They all mentioned that they only looked at areas around them. They didn’t want to travel too far.

Not particular: All participants mentioned their decision was more in the moment and based off of emotion.  Most just went to look after seeing pictures and once they were there fell in love with a dog and pulled the trigger. The location or shelter of where they ended up buying their dog didn’t seem to matter but rather if the dog fit their lifestyle/specifics they were looking for.

Cost: The amount they paid wasn’t mentioned unless asked. The cost didn’t seem very important to them.

Define

Project Goals

After completing and compiling user interviews, I listed business goals alongside key findings from my user research to find commonalities.

Sitemap

I created a sitemap under the assumption that users would categorize the items in this manner. My first draft included a lot of features I thought I wanted to include in the header of the homepage. However, I realized some of those items may not necessarily need to be included within the header and could be included in the footer.

Product Feature Roadmap

Creating this list took a bit of time. A lot of DYR's competitors had various features within their homepage but I realized a lot of it did not apply to DYR and their mission. I looked over the brief again and my user interview findings and thought about what their main objectives were then finalized the list.

Ideate

Sketches: Wireframes & Logo

I started sketching different layouts while thinking about DYR's brand and how I wanted users to feel when arriving at the homepage. I thought about adjectives such as friendly, welcoming, playful and new. I also took a look back at the product features roadmap and project goals to decide what to include. I then started sketching the homepage and logo and transferred them to Sketch.

Style Tile

Afterwards I created a style tile while still thinking about the prior adjectives (friendly, welcoming, playful and new). It includes my finalized logo, typeface, color palette and images.

Prototype

High Fidelity Wireframes

I was excited to apply my UI kit to my homepage, profile creation and setting a date pages! I created high-fidelity responsive wireframes and built a prototype using Invision.

Testing

After creating my test plan, I conducted user testing with 4 participants ages 29-38. The participants were 2 females and 2 males. 3 have one or more than one dog, 1 participant does not own a dog. I conducted all these test in person.

 Key findings

Successes

• All participants felt the pages were easy to navigate and the process of setting a date was easy and quick

• All participants felt that the homepage was clean, concise, and new

• Most participants mentioned they felt confident in finding a match after completing their profile 

Frustration & Confusion

• Most participants wanted to be able to include more information about themselves and their living situation so that the dogs also get what they need to live comfortably

• A few participants asked about next steps after setting up their date in regards to the shelter and whether there is an application process

• One participant mentioned the footer and header information felt redundant

Next Steps

I started making a few adjustments to the homepage and would like to A/B test which homepage showcases DYR in the clearest way. I'd also like to include additional areas where users can include more information about themselves as well as features such as emailing confirmation dates to themselves and providing information regarding the application process.

Case Study : Kuoni

Background

Client: Kuoni
Duration of Project: 2 weeks

Kuoni is a global leader in the travel industry for the past 110 years, knowledgeable about the travel requirements of consumers and business partners, and translating them into contemporary travel products.

Kuoni has over 8,000 employees in over 100 countries, on all 5 continents. They use this network to provide customers—if they wish—with a local destination expert who can guide them and help them.

Kuoni wants to allow their users the ability to communicate online with agents and to manage—or talk about—every aspect of their quotes or bookings. They want to make the information also easily accessible, so customers can access it while they are traveling, too.

Design Goals & Objectives

Design the post-log-in experience for managing a quote, seeing the trip booking information, and managing bookings online. Since consultancy and advice are at the core of the business, don't make the whole experience self-service for the user, but rather, make sure they interact with the personal travel expert.

Empathize

Research Goals

• What information needs to be provided for creating the perfect, tailor-made trips?

• What information do they need to feel confident that Kuoni has their best intentions?

• Are there any hesitations to using a travel agent?

• How do people like to collaborate with others when planning?

Methodologies

I initially tried to go through the current process Kuoni offers by reaching out to a personal travel expert to see what types of questions are asked and what an initial itinerary looks like for a customer. However after a couple attempts, I did not hear back so I decided to go in a different route. 

I looked through the different pages of Kuoni's website to get a better sense of the brand. As I was looking through different pages, I noticed there were a lot of inconsistencies with layouts, buttons, and filters. As I continued my research, I took screenshots & notes of commonalities and started an interface inventory. 
 

Interview

Once I had a grasp of Kuoni as a brand, I wanted to interview users who have recently traveled for more than 3 days. What their process was when planning with others, what kind of information led them to ultimately book the specific activities, accommodations or flights. I also wanted to understand the most difficult parts of planning a trip and their experience with travel agents.

• 4 participants (3 female, 1 male)

• Age ranges: 27-33

• Varying professions, marital status, education, number of members in household
   

Key Findings

• Trust - All participants mentioned they did not trust travel agents nor really found them helpful. 

• Local Hacks - All participants mentioned the hardest part about planning is finding information about local knowledge such as if specific times or areas are dangerous or walkable, finding the "fun" spots for specific age ranges.

• Time - All participants did not specifically call this out, but they all spoke about spending lots of time researching and the time it took to aggregate all the information.

• Points - Most participants spoke about checking to see if they could use their points first before booking with credit cards.

Define

Project Goals

Knowing the user goals, I wanted to find the commonalities with Kuoni's goals to see what I needed to solve for and incorporate in my design.

Product Feature Roadmap

Having those project goals in mind, I started to think about what features would be needed to allow users to be successful in their process of planning.

Task Flow

Before I started sketching out the layout of the pages, I wanted to figure out what the flow would look like if a user wanted to create an activity. I chose the task of a user starting to set up the details of their trip, specifically creating an activity. I chose this task because I felt that this would be an area that could be confusing and could cause the most uncertainty since you can book multiple activities on multiple days.

Ideate

To begin sketching, I took another look at Kuoni's website. I started a rough sketch on paper and quickly moved into Sketch. I took the items in my interface inventory and created symbols and started placing the items on the page to hone in on the layout.

Prototype

High Fidelity Wireframes

Now was my favorite part, putting it all together! After I created higher fidelity wireframes, I took a step back to see if I had translated all my thoughts around the process onto Sketch. I realized I was missing a couple steps and created a few more pages that I felt were necessary. 

User Testing

Participants: 3 users ages 26-31 (2 male, 1 female)
Test Subject: High fidelity prototype for Kuoni website (desktop version)
Test Methodology: Google Hangouts & Zoom

Test Goals:  

• Evaluate the users process and interaction with Kuoni’s pages

• Identify any pain points and confusions with content on pages

• Identify what information is missing

• Does the flow make sense?

Key Findings:
Most users could not distinguish the difference between the different status information such as "pending" & "not submitted". They also found the button "Add to Itinerary" to feel permanent which led to the confusion of why they needed to submit an activity. I also found that most users ignored most of the right hand side of the page and mentioned it came secondary to the content on the left.

Reiterations

Using the findings from my usability test, I adjusted the elements that caused the most confusion which then changed some layout of some pages altogether. 

Next Steps

Using these updated higher fidelity wireframes, I'd like to create a new prototype using Invision and conduct a usability test to see if users run into areas that cause any similar or new pain points/confusion that the first batch of users faced. 

Case Study: Kaus

Background

Client: Kaus
Duration of Project: 4 weeks

Kaus is a well established company being in the industry for over 30 years. They offer a wide variety of products for any type of individual ranging from property, aviation, motor and health.

As they offer over 350+ separate offerings, they’d like to keep rates lower than competitors through prepared packages. They would like to  reach the younger audience through creating a new and fresh logo along with a responsive e-commerce website.

Design Goals & Objectives

Design a new, modern and fresh logo for the company creating a brand that is trustworthy, fresh, clean and clear. Create a responsive e-commerce website that is pleasing to use and that allows customers to browse through all products and easily filter by relevant data.
 

Empathize

Define

Project Goals

In order to determine the full feature list of my product and what should be prioritized, I looked at the business goals alongside the results from my user research to find commonalities.

Product Feature Roadmap

I created a list of features based off of my user research findings, business needs along with the persona I created.

Ideate

Task Flow

Having Justine's persona in mind, I created a task flow & user flow to show how Justine would successfully be able to purchase insurance but also the different paths she could take to complete different tasks.

User Flow

Wireframes

I then started thinking about product requirements for each page, focusing on the homepage and how a user would select the type of insurance they're looking for all the way to checkout. Once I was able to compile a list, I started sketching and creating wireframes.

Logo

Along with a responsive website, Kaus is looking for a new, modern and fresh logo for the company. I started sketching logo ideas and finalized them using Sketch. 

Style Tile & UI Kit

I then created a style tile & UI kit to include my finalized logo, typography, color palette, buttons, icons and images.

Prototype

High Fidelity Wireframes

It was time to put it all together! Using my style tile & UI kit, I was able to create high-fidelity responsive wireframes and build a prototype using Invision.

Test

After creating a higher-fidelity prototype, I conducted a usability test with 4 participants age ranging from 26-31 who've had prior experience buying insurance.

Affinity Map

I created an affinity map to help sort my research findings. This allowed me to see similarities in any successes, frustrations and general observations. 

Next Steps

Using my findings from user testing and making reiterations, I'd like to conduct user testing again to confirm if changes have solved initial frustrations and if there were any other outstanding aspects that caused confusion or grievance. I would also like to A/B test against different layouts for the "Selecting a plan" screen.