MORPHE
a rework
Morphe: A Rework
DISCLAIMER: I am not an employee or past employee of Morphe. The views displayed here are mine and do not reflect on Morphe.
Morphe has long been a niche brand, but it is quickly becoming a global name in the beauty space. I looked into their website information architecture and performed user research to gain a better sense of empathy for their users and inform my rework of their e-commerce website.
My Role
- User Research
- User Interviews
- Research
- Analysis
- Information
- Architect
- Sketching
- Wireframing
- Prototyping
- Visual Design
- Interaction
- Design
Device
- Web
Year
- 2019
Tools Used
- Pen & Paper
- Whimsical
- Sketch
- InVision
- Google Apps
The Problem
Morphe is a successful, growing makeup brand, but users are still not buying online as often as the company would want.
The Solutions
- Analyze the information architecture to ensure the website flow is more intuitive and easily navigated.
- Implement a points system through newsletter and special offer tactics to increase the rate of repeat customers.
The makeup industry is a very lucrative market that is growing rapidly with the rise of social media influencers, brand deals, and other new forms of promotion. While Morphe is making moves in the makeup community, numbers available online suggest that online sales could be much higher. I wanted to find a way to help increase sales while improving the user experience on the company’s e-commerce website.
Site Map
Looking at the current site map, Morphe has a relatively accessible navigation. This gave me a good understanding of their brand and how they believe consumers browse and purchase their products. While fairly straightforward, there were a few fixes I'd like to implement.
User Interviews
User interviews were conducted at physical stores in a mall. The decision behind this was to interact with users on a more personal level and identify how competing stores attract customers. This process provided insights into customer practices and how they prefer to shop. I also conducted interviews with a questionnaire to identify online user behaviors.
Questions
•How often do you shop for makeup?
•Do you prefer online or in store shoppingover the other?
•What do you look for?
•What is your game-plan during any given visit?
•Do you have any favourite brands/stores?
•How do you find new products?
The Analysis
Affinity Mapping
The trends that were observed from the data:
- Few customers enjoyed online shopping, as there was a disconnect between the customers and the products.
- Customers preferred the tactile sensation they experienced in brick-and-mortar stores.
- They preferred to shop online when it came to familiar or highly recommended products.
Information Architecture
I used a 30-item card sort test to look at the overall organization of their products to ensure Morphe was using a system that was best for their customers. Through this test, I found that Morphe was organized well enough to navigate, but most users combined brushes and tools together, rather than keeping them separate, like Morphe currently has on their site.
Menu Restructure
While the e-commerce organization was effective, there were some areas that needed improvement. The "Discover" and "New" menu titles suggested the same thing and their respective sub-options lacked cohesion. I leveraged Morphe’s strong online influencer reputation and the existing social media menu "#Morphe” in my reorganization. I removed the redundant "Discover" menu option and re-organized the sub-options to increase clarity.
Menu dropdown from Morphe.
Optimized Flow of the Morphe Navigation
Wireframes (Lo-Fi)
I started with the Morphe style sheet as it sets a base for the entire website, and gave me a better sense of the brand and a deeper appreciation for the simple yet sophisticated choices made by Morphe’s design team. This allowed me to create simple, straightforward wires that were similar to existing Morphe layouts. While I kept most things the same, I edited the layout on the products page from four items across to three to allow for larger images and a better representation of palettes and other colorful products.
High Fidelity
The website came to life when I added images and other design elements to the lo-fi frames, altered the placement of some tabs, and edited the designs for added clarity. As Morphe uses Shopify for its checkout process, changes in this area needed to be minimal. I removed the extraneous, uneditable shopping cart items list to reduce clutter at checkout.
Iterations
The majority of iterations occurred within the user onboarding copy for the points system and the placement of buttons. Ordering the buttons led to various discussions regarding the colorization of the PayPal option, and the position of “checkout as guest.” I decided to place the checkout as guest option first in a white button and used color to emphasize the other two payment options, including the recognizable yellow branding for PayPal.
Impact
Given that Morphe has a growing customer base and promotion from online influencers, the priority was maintaining current customers and obtaining new ones. They currently have influencer codes for 10% off purchases, which is how influencers get paid. However, there's no incentive for customers to continue purchasing and using Morphe's product. That’s where the points system comes in, as it enables Morphe to directly communicate new events and promotions to current customers and incentivize new members to sign up.
Sephora currently sells Morphe products and rewards customers with points to use on return visits to the Sephora website, disincentivizing users from shopping directly with Morphe. The rollout of a Morphe points system would leverage incentives and promotions to attract users to the Morphe website, and rewards to keep them returning.
What I learned
Through this project, I further developed my mastery of Sketch and InVision, learned to solicit and categorize user research findings and feedback, and more confidently articulate design decisions and rationale.
Line-Up
