DONGYI
ZHANG
![cms_video2k.gif](https://static.wixstatic.com/media/54d32f_461ad6c4c97f4b22b2aa365e6f3d2124~mv2.gif)
Project Brief
Stela is a comic publisher streaming comics and ebooks via Mobile Apps to users on demand. There, a customized CMS system is in need to support content management and App operations from backend server to frontend client.
It was a 6 month on-going project to have the CMS developed from a MVP (6 weeks) to having a list of add-on features to meet different needs from cross-functional teams along with the company's business growth.
Here I would like to show my design thinking and process for the CMS design with a focus on the key add-on features for App Operations
Problems & Goals
Problem
A customized CMS in need to meet new and different needs from cross-functional teams along with business growth of the company.
Goal
Objective was to build an efficient and easy to use CMS tool for the teams to better serve its contents to its growing reading community
Team
I worked in a cross-functional team. As the main UX/UI designer, I was in all phases of the project, from mapping out the problem to delivering final designs.
My Responsibilities
User Research, Product Strategy, UX Design, Wireframes, Prototyping and Testing
The Process
My process will be different in different projects and will be determined by many factors such as the project goals, business needs, complexity of the problem, time and etc. Here I’ll describe my process for solving this problem.
![](https://static.wixstatic.com/media/5bfb6f_9cc6931fc07c4c46b50694d9062d80d8~mv2.png/v1/fill/w_44,h_44,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5bfb6f_9cc6931fc07c4c46b50694d9062d80d8~mv2.png)
Research
Understand business goal, user pain points and collect insights
![](https://static.wixstatic.com/media/5bfb6f_3150d8a22c9a4b7b9f0839d437482bf1~mv2.png/v1/fill/w_44,h_44,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5bfb6f_3150d8a22c9a4b7b9f0839d437482bf1~mv2.png)
Design
Design UX flow and low fidelity wireframes
![](https://static.wixstatic.com/media/5bfb6f_e3a01c682ec544bd844cbf99b78e54e3~mv2.png/v1/fill/w_44,h_44,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5bfb6f_e3a01c682ec544bd844cbf99b78e54e3~mv2.png)
Ideation
Brainstorm potential solutions and define MVP features
![](https://static.wixstatic.com/media/5bfb6f_3150d8a22c9a4b7b9f0839d437482bf1~mv2.png/v1/fill/w_44,h_44,al_c,q_85,usm_0.66_1.00_0.01,enc_auto/5bfb6f_3150d8a22c9a4b7b9f0839d437482bf1~mv2.png)
Test & Iteration
Prototype and collect feedback to plan iteration and future features
Research
Understanding the needs
The CMS tool is used by multiple teams within the company for different purposes. There, I scheduled interviews with current users and analyzed the problems of the old design and the user experience. After that, I could identify the challenges that I need to overcome and solve, and the goals that I need to achieve within this project.
Needs & Pain Points:
Business Team
-
Efficiency: less working hours, less human resources, more work done
-
Content and data security
-
Dashboard for quick business performance review
Publishing Team
-
Content upload : too many steps, not intuitive
-
-
Lack of preview of page layout
-
Lack of flexibility to design page layout to allow
App Operation Team:
-
Lack of ability to update info to users
-
Lack of feature to support community activities
Sales Teams:
-
Prefer to have a data dashboard to share insights into content and app performance
![CMS Sitemap (1).png](https://static.wixstatic.com/media/54d32f_765cec3039274b5f9647306261ec7c24~mv2.png/v1/fill/w_600,h_1257,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/CMS%20Sitemap%20(1).png)
Ideation
Sketch Potential Solutions
User research and persona creation brought up the users main needs, goals, and behaviours. Therefore, I found that the main issues my design decisions needed to solve were:
-
Upload, schedule and release content efficiently
-
Ability to edit and organize layouts
-
Time consumption
-
Different teams needs : Create separate accounts for different teams, grand teams with different access based on their needs
Prioritize MVP
Based on this information, I was able to create user stories and define the MVP.
Key MVP Features:
-
Adding and editing content
-
Automatic indexing for easy organization and searchability
-
Controlling and managing formatting
-
Creating and saving templates for future use
-
A preview tool where you can test out new content before it goes live
-
Marketing operations including paywall A/B testing, version control
-
Security features to protect control of the site and to allow for multiple users to have different levels of access
User Journey Flow
Creating UX flow helps me to understand the whole user journey and covering all the screens. Based on feature narrative, I began to construct the user experience flow, taking into consideration the following:
![STELA Manager Tool_1.0.png](https://static.wixstatic.com/media/54d32f_019983b444744b8cabdbd17775bef897~mv2.png/v1/fill/w_840,h_1649,al_c,q_90,usm_0.66_1.00_0.01,enc_auto/STELA%20Manager%20Tool_1_0.png)
Design
Mid-Fidelity Wireframes
Before starting creating a high fidelity visual design and any other implementation, I created prototypes to test the solutions with users and understand how the new solutions works.
![Screen Recording 2021-03-13 at 12.27.09](https://static.wixstatic.com/media/54d32f_575c3303154a4311a9843688a356f2d3~mv2.gif)
Testing & Iterations
Content Management
![Screen Recording 2021-03-06 at 12.05.09](https://static.wixstatic.com/media/54d32f_38f8c2271b7a4a408254fa6158ffe821~mv2.gif)
Marketing Operations - Paywal A/B testing
![iap.gif](https://static.wixstatic.com/media/54d32f_1a698969bf5046ba95198d09a6b3dfb7~mv2.gif)
Marketing Operations - Discount / GiftPack
![giftpack.gif](https://static.wixstatic.com/media/54d32f_0c2e7734e51e464e91e43ea0f9f3eff0~mv2.gif)
Marketing Operations - Notification
![notificaiton.gif](https://static.wixstatic.com/media/54d32f_dda233c43d4e4d32ac272c814998facc~mv2.gif)
Marketing Operations - Deeplink
![deeplink.gif](https://static.wixstatic.com/media/54d32f_c0101b903c6c4332b79ba08075f24f17~mv2.gif)
What I have learned from the project
I learned how to start designing effectively for dynamic content-driven applications such as supporting static websites, landing pages, and regularly content publishing. In order to make this transition, designers will need to understand how these types of applications are typically structured as well as to adopt a “content-first” mindset in the design process. Some key learnings I’ve got including,
-
Execute the UX/UI of Stela publishing and marketing platforms towards a connected ecosystem of capabilities for Stela’s internal teams
-
Apply standard methodologies and user-centered design principles to build simple, clean and seamless workflows
-
Partner with cross-functional teams to discover and understand business, feature, and user requirements that translate into thoughtful designs
-
Develop design solutions using participatory and iterative techniques including user interviews, observation, usability testing, validation, and design thinking workshops
-
Help establish a new, scalable vocabulary of components and paradigms for Stela's internal capabilities