Work Experience
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
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
.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
Helping tier 3 & 4 users to get started
Discover
Stairs
Sept by step
Staked
Guidance
Gluing product development process
Learn, Plans
Blend
Spread
Permeate
Credibiilty
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
Clear guide rails for where our product competes
Support users to find all information to use ProtoPie on the website
Competitive Analysis
Find out product user benefits comparing competitive - Hi-fi prototyping to hand off
Persona
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
.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
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
.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.
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.
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
3. Sign Up/ Log In (New feature)
-
New signup flow links to download page & ProtoPie Cloud
-
Goal: Increase new user acquisition and user management
.png)
4. Footer (Reorganization)
-
Goal: Delete duplicate menu and combine similar category pages
I.A Deliverable
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.
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.
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.
.png)
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