Social-Platform
Beta Development
Using design gaps to create foundational structure that guides & develops 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 Lorem Ipsum text*
Lorem ipsum dolor sit amet consectetur adipiscing elit.? Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
The Problem:
During our heuristic evaluation we identified :
Lack of content across key platform areas platform that limits 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.
Lack of Content, Structure & User Engagement
Original Screens
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.
Role
UX/UI Designer
Test Moderator
Job duties
UX Research
User Interviews
Prototyping
Product Design
Usability Testing
Tools
Figma
Figjam
Riipen
Zoom
Case Context
Process
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.
The Team Strategy
I chose to take ownership of restructuring and defining the Resource Library experience.
Redrafting original designs and creating new content was needed to provide more opportunity to showcase user interaction points for the beta prototype.
Delegation & Design Execution
The original landing screen had limited content for user interaction & needed more content to provide foundational structure to the section.
Version 1: Client felt 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”.
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.
Final Version: Expands user scope of interaction with content within the Resource Library by:
Adding a horizontal scroll menu of featured blogs catered to the user
“Coming Soon” section that highlights upcoming platform content.
Learning courses offered within the "Self Development" subsection of the library.
New landing screens for the Resource Library
Original blog content had limited representation and contained repeat imagery
Original blog content integrated with IRB touchpoints.
Updates added new Blog topic tiles with new images to represent all of the content in the Blog section
IRB pops up like a drawer that users can swipe down to exit from.
All questions can be skipped and users can go back to change their answers
Users can write out explanations if they choose to and always end with a "Thank You" message.
Blog content is blurred out and text copy is only made visible if users indicate they are ready to engage with the content.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Lorem ipsum dolor sit amet consectetur adipiscing elit.? Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Lorem ipsum dolor sit amet consectetur adipiscing elit.? Consectetur adipiscing elit quisque faucibus ex sapien vitae. Ex sapien vitae pellentesque sem placerat in id. Placerat in id cursus mi pretium tellus duis. Pretium tellus duis convallis tempus leo eu aenean.
Warning labels were added for blogs containing possibly triggering content.
Content for the Self-Development landing screen & section
Images were removed from the menu scroll to resemble the menu from resource library landing screen
Moving the Badge screens into Self-Development provides structural content for the section which lacked beforehand.
Section Carousel Scroll Menu
User interviews revealed expectations of a "Self-Development" included:
goal tracking capabilities
learning courses
Final Version
The client disclosed that masterclasses would later be added, so tiles were created to represent content coming soon to that section.
Section Landing Screens
Version 1
Final Version
Client Feedback: Preferred the Featured section with a horizontal scroll menu to indicate multiple courses, with the second tile clipped from the frame.
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.
Badges were changed from squares with rounded corners to a circular form.
All badge images were changed to compromise between too playful & too serious, resulting in a badges that better matched the platform tone.
Before
After
Continuity between badge representation & platform tone
Original badge content contained inconsistent visual cues.
Client Feedback: Felt the 1st option was "too serious" & 2nd option was "too cartoony".
Original Screens
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 Flow for blog contributor forms.
Original Content: Overwhelms users with obligatory copy text, especially having the bloggers form linked to a full http address instead of using a CTA button.
Original Screen
Form fields were created for users who routinely engage in blogging content and have an interest in writing blogs for the platform.
Form Version 1
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.
Update
Client feedback: Requested fields created for users to upload credentials as an option.
Final
Course-based learning that reinforce the platform’s mission.
Original screens 1 & 2 showed disjointed navigation to the course enrollment CTA using multiple screens.
Original Screens
Course Info Screen
Updated Version
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.
Original Screen
Original UI lacked opportunity for users to indicate to back end development that a video lesson has been completed.
Course Video Lesson Syllabus
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
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.
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.
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.