top of page

MoPoP Reconstructed

My Role

Sole UX Designer

Challenge

Website Redesign 

Concept piece targeted to a specific persona.

MoPop with Browser Frame.png

Meet Cam 

Young Man with Headphones Playing Video

Cam's online behaviors 

​

  1. Buys (and shows off) what’s new, even if it’s not within budget, decides quickly and purchases items for immediate delivery

  2. Abandons if the process is time-consuming

  3. Submits product reviews

  4. 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 homepage

MoPop website After reconstruction

MoPop A mockup w: Browser Frame.png

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.

P2 -MoPop OG_12518.png

The Verdict

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

Screen Shot 2019-02-10 at 3.12.19 AM.png

1

Paper Prototype // Interaction Design

Nirvana product page_mockup.png

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

P2 - MoPop_V2.png
Screen Shot 2019-02-10 at 2.24.23 AM.png

Let's Explore

The landscape, how other e-commerce sites create shopping experiences 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

 

mopop. instagram.png
Screenshot 2018-12-07 08.45.22.png
Screenshot 2018-12-07 08.43.13.png

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.

Competitor analysis before redesign

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. 

competitor analysis after redesin

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 

P2_MoPop_newarrivals_wireframes.jpg
wireframes.mopop.portfolio.jpg
P2_MoPop_onlineonly_wireframe.jpg

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.

mopop patrick closed card sort.jpg

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 |

Card sort findings

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.

Cam user emotional journey

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. 

P2_usability_testing_12.11.18.jpg

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%

sus testing mopop score improvement.png

Clickable prototype

This immersive wireframe experience created in Invision helped give a feel for the design elements. The intensions were to purposefully to bring cohesion throughout the website in its simplest form â€‹

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. 

Screen Shot 2019-02-10 at 2.24.23 AM.png

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

Screen Shot 2019-02-10 at 3.12.19 AM.png

Wireframe Mockup Homepage A

menu.png
MoPop_Homepage B_wireframe.png

Homepage B

MoPop Page: Online Only Mockup

MoPop Homepage A.png

MoPop Page: Product Page Mockup

Nirvana product page_mockup.png
MoPop Exclusives_mockup.png

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

bottom of page