HOUSE
CLIENT
House Mugs is a division of
Keypoint Signs & Graphics, an Atlanta based B2B company looking to expand into the B2C market
MOBILE SITE
ROLE
Research, design & UX copywriting
TIMELINE
3 weeks - October 2020
TOOLS
Illustrator
Photoshop
Adobe XD
OUR CHALLENGE
-
Educate the consumer on the product and process of creating their own House Mug
-
Create a client-driven scaling and design process; reduce the need for client involvement
-
Build excitement & recognition of the brand
OUR GOALS
-
How do we familiarize consumers with the client's unique products?
-
How can we implement an easy onboarding and measurement process?
-
How do we create a design process that is fun for families to do together?
MUGS
COMPARATIVE ANALYSIS
Although plenty of sites offer customization, Red Bubble,
Blinds To Go & Inside Weather were the most useful to
reference for our product.
Inside Weather was the most streamlined & closest to how
we saw our customization functioning after a first iteration.
THE MVP
Rough wireframes, a proto persona & basic scenario got us started with our MVP.
Instinct told us that step by step onboarding so the user could start designing a.s.a.p. was the best way to get them excited about the product. We introduced measurement details later.
This was the opposite of the clients process so we used testing to see how users responded.
1st PROTOTYPE
Our initial prototype focused on the onboarding flow, drag and drop
design process and an explanation of measurement options
USER INSIGHTS
With our initial goals in mind, how did our MVP do?
Did we familiarize our
users with the product
through onboarding?
Were the measurement options easy and clear?
Was the design process fun and engaging for families?
The simple answer... not yet
Testing showed that users wanted more info on the home screen, the measurement instructions were a lot to digest and the design process wasn't as fun as it could be.
We used these insights to improve and iterate.
HOME SCREEN
We addressed the following questions:
-
What do we offer?
-
How much does this cost?
-
What materials are used?
-
Are they re-usable?
SECOND ITERATION
Customization
Customers wanted to do more with their design:
-
Why can't I choose more than one mouth option?
-
Will I have the freedom to move elements around?
-
Can I see an estimate for my design?
MEASUREMENT OPTIONS
Users were confused about the price and functionality of ordering a measurement kit:
-
What's a measuring kit?
-
Why does it cost something to measure myself?
DESIGN ELEMENTS
-
We added an animation sequence to bring a sense of whimsy to the brand right and to engage families to design together
-
We updated the primary color from orange to coral with accents of blue, green, and yellow so that users would associate the product with more than just Halloween
Jumping into design first to get feedback quickly helped to solidify the users needs
and provide a better understanding of our persona.
USER FLOW
CLIENTS PROCESS
REVISED PROCESS
This is where we made the most significant change. During interviews users expressed interest in making one payment for everything so that they could play with their design, receive an estimate, confirm and checkout.
Our client was open to the idea since users would be making a financial commitment up front, giving them incentive to complete the measurements process later.
We devised a way to estimate sizing in order to give users the price of their design for quicker checkout.
THIRD ITERATION
Our latest iteration incorporates streamlined onboarding, estimated sizing,
additional elements for customization and playful color & animation.
NEXT STEPS
ACCOUNT PROFILE
Build out account details so that users can save design ideas, house measurements and payment information
VIDEO TUTORIALS
Provide users with video demonstrations on the best way to measure different areas of their home and product application tips.
SOCIAL MEDIA
Allow users to share their house pics to draw brand awareness, attract new customers and collect inspiration to feature on the website