MoPoP Reconstructed
My Role
Sole UX Designer
Challenge
Website Redesign
Concept piece targeted to a specific persona.
Deliverables
Clickable Hi-fidelity mockup of an online shopping experience for a local business by creating design updates.
Meet Cam
Cam's online behaviors
-
Buys (and shows off) what’s new, even if it’s not within budget, decides quickly and purchases items for immediate delivery
-
Abandons if the process is time-consuming
-
Submits product reviews
-
Closely examines product details
The Goal
Redesign MoPop tailoring to:
Environments:
Shops online-only, exclusives, social media platforms
Workflow:
Limited time to shop around. Needs to purchase quickly
Attitudes:
Impatient, Flaunts new merchandise, Trendy, Social Media Influencer.
Behavior patterns:
Examines product details, Speedy shopper, Submits product reviews, Abandons if the process is time-consuming. social butterfly
Overview
The focus of the redesign is to satisfy a targeted persona the Impatient Digerati, a social butterfly. My redesign goal was to make the shopping experience the main focal point for this persona while incorporating community engagement and connection.MoPop houses some of the world’s most legendary pop culture artifacts, their current website does not have a community reach, which is not aligned with their mission statement
"Provide a life-changing force by offering experiences that inspire and connect our communities."
By redesigning the website adding a portal connection to the community via social media MoPop will achieve their goal and mission of community connection.
MoPop website before reconstruction
MoPop website After reconstruction
Website breakdown
To get a better idea of the site layout and what gaps needed to be filled
The current structure has many menu items that lead to dead ends.
Shopping this site takes too much time, it is not intuitive or userfriendly.
In the current model, there is no way to currently connect to others online.
The Hypothesis
1. Redesign the navigation menu to incorporate trending now, featured, MoPop exclusives, and online-only options satisfying the digerati persona who likes to show off what’s trending and new.
2. Create the ability to view, review, and comment on products.
3. Provide a visible online presence, encouraging engagement through social media, which is consistent with the MoPop mission statement.
Homepage: Wireframe - Proposal
1
Paper Prototype // Interaction Design
2
3
A New Site Structure
This site map represents MoPop after site reconstruction, bringing the shopping experience front and center for the digerati persona. Card sorts helped provide data on where customers would look or expect menu items to be located.
Site Map After Reconstruction
Research
How do other e-commerce sites create a simplified shopping experience for the customer?
How do they draw attention to featured items or present new arrivals?
What layout structures are they using to help simplify customers' shopping experiences?
What copy are they using for CTAs?
Influences
Platforms like Instagram were used to inspire the community connection and infuse pop culture within the design.
Suggesting that users join the MoPop culture page to inspire community involvement, by showing off what is trending through hashtags like #MoPopmerch #MoPopcommunity #MoPoPfam #MoPoPexclusives
Competitive analysis
I conducted a competitive analysis between other gift shops in close proximity to MoPop and included Amazon because of their dominance over e-commerce which is oftentimes the first look for many shoppers or already a preset Alexa command.
Analysis Goals were to discover what the competitors were doing, taking note of what they were doing well, and generate new ideas.
Competitive categories included: Guest account checkout, search by category, overnight shipping, social media sharing, review submission. All questions derived from encompassed behaviors of the digerati persona.
Before Redesign
After website reconstruction
You can now use guest accounts to buy online, saving time and preventing website abandonment, view, and shop from 'Trending / Featured list' and Overnight shipping is included, a must-have service motivation from digerati persona.
After Redesign
Paper prototype
I started sketching screens tasks that would be performed by my persona.
Exploring online exclusives, following MoPop's Instagram, and submitting a review were top priority persona tasks. Once ideas were sketched I was able to quickly explore ideas and identify if it was viable. Sketching them first helped save time when creating digital wireframes.
When creating an experience for the digerati iI wanted to make shopping at the digerati's fingertips with every click, anticipating our persona's needs like coming to our site to buy products
Interactive Paper Prototypes
Card sort
card sort
I conducted a closed card sort with the following categories to gain insights from customers and site users.
• Shop
• Online Only
• Trending Now
• Visit
• Freatured
After conducting card sorts to gain insights from users,
" online-only" was moved to the primary navigation menu.
Category Findings
Each menu item below was strategically placed in menu categories per card sort findings.
Trello board card sort menu items | Closed Card sort |
Emotional journey
To empathize Cam’s experience navigating through MoPop’s website I created an emotional journey to show each touchpoint and what emotions are associated during this experience. Highlighted in green you can see ideas and opportunities that could make each touchpoint a better user experience interaction.
Pre-construction
You can see that Cam is frustrated and wastes too much time browsing, he is led down dead-end navigation paths and is annoyed with spending too much time to find the latest trends and MoPop Exclusives. He is not able to write or view product reviews. He must create an account to purchase merchandise and cannot track his order.
Post-construction
Cam feels relieved and delighted with the new design which validates the connection users are seeking to connect with the MoPop community via the media access to Instagram. Cam feels understood and significant knowing MoPop's new website was created and designed with users like Cam in mind. He is able to use the new website intuitively, track orders and complete his goals. He is able to purchase exclusive new arrival items quickly, review products, view what's trending and feel connected and part of the MoPop community.
The MoPop reconstruction now holds true to the MoPop mission statement which offers experiences that inspires and connect communities.
Usability testing
With Cam the impatient, trendy shopper in mind, I created tasks this persona would accomplish. Usability testing helps validate or disprove any design decisions made so far, with continued iterations and insights a seamless experience can be created.
Tasks
Task#1
See what is trending on MoPop social media page and follow MoPop’s Media
Task#2
Find the Online only exclusive Marvel Thor Prop hammer prop and purchase
Task#3
Locate A Jimi Hendrix product and submit a review
Usability iterations
Usability testing produced valuable takeaways like the confusion of tinted wireframes which increased the users' cognitive load in understanding why they were tinted. Small improvements like adding more touchpoints on the screen allowed the shoppers more freedom when testing this website, these additions led to next sprint idea generations and thorough shopping experience.
Simplifying these wireframes by making them white was validated in the following SUS scores that took place post iteration. Improvements soared from 57.5% to 90%
Clickable prototype
I made this clickable prototype using Invision
Connecting with MoPop
To mirror the mission statement to INSPIRE and CONNECT our communities I wanted to create a portal to MoPop's Instagram page, where social and community interactions are happening. Allowing engagement and a visible presence of a shared passion for pop culture through photographs, art, and trends. I wanted to build a pop culture presence that is inclusive and welcoming to new and existing users. Inspiring Pop culture lovers via social media, shopping, trending now, and exclusives.
MoPop mockup
I created a mockup mirroring the wireframe I initially created but when I was developing it I had another idea, I will A/B test both homepages to see which performs better.
V2 Homepage wireframe
Wireframe Mockup Homepage A
Homepage B
MoPop Page: Online Only Mockup
MoPop Page: Product Page Mockup
Mockup Prototype
What Went Well
Getting users' feedback during usability tests using the clickable prototype helped identify where the snags were in the process flow. There were a few additional hotspots that were included which was an easy fix when testing this redesign. The card sort helped confirm where shoppers could expect products to be found, helping users navigate the site intuitively and with ease of use.
Testing early and often helped direct the project MVP, focusing on improvements instead of wasting time on things that were not needed. Ensuring the completion of complete ideas.
Next Steps
A/B testing Homepage mockups
Create additional mockup screens
Additional Usability Testing
Flushed out Comparison Analysis to include similar industry competitors