UX Design Based on Content Strategy and Hierarchy

Strategic visualization of ideas and concepts to drive a design vision that meets both user and business needs

ProtoPie Website
ProtoPie Website

press to zoom
New I.A
New I.A

press to zoom
1/2

Background

In 2020, ProtoPie launched a new B2B strategy to boost growth in the global market. Before the website renewal, the ProtoPie site was product-oriented. The company needed to renew its website. 

As a UX designer, I was responsible for designing a new digital experience that realizes the business strategy.

To demonstrate my strategic visualization, I selected two projects

1) Information architecture (I.A) 

2) UI design with content strategy   

Overview & My Contribution

Project Deliverables

Manage I.A and information hierarchy for ProtoPie’s website revamp
 

Set definitive and clear objectives for each page of the website
 

Design wireframe and UI for ProtoPie’s website revamp
 

Create content and direct copywriting based on each page of the website

My Key Contributions

Defined new website objectives by connecting the new business plan

Designed and quality control for I.A and UX/UI deliverables

Created a content matrix for the basis of the revamp covering the entirety of prior web content
 

Created content for all pages with a strategy to meet each page objective

Collaborated with a cross-functional team to deliver end-to-end product designs—web and mobile

Results

Acquired new user signups (30% growth) 

Achieved 2.5 times Individual, Team, and Enterprise plan revenue growth

Products installation rate growth by 20%

Timeline & Project Scope

Frame 4 (1).png

New ProtoPie Focused On

To be better designer than better product 

From Software to Skill

From Niche to Mainstream

New Website Objectives
+
Key Visual Concept

In the new strategy, ProtoPie decided on three human-centered focuses—users, processes, and industry. The new ProtoPie website selected three objectives to support users to become better designers by providing more tutorials, information, and resources. Then, our team decided on key visuals and messages through the mood board to visualize new objectives.

Inspiration

Screen Shot 2021-08-29 at 5.18.18 PM.png

Helping tier 3 & 4 users to get started

Discover

Stairs

Sept by step

Staked

Guidance

Screen Shot 2021-08-29 at 5.18.26 PM.png

Gluing product development process

Learn, Plans

Blend

Spread

Permeate

Credibiilty

Screen Shot 2021-08-29 at 5.18.36 PM.png

Becoming a trustworthy partner to all industries

Solutions, Support

Transparency

Honesty

Thrustyworthy

Robust Discovery

To achieve new objectives and architect information for the new website, I identified background information and discovered insights. When I joined ProtoPie, vision architecture, competitive analysis, and persona discovery were already created. I addressed the complex problems in the previous website and analyzed users' needs from them.

Vision Architecture

Screen Shot 2021-08-08 at 5.02.19 PM.png

Clear guide rails for where our product competes
 

Support users to find all information to use ProtoPie on the website

Competitive Analysis

Screen Shot 2021-08-24 at 9.33.02 PM.png

Find out product user benefits comparing competitive - Hi-fi prototyping to hand off

Persona

Screen Shot 2021-08-08 at 4.54.18 PM.png

Target users are seeking technical capabilities, productivity for teams and skill-building

Problem Definition
according to the previous website audit

  • Lack of content and information
    - Learning content, samples, demo, plan comparison, sales, FAQs, and business strategy

  • No signup/sign-in option to purchase in the previous website

  • Need pages strategy to build the ecosystem and increase discoverability

  • Uncomfortable download system: Automatic download system by one-click

iMac - 3.png
Solution (1).png

Proposed Solutions

  • Reinforcing content and information 
    - Product information
    - Plan explanation and plan comparison
    - FAQs

  • Adding new content
    - New own tutorials and resources
    - More inspirational prototypes made with ProtoPie
    - Diverse industrial demo and information for company customers 

  • Adding signup/login option to purchase

  • Adding a download page and giving users the autonomy to download

Information Architecture

Establishing information architecture is the first step to realize new goals according to business strategies and solve current problems for the new website. I designed the information hierarchy to fit the new objectives by collecting all website information

Progress of designing IA

1. Content Matrix

  • Gathering all content regarding the website

  • Reviewing the previous website content, structure, and volume

  • Collecting new content ideas and needs 

Screen Shot 2021-08-07 at 5.46.22 PM.png

2. Open Card Sorting

  • Goal: Previews website structure + new ideas + contents

  • Apply takeaways from competitors research 

  • Bottom-top grouping of all content with team members

  • Top-bottom thinking level 1 structure first with team members

  • Check out the most common and important sorted content

