Client
Client
Dr. Ray Hsu, Founder
Dr. Ray Hsu, Founder
Project Type
Project Type
Web, Community
Web, Community
Duration
Duration
4 Weeks
4 Weeks
Role
Role
UX/UI Designer
UX/UI Designer
OVERVIEW
OVERVIEW
Ink Bloom, a community platform, empowers writers to flourish by connecting them with a vibrant network of fellow creators and experts. The founder Dr. Ray Hsu, aims to gather insights from users to shape a clear roadmap for the MVP launch. The project goal was to optimize and simplify existing user flows to define the essentials for the MVP.
Since it was a project executed by four designers, we all collaborated on the UX research and handled the essential flows individually. I was mainly responsible for the user profile creation flow and 80% UI Components.
Ink Bloom, a community platform, empowers writers to flourish by connecting them with a vibrant network of fellow creators and experts. The founder Dr. Ray Hsu, aims to gather insights from users to shape a clear roadmap for the MVP launch. The project goal was to optimize and simplify existing user flows to define the essentials for the MVP.
Since it was a project executed by four designers, we all collaborated on the UX research and handled the essential flows individually. I was mainly responsible for the user profile creation flow and 80% UI Components.
PROBLEM
PROBLEM
We summarized the insights from existing prototype testing through heuristic evaluation and eventually developed an HMW statement.
What we found and insights from user interviews and testing:
Users get comfortable with getting critiques from peers who have the same tastes
Users are willing to grow their skills to a professional level
Unclear navigation and content structure, screen missing, feature location blurring
Unfriendly writing a long story when using a mobile, prefer a Desktop device
How might we create a space where writers can find community, grow their craft, and turn their passion into a lasting career?
We summarized the insights from existing prototype testing through heuristic evaluation and eventually developed an HMW statement.
What we found and insights from user interviews and testing:
Users get comfortable with getting critiques from peers who have the same tastes
Users are willing to grow their skills to a professional level
Unclear navigation and content structure, screen missing, feature location blurring
Unfriendly writing a long story when using a mobile, prefer a Desktop device
How might we create a space where writers can find community, grow their craft, and turn their passion into a lasting career?
SOLUTIONS
SOLUTIONS
Based on all insights and research, we eventually identified the essentials of the MVP and redesigned the key flows through a minimal interface that complies with the WCAG standard.
The platform's MVP is as follows:
Community - Facilitating connections between writers
Growth - Providing a tool and people for writers to improve their skills and craft
Monetization - Incorporating the paid critiques feature
Based on all insights and research, we eventually identified the essentials of the MVP and redesigned the key flows through a minimal interface that complies with the WCAG standard.
The platform's MVP is as follows:
Community - Facilitating connections between writers
Growth - Providing a tool and people for writers to improve their skills and craft
Monetization - Incorporating the paid critiques feature
OUTCOME
OUTCOME
Users showed strong enthusiasm for the platform, seeing it as a space to connect with like-minded peers and gain professional support, and our client appreciated the final deliverables and our overall effort.
Users showed strong enthusiasm for the platform, seeing it as a space to connect with like-minded peers and gain professional support, and our client appreciated the final deliverables and our overall effort.
Design Phases
Design Phases
#1. RESEARCH
#1. RESEARCH
We interviewed five writers to explore their experiences and identify the core MVP elements: Community, Personal growth, and Monetization, and synchronized the findings through FigJam to narrow down the challenge. We also learned from competitors—ADP List, Wattpad, and Reddit, to sort out and inform the significant flows before jumping into our ideation phase.
The key flows:
Finding, joining, and posting in a group
Uploading script/work files to create stories
Requesting critique from others
Giving critique to others
We interviewed five writers to explore their experiences and identify the core MVP elements: Community, Personal growth, and Monetization, and synchronized the findings through FigJam to narrow down the challenge. We also learned from competitors—ADP List, Wattpad, and Reddit, to sort out and inform the significant flows before jumping into our ideation phase.
The key flows:
Finding, joining, and posting in a group
Uploading script/work files to create stories
Requesting critique from others
Giving critique to others
#2. IDEATE
#2. IDEATE
We each took responsibility for sketching out those user flow screens for further wireframe designs (see other flows here), and my task was to work on the Profile section, which involves the flow of uploading script/work files.
We each took responsibility for sketching out those user flow screens for further wireframe designs (see other flows here), and my task was to work on the Profile section, which involves the flow of uploading script/work files.
#3. WIREFRAMES & UI
#3. WIREFRAMES & UI
We implemented a wireframe component template for all our flow screens to speed up the process and ensure consistency when presenting them to the client. Then, we tested the wireframes as a low-fi prototype to identify areas for improvement in the first iteration. (Scroll to see relevant findings in the Validation phase below)
We implemented a wireframe component template for all our flow screens to speed up the process and ensure consistency when presenting them to the client. Then, we tested the wireframes as a low-fi prototype to identify areas for improvement in the first iteration. (Scroll to see relevant findings in the Validation phase below)
- UI Setting
- UI Setting
Previously, the use of colors and text did not comply with WCAG. The clients expect to rewrite the visual expression, so we updated the style guide, created a components library, and executed on our UI.
Previously, the use of colors and text did not comply with WCAG. The clients expect to rewrite the visual expression, so we updated the style guide, created a components library, and executed on our UI.
#4. VALIDATE
#4. VALIDATE
Overall, our users found the updated site easy to use and more engaging. Their feedback indicated that the low-fi prototype clarified the key flow improvements. We followed up, refined the interfaces, and moved forward with high-fidelity prototype testing for further improvements.
Overall, our users found the updated site easy to use and more engaging. Their feedback indicated that the low-fi prototype clarified the key flow improvements. We followed up, refined the interfaces, and moved forward with high-fidelity prototype testing for further improvements.
Major Findings:
Major Findings:
Felt redundant, unnecessary text top bar for each page
Can't distinguish between "feed" and "groups" vocab on the Groups page.
Wished to have privacy settings and rating scores on the Profile page.
Preview profiles shortcut cards wanted a more intuitive layout.
All critiques are in one place, and I wanted better organization.
User feedback for my section:
Users recommended improving terminology for clarity and consistency
Include privacy settings, rating section, and account activity in Profile
Wish to have drag-and-drop behavior when uploading work
Felt redundant, unnecessary text top bar for each page
Can't distinguish between "feed" and "groups" vocab on the Groups page.
Wished to have privacy settings and rating scores on the Profile page.
Preview profiles shortcut cards wanted a more intuitive layout.
All critiques are in one place, and I wanted better organization.
User feedback for my section:
Users recommended improving terminology for clarity and consistency
Include privacy settings, rating section, and account activity in Profile
Wish to have drag-and-drop behavior when uploading work
#5. ITERATE
#5. ITERATE
We optimized the UI by leveraging findings from all prototype testing and delivered one high-fidelity prototype to our client. I iterated the screens and visualized them as an interaction diagram to conclude my responsibilities for the project.
TAKE AWAYS
TAKE AWAYS
Since it was a continuing project, it still has multiple content parts/sustainable features that need to be completed, such as edge cases, onboarding, filter features, payment, and user rating systems for further iteration. At the same time, I was grateful to be one of the contributors at Ink Bloom. I appreciated how our team lead, Emily King, explicitly used our diverse strengths to speed up the process and complete the project within the timeline.
Since it was a continuing project, it still has multiple content parts/sustainable features that need to be completed, such as edge cases, onboarding, filter features, payment, and user rating systems for further iteration. At the same time, I was grateful to be one of the contributors at Ink Bloom. I appreciated how our team lead, Emily King, explicitly used our diverse strengths to speed up the process and complete the project within the timeline.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.
Note to Scammers: If I were rich, this site would be blank.