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
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
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
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
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.
Helping tier 3 & 4 users to get started
Sept by step
Gluing product development process
Becoming a trustworthy partner to all industries
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.
Clear guide rails for where our product competes
Support users to find all information to use ProtoPie on the website
Find out product user benefits comparing competitive - Hi-fi prototyping to hand off
Target users are seeking technical capabilities, productivity for teams and skill-building
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
Reinforcing content and information
- Product information
- Plan explanation and plan comparison
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
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
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
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
4. Vote and Pick
Vote and pick one best option
Make a decision categories taxonomy
Information hierarchy & content strategy
First, second, and third depth information hierarchies were developed based on purpose-driven landing pages following the page objectives—inspiration, 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
2. Information Hierarchy
Create second and third depth pages following the landing page objectives
2-1. Inspiration (newly established)
Introduce the ProtoPie principle, ProtoPie new features, and sample prototypes.
Goal: Give inspiration and attract users to download ProtoPie more.
2-2. Guidance (content update and reinforcement)
Offer more ProtoPie video learning content for beginner, intermediate, and advanced levels.
Goal: 1) Nurture users 2) Increase user retention 3) Obtain product royalty
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.
2-3. Credibility (newly established)
Increase the credibility of ProtoPie industry solutions
Introduce diverse industry cases and resources for potential customers
Goal: Attract and secure new industry customers
3. Sign Up/ Log In (New feature)
New signup flow links to download page & ProtoPie Cloud
Goal: Increase new user acquisition and user management
4. Footer (Reorganization)
Goal: Delete duplicate menu and combine similar category pages
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.
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.
As users become more skillful and familiar with the product with ProtoPie learning content, I expect to increase users' retention and product loyalty.
Solution page content offers trustful industrial resources, use cases, demos, and testimonials to attract and secure new B2B customers.
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
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.
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.
New user signups
Easy to use ProtoPie with learning content in the website
Most visited page after Main page