HouseMugs
Native app design
Overview
HouseMugs is a new product line looking to establish an easy-to-use digital experience for customers that want to custom design their outdoor house decorations.
Business specifications: educate the consumer on the custom design process, create an automated measuring service, and build a brand excitement.
My role and responsibilities
In a team of three designers, my role as a Visual Interaction Designer was to create an intuitive and memorable user experience with the use of new interface, branding, motion and animation.
Key Contributions: user testing, Visual Design, animation and interaction design, wireframing, prototyping.
Team
Three Designers
Duration
6 Weeks, 2020
Software
Adobe XD
Ilustrator
Photoshop
The problem
HouseMugs’ current production process is too manual and unnecessarily complicated. Customers were confused and didn’t understand the measuring process provided by the company.
Steps involved in the current workflow:
1) Making a personal visit to validate measurements
2) Custom designs are created by in-house designers
3) The designs are presented to customers for approval
4) Final designs are fabricated and delivered
Defining the scope
After analyzing HouseMugs current workflow and the specifications from the client we defined our scope to include:
1) Design an innate digital experience
2) DevelopE a custom design feature
3) Streamlining the measurement process
4) Create memorable visual design
Searching for customization examples in comparative research
We looked at indirect competitors that have custom design features in their digital applications. Inside Weather stood out: after a product is selected a horizontal scrolling menu with different options shows up. Tapping on the desired color or material, makes the change immediately visible on the screen, which creates an intuitive and useful experience.
Inside Weather, a custom design furniture app
Implementing Lean UX with the creation of a minimum viable product
We implemented a Lean UX method and created a minimum viable product (mvp), because we wanted to frequently test our product with users and inform our next design decisions based on our discovery.
The first step in that direction was to create a Proto-Persona, which helped us define our ideal user and the steps needed in order to design a house decoration.
The video to the right and the user flow below show how the persona interacts with the prototype (minimum viable product).
First prototype — a minimum viable product made for testing purposes
User flow —designing and placing an order
Design decisions based on user testing
Home Page Iterations
Below are the changes made in the second iteration of the prototype based on users’ feedback.
User testing revealed that customers were confused about the product, and needed clarity right at the beginning.
Measurement Page Iterations
Below are the changes made in the second iteration of the prototype based on users’ feedback.
After reading through the lengthy explanation, users still didn’t understand the purpose of the measuring kit.
Customization Page Iterations
Below are the changes made in the second iteration of the prototype based on users’ feedback.
Users wanted to play with more options for their designs, and know more about the materials that the design was made of.
HouseMugs production process evolution based on user testing results
Since our client had an initial production process that was untested and confusing to users, I decided to reverse the steps by allowing users to design first and then pay for measuring services.
Results from user testing showed that users liked to design first, but they questioned the reason behind checking out twice i.e paying for Measuring Kit and for the final product separately.
After presenting the test results and our suggestions to the client, we added an estimated House Size option to the site.
This solution gave an estimated production cost for the business, eliminated the need for two checkouts, and secured customer commitment by reducing the bouncing rate.
This is how the changes to the production process looked:
Improving the user experience by raising fidelity and creating animation
Building brand recognition by creating a fun welcoming Animation
With the brand specification in mind (catering to families that want to design together for the holidays), I created this introductory animation that helped our customers get the feel of the product when entering the site.
User testing showed increased desirability
We asked the users How likely would you use and pay for a service like HouseMugs? Results from the first and the second usability testing showed that making the additions and changes improved the users’ experience drastically. We saw the likelihood of the user choosing HouseMugs for their decorations increase from the 1st to the 2nd iteration of our prototype.
Defining the persona and their use of the mobile website prototype
After synthesizing the research, this is how the Persona was defined.
Her use of the app is shown in the prototype below.
Latest prototype showing the persona designing and checking out
Learnings
Our research showed that customers interpreted the phrases “Housemug”, “mug”, and “my house got mugged”, differently than intended. Our recommendation to the client was to consider rewording these phrases in order to clarify customer expectations.
We also learned that many users preferred not to purchase the Measurement Kit because the measuring process was still very confusing to them. Thus, we thought that more research was needed in order to streamline the experience further, which was out of our scope for this sprint.