Wireframe Iterations
Weekly design reviews gave different perspectives on my work. There were some key edits reflecting the design feedback.
Layout & Component Sizing
I used the single-column design at 568px mobile breakpoint. Some suggested adding another column since each component took up too much space.
I decreased the image size. And I kept the single-column design. Since it’s a common pattern in mobile design. The screen will fit more content while not overcrowding the screen. We have a good amount of profiles. So we should minimize the scroll.

Fig 8. Before and after editing the component size.
Readable Text Width
I adjusted the width of the text copy to complement <80 character counts in all breakpoints, which was more accessible according to A11Y guidelines.
Component Placement
Social Media Links were placed underneath the headshot because it was a common pattern. My team pointed out that from a UX perspective, the social links were the least prioritized components (org value). So they’re moved to the end of the biography copy. They should serve as the “click here if you want to know more” purpose.

Fig 8. Before and after re-placing the social links component.
Interaction States
Focus State
I had to add more padding inside the Headshot component to increase spacing and avoid CSS complications with the border box.
Hover State
The world of animation always amazed me. Finally settled down on the image zoom-in effect after a brainstorming session with the UX team. Compared to the older hover effect, the image scale change is more effective and fun than the new hover state!
Disabled State
We didn’t need a disabled state in this project. But it was good to have it in the component library for future reference. We wanted to document this in the design system.

Fig 9. Interaction states of the Headshot component.