Social-Platform
Using design gaps to create foundational structure that guides & develops Beta-product readiness.
*Due to client NDA terms, the logo has been changed and company name has been excluded. Also, certain areas of text copy has been replaced with descriptive text instead of site verbatim.
Question gathering user data for site development. *NDA prevents showing actual content*
Process
Outcome & Impact
Through iterative prototyping and collaborative client feedback cycles, we transformed a fragmented beta into a cohesive, launch-ready ecosystem. The final solution:
Closed critical content gaps
Improved structural clarity and navigation
Strengthened the system’s infrastructure
Positioned the platform for long-term engagement that ensured a growing future user base
Full Resource Library Prototype
What I Learned
How to work within a design team.
Creating effective designs based on client feedback.
Honoring NDA requirements within design breakdowns.
Areas To Improve
Communitive Collaboration with other team members to more efficiently ideate & iterate designs
Initiating more descriptive client feedback that can better help guide design decisions.
Figma, Figjam, Riipen, Zoom
Tools:
UX research, user interviews, prototyping, usability testing
UX/UI designer, Prototype test moderator
Job duties:
Role:
I partnered with two other product designers to support a client preparing for beta launch. Our team was tasked with identifying design gaps that affected site navigation and alignment with the platform’s mission for its users. In addition to improving the front-end user experience, we were also assigned to:
Redraft original content that can structurally stabilize the and direct the type of content needed to round out the Resource Library prototype
Design a system of intuitive IRB checkpoints embedded within the user experience.
Create new content to help complete the platform's Resource Library to increase areas for user engagement in the beta prototype.
Case Context
Figma, Figjam
Tools:
Product design, prototyping, usability test moderator
UX/UI Designer
Job duties:
Role:
The Problem
During our heuristic evaluation we identified :Lack of Content, Structure & User Engagement.
Lack of content across key platform areas platform that highly limited user interaction.
Inconsistent information hierarchy & fragmented UI patterns
Structural gaps within the Resource Library, repeat imagery & structurally lacked foundational organization & scalability
Addressing both content and structural deficiencies at this critical pre-launch stage was essential to ensuring a cohesive beta experience that demonstrates how users can engage with the platform.
Original Screens
As a team, we conducted a comprehensive platform content audit to uncover design gaps and navigation breakdowns. This allowed us to synthesize user-centered insights to improve clarity and mission alignment across the system.
We were also tasked to develop a framework for embedding IRB checkpoints into natural user interactions, allowing the platform to gather meaningful feedback without disrupting user flow.
I took ownership of restructuring and defining the Resource Library user experience. Redrafting original designs and creating new content was needed to provide more opportunity to showcase user interaction points for the beta prototype.
The Team Strategy
Delegation & Design Execution
New landing screens for the Resource Library
Originally, the Resource Library had limited content for user interaction & needed more content to provide foundational structure to the section.
Original Screen
Client expressed that the landing screen felt “a little too busy on the eyes” with all of the tiles, and that the imagery used still felt “too dark”.
Version 1
Versions 2 & 3: Show the imagery used for the library sections were unnecessary & added to overwhelming the eyes. They were removed, but the marker coloring style borders were kept to maintain the more playful feel the client wanted.
Resource Library Drafts 2 & 3
Expands user scope of interaction with content within the Resource Library by:
“Coming Soon” section that highlights upcoming platform content.
Learning courses offered within the "Self Development" subsection of the library.
Adding a horizontal scroll menu of featured blogs catered to the user
Final Version
Original blog content integrated with IRB touchpoints.
Content had limited representation and contained repeat imagery.
Original Blog Tiles
Blog topic tiles with new images to represent all of the content in the Blog section
Updated Blog Tiles
Warning labels were added for blogs containing possibly triggering content.
Sensitive Topic Blog Tile
IRB pops up like a drawer that users can swipe down to exit from.
Users have the option to skip or give further details
Content is blurred out with text only made visible if users indicate they're ready to engage with the content.
Sensitive Topic Blog with IRB
User Flow for blog contributor forms.
Overwhelms users with copy text, especially having the bloggers form linked to a full http address instead of using a CTA button.
Original Screen
Screen copy was framed with rounded corners. padding & a white fill so users can read text against the blurred background image, giving more life to the screen.
Updated Screen
A form field screen was created for users who routinely engage in blogging content and have an interest in writing blogs for the platform.
Version 1
Client feedback: Requested fields created for users to upload credentials as an option.
Final
Content for the Self-Development landing screen & section
The Self-Development subsection of the Resource Library lacked content providing foundational structure for user interaction in the prototype.
Laying the foundation for the horizontal menu scroll would subsequently provide structure for the entire section.
The client disclosed that masterclasses would later be added, so tiles were created to represent content coming soon to that section.
Coming Soon Content
Images were removed from the menu scroll to resemble the menu from resource library landing screen
Section Carousel Version 1
User interviews revealed expectations of a "Self-Development" included:
- goal tracking capabilities
- learning courses
Final Version
Version 1
Final Version
Client Feedback: Preferred the "Featured" content on the Self Development landing screen have a horizontal scroll menu to indicate multiple courses, with the remaining carousel content clipped from the frame.
Course-based learning that reinforce the platform’s mission.
Original content showed disjointed navigation to the course enrollment CTA using multiple screens.
Original Screens
Update
By consolidating course info & CTA onto 1 screen, the updated version presents a clearer path through the course details that lead users to the course CTA.
Lacked opportunity for users to indicate to back end development that a video lesson has been completed.
Original Screen
Added toggle switch buttons for users to indicate the video lesson has been completed.
Once all videos have been marked as complete, this will indicate to admins that the user has completed the course.
Updated Version:
Continuity between badge representation & platform tone
Content contained inconsistent visual cues.
Client Feedback: Felt the 1st option was "too serious" & 2nd option was "too cartoony".
Original Screens
Badges were changed from squares with rounded corners to a circular form.
Images were changed to compromise between too playful & too serious, resulting in a badges that better matched the platform tone.
Before
After
Added UI navigation for users to return to previous screen.
Badges earned are given a green stroke and image blur layer is removed.
Pending badge images are blurred out with grey text labels.
User Badges
Goal-tracking flows tied to badge rewards that strengthen user engagement
Users can add the number of goals as desired by clicking the underscored “+ Add Goals” text.
Each field is given a toggle switch button so users can indicate to the site admins that the goal has been completed.
Prototyped action is revealed once the user marks the 6th goal as complete.
User achieves the “Goal Getter” badge for completing all the goals they have set for themselves for the day and promotes further user engagement with setting goals and attaining different badges.
