MagCloud is a self-publishing and marketing platform. Their goal is to help creative individuals (photographers, artists, etc.) to easily design, publish, promote, and sell professional-quality printed books and ebooks.
The site was created in the 2008 and it hasn't changed much since. It spoke in publication language that was specific to its industry. Terminologies used were not written in a language a user would understand. The site was text-heavy that made it challenging to determine what can be produced and how. My goal was to improve the site's usability and help increase the number of sales through the publication of new titles.
I started with a heuristic evaluation to examine the usability, efficiency, and effectiveness of its interface. I identified 89 out of 109 usability issues. Major issues consisted of:
poor site hierarchical structure
inadequate guidance towards self-publication
problematic nomenclature with the use of formats instead of products
insufficient content strategy
Figure 1: Usability Evaluation Report
As I sought to understand the user experience through qualitative research and measure their behavior through quantitative research, I conducted various research methods.
Figure 2: Research Tools
I created a sitemap to analyze the Information Architecture structure and observed how its hierarchy lacked an intuitive navigational flow. Users were bounced from one page to another and back through excessive use of hyperlinks.
Figure 9: Current Sitemap
Google Analytics immediately showed a reduction of new users and returning visitors over a six months period.
Figure 3: Google Analytics
When I analyzed the pageviews, conversions, entrances, exits, and bounce rates, I noticed the Solutions page was not being visited as expected. At best, it had low traffic in comparison to the other categories.
Figure 4: Navigation Summary
=> Solution page not listed
Hotjar provided similar data as I observed the online behavior and digital feedback. The polls indicated people were searching for information and looking for guidance on products. Additionally...
Figure 5: Home Page (Heatmap)
The “Getting Started” CTA (Call To Action) were not being utilized as there were no hotspots on the heatmap.
Figure 6: Create Page (Heatmap)
There were no clicks on ‘the step-by-step' instructional link from the Create page. The mouse movements in the visitor's recording showed similar behavior where users bypassed the hyperlink.
Figure 7: Hotjar Funnel
I also observed the low publishing conversion rate of 40 % from the funnel.
When asked 'What could be better about Magcloud?', people wrote:
"I had trouble figuring out how to use the templates, how the non-print part on the edges of the page worked. Better explanation of this would be helpful."
"Magcloud’s process for setting the viewing, pricing and download instructions is WAY too complicated, IMHO."
"Sell my product for me. Give a real and productive marketing service. Distribute my publications."
The survey also showed 30% of the respondents asked for more options (ex. format, sizes, templates, upload file format, and paper). This indicated the site ineffectively communicated the 60+ products it offered from the 7 formats it listed.
Figure 8: MagCloud's Format Details page (Partial View)
Onboarding issues became apparent as I interviewed MagCloud's customer service representatives and creative evangelist. Based on their interaction with customers, they reported:
new users did not know how to get started
users had to be directed to the instruction embedded in the software packages
The quantitative and qualitative research data exhibited similar behavioral patterns:
Users experienced difficulties getting started and consequently prevented their ability to publish new titles.
People could not easily correlate formats (e.g. standard, digest) to products (e.g. magazines, photo books).
The site's structure did not direct a customer to accomplish a task effectively.
Based on research insights, I proposed several design themes to the Product Manager and Director of UX. We agreed to focus on the three items below for this project:
1. Guide Users to Create a Publication
2. Design By Product
3. Simplify Navigation
We collaborated on possible solutions with the following thought, "How can we help our users select a product with ease and confidently publish the right format?"
Figure 10: Whiteboard ideation
I produced a user flow to demonstrate how a funnel can guide users toward publication. By simplifying the navigation (from the Home to Product to Format to the Create pages), it would help also onboarding new users.
Figure 11: User Flow Diagram - Self Publication
The User Flow diagram validated the Solutions page can be deleted. I replaced it with a Sell page to highlight how MagCloud can help users sell, promote, and market their best work.
Figure 12: Updated Sitemap
I designed a funnel to easily guide users towards their first publication by inserting clear Call-To-Action buttons. Whether they were coming from the Home, Product, or Format's page, new and existing users would be directed to the Create page so they can download the template they needed in order to publish the product they wanted.
Figure 13: Wireframe
MagCloud's site spoke in publication language that was not comprehensible to common users. It lacked a site hierarchy to generate an intuitive navigation flow. I discovered during research that users had difficulties determining what can be published and how.
My solution was to:
Map formats into relatable products so users can 'Design by Product',
Guide new users towards self-publication with clear CTA (Call To Action),
Create top hierarchy structure to simplify the navigational flow, and,
Eliminate unnecessary pages to remove the redundant informational display.
This project demonstrated the power of combing qualitative and quantitative research methods together. By having a holistic perspective from research, I have a great level of confidence in coming up with the right solution for the right problem.
For a complete view of the redesign, see the deck below for my final presentation or go to MagCloud.com.
Figure 14: MagCloud Redesign Presentation Deck