Portfolio
A collection of projects from my time at Fibersmith Software (Firm building software for Internet Service Providers), showcasing the blend of creative and technical work I took on during my role.
My work included UI, web design, and graphic design, HTML for emails and embedded content, and user-focused documentation for the Vision support site.
UI Design:
Designed visual elements and location-based UI components, including custom icons, map legends, and dialogue popups. Created supporting documentation to make these features easier for users to understand and navigate.
A UI redesign concept for the MDU (Multiple Dwelling Unit) page, exploring a clearer way to organize and display information when a single account or company manages multiple properties. This mockup focuses on making individual dwellings easier to distinguish while keeping related account information accessible in one place.
Concept mockup only — this design was created as a visual exploration and is not currently implemented in the software as project was put aside.
A UI concept exploring a clearer way to display busy time periods on the calendar. In the original design, multiple events happening during the same timeframe became crowded and overlapped (image 1), making it difficult to see individual events and understand the schedule at a glance.
The redesign focuses on giving crowded time periods more space and visibility, making individual events easier to identify while keeping the calendar organized. I compressed events of the same category and time into a single block (image 2) and if you click into a category block, you can reach each individual event in the group (image 3)
Image 1
Image 2
Image 3
A UI concept focused on improving the mobile shopping cart experience and overall cart summary. I redesigned the layout to address inconsistent spacing, limited visual hierarchy, and a lack of variation in text sizing and weight. The updated design makes product information, options, and the cart summary easier to scan and understand while creating a clearer visual hierarchy throughout the experience.
With item groups being introduced as a new feature, the existing invoice layout needed to evolve beyond simply listing every item at the same level. I created this UI concept to establish a clear visual hierarchy between services, categories, and individual items. Indentation, text size, weight, and alignment help communicate which items belong together, making the new grouped structure easier to scan and understand.
To make card reordering feel more discoverable and intuitive, I introduced dedicated drag handles and a visual highlight for the card being moved. These interaction cues communicate both what can be moved and where it is being moved, giving users clear feedback throughout the rearrangement process.
Web Design:
Led a complete visual redesign of the Fibersmith website, modernizing its interface, layout, and overall user experience. I tried to create a light and modern feel while not changing the brand identity as a whole.
Graphic Design:
Created design elements for the shopping cart segment, integrating the customer specifications and branding to align with the presentation of the product and platform
Created diagrams for support documentation to help visualize the content and wrote the linked page.
I designed postcards and yard signs for fictional broadband company ABC Broadband to showcase the software's marketing and referral features. The yard signs incorporated QR codes for referral tracking, and I also wrote the support page documenting how to create and use them.
HTML:
A large part of my work at Fibersmith involved HTML, where I was able to combine my graphic design background with my technical skills to create more personalized experiences within VISION. HTML was a newer addition to the software, opening up customization options that had previously been limited, including emails, shopping cart visuals, and other customer-facing content.
I helped turn those possibilities into practical designs, working with clients to visualize how HTML could be used within VISION to better reflect their brand and create a more personalized experience for their customers.
VISION includes a large library of email templates for common customer communications, such as billing notifications and internet outages. To make customizing these templates more efficient, I created HTML versions of each template along with a Python script that generates a complete set of branded emails from a few client-specific inputs, including the client name, primary and secondary colors, and logo URL.
This turned what could have been a repetitive customization process into a reusable system that gave each client a consistent, branded starting point.
Python script cannot be provided as it is for Fibersmith internal usage only.
|
With the addition of HTML customization in VISION, I explored how shopping cart offer graphics could be created using HTML instead of static images. This gives clients more flexibility to update text directly within VISION, rather than needing to edit a graphic and upload a new image every time an offer changes.
The concept combines visual design with the flexibility of HTML, giving clients more control over their shopping cart content while maintaining a polished, branded appearance.
I created both the HTML integration and supporting documentation for connecting a website's address field directly to the VISION public shopping cart. The integration passes address information through URL parameters, allowing the cart to validate the customer's location and display the appropriate offers.
This was a feature customers were actively asking about, and I know of several customers who went on to implement it on their own websites. I also wrote a support page explaining how the integration works and the available options, including using a full address or separate address fields and optionally adding autocomplete tools such as Google Maps or Mapbox. This project combined HTML development with technical documentation to turn a customer-requested integration into something practical and easier to implement.