Screen Shot 2021-08-07 at 5.31.21 PM.png

3. Brainstorming - Level 1 GNB

  • Suggest ideal level 1 GNB options among sorted categories from the result

  • Propose design and storytelling category flows by considering business goals and users’ needs

  • Brainstorm with team members to integrate common good ideas and create the structure of a website

Screen Shot 2021-08-07 at 5.54.12 PM.png

4. Vote and Pick

  • Vote and pick one best option

  • Make a decision categories taxonomy

Frame 1.png

Information hierarchy & content strategy

First, second, and third depth information  hierarchies were developed based on purpose-driven landing pages following the page objectivesinspiration, guidance, and credibility. I designed each page to have a clear purpose; every page is a landing page.

1. GNB Objectives

  • Set up level 1 GNB to meet the new website objectives 

  • Create level 2 and 3 pages following the page objectives

iMac - 7 (1).png

2. Information Hierarchy

Create second and third depth pages following the landing page objectives

2-1. Inspiration (newly established)

  • ​Discover page

  • Introduce the ProtoPie principle, ProtoPie new features, and sample prototypes.

  • Goal: Give inspiration and attract users to download ProtoPie more.

Frame 259.png

2-2. Guidance (content update and reinforcement)

  • Learn page

  • Offer more ProtoPie video learning content for beginner, intermediate, and advanced levels.

  • Goal: 1) Nurture users 2) Increase user retention 3) Obtain product royalty

  • Plans page

  • Offer a more detailed explanation and comparison of each plan.

  • Add a free student and school plan 

  • Goal: Help better understand each plan and induce subscription.

Frame 260.png

2-3. Credibility (newly established)

  • Solution Page

  • Increase the credibility of ProtoPie industry solutions 

  • Introduce diverse industry cases and resources for potential customers 

  • Goal: Attract and secure new industry customers

Frame 261.png

3. Sign Up/ Log In (New feature)

  • New signup flow links to download page & ProtoPie Cloud

  • Goal: Increase new user acquisition and user management

Frame 262 (2).png

4. Footer (Reorganization)

  • Goal: Delete duplicate menu and combine similar category pages

Footer.png

I.A Deliverable

New I.A
New I.A

press to zoom
Previous I.A
Previous I.A

press to zoom
1/2

UI Design Based on Content Strategy

I designed wireframes based on content strategy for all landing and detail pages and directed copywriting with a copywriter. The strategic visualization for the UI design and the design system was developed based on the key visual concept with visual designers' collaboration.

1. Inspiration

​Discover page
This page focuses on attracting users to download ProtoPie more by giving inspiration.
​We discovered that sample prototypes are effective from data to give ideas on how or what type of prototypes could be made with ProtoPie to users.
So we decided to maximize this on the discover page. Using gif thumbnails is for users to understand content detail intuitively.

Wireframe - Discover.png
PDS-Web discover.jpg
Wireframe - Learn.png
PDS-Learn.jpg

2. Guidance  

Learn page

As users become more skillful and familiar with the product with ProtoPie learning content, I expect to increase users' retention and product loyalty.

3. Credibility  

Solution page

​Solution page content offers trustful industrial resources, use cases, demos, and testimonials to attract and secure new B2B customers.

Wireframe - solutions.png
PDS-Web Auto.jpg
images-Web copy.jpg

4. Copywriting

I directed copywriting for all pages' content with a copywriter to deliver purposeful information.

  • Fulfill user expectation of a page

  • Head copy, sub copy

  • Paragraph copy—easy to read, as short as possible

  • CTA strategy

  • Decide voice and tone  

  • Copy convention and rule

  • Direct and guide with copywriters

5. Design System

The design system was built to accommodate scalability, so components can work well and render well on various device resolutions. 

Design system (1).png

Final Deliverables

Results

After the website renewal in June 2020, I tracked quantitative and qualitative website data for six months to check if the new objectives—inspiration, guidance, and credibility—worked well.

The website renewal contributed to an increase in new signups, revenues, and install rates. In addition, through user interviews, I found that the Discover, Learn, and Plan pages were useful.

01

New user signups

+30%

02

Revenue Growth

+2.5 Times

03

Install Rate

+20%

04

Easy to use ProtoPie with learning content in the website

4.3
(Max 5)

05

Most visited page after Main page

Discover
Learn
Plans

06

Plans page is helpful to understand

all plans quickly
from user interview
(Apr 2021)