<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
    <channel>
        <title>Joseph Wood</title>
        <description>Portfolio of Joseph Wood — Web and Applications Coordinator.</description>
        <link>/</link>
        <atom:link href="/feed.xml" rel="self" type="application/rss+xml"/>
        <pubDate>Sat, 23 May 2026 03:36:26 +0000</pubDate>
        <lastBuildDate>Sat, 23 May 2026 03:36:26 +0000</lastBuildDate>
        <generator>Jekyll v3.10.0</generator>
        
            <item>
                <title>Shepherding App</title>
                <description>&lt;h2 id=&quot;context&quot;&gt;Context&lt;/h2&gt;

&lt;p&gt;Our Shepherds are men in our church that keep up with the people in their ‘flock’. These are people that are geographically located near them. They will text or call them and check in with them when they need things. They had been using an older Shepherding Progressive Web App that was outdated and not easy to use.&lt;/p&gt;

&lt;h2 id=&quot;role&quot;&gt;Role&lt;/h2&gt;

&lt;p&gt;I designed the app completely from the ground up and worked with our Database Administrator to work on the back end code.&lt;/p&gt;

&lt;h2 id=&quot;constraints&quot;&gt;Constraints&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Fill in: timeline, team size, scope. Example: “Solo design, ~6 weeks, no formal user research — built for known internal users.”&lt;/em&gt;&lt;/p&gt;

&lt;h2 id=&quot;design-decision&quot;&gt;Design decision&lt;/h2&gt;

&lt;p&gt;My goal was to maximize readability and scanability. Most of the Shepherds are older and the text on the old app was very small. They used to have to make several taps just to get into someone’s account to see when they were last contacted. I made the text larger and a more readable font. I also added color indicators to let them easily know when a family was last contacted. I also made it feel familiar by making function similarly to the iPhone’s default contact app. This way they already had muscle memory built in when they visit a profile.&lt;/p&gt;

&lt;h2 id=&quot;visuals&quot;&gt;Visuals&lt;/h2&gt;

&lt;div class=&quot;screenshot-grid&quot;&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/shep1.png&quot; alt=&quot;Shepherding App — screen 1&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/shep2.png&quot; alt=&quot;Shepherding App — screen 2&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/shep3.png&quot; alt=&quot;Shepherding App — screen 3&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/shep4.png&quot; alt=&quot;Shepherding App — screen 4&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/shep5.png&quot; alt=&quot;Shepherding App — screen 5&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

</description>
                <pubDate>Tue, 19 May 2026 09:00:00 +0000</pubDate>
                <link>/shepherding-app/</link>
                <guid isPermaLink="true">/shepherding-app/</guid>
                
                <category>application</category>
                
                <category>perimeter</category>
                
                
            </item>
        
            <item>
                <title>Assessments.Perimeter</title>
                <description>&lt;h2 id=&quot;context&quot;&gt;Context&lt;/h2&gt;

&lt;p&gt;I was tasked with building a subsite off of Perimeter.org that hosts a 110-question assessment. The questions had to be easy to read on desktop, but especially on mobile, since most people would be taking the assessment on their phone.&lt;/p&gt;

&lt;h2 id=&quot;role&quot;&gt;Role&lt;/h2&gt;

&lt;p&gt;I designed and built the subsite end-to-end.&lt;/p&gt;

&lt;h2 id=&quot;constraints&quot;&gt;Constraints&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Fill in: timeline, team size, scope.&lt;/em&gt;&lt;/p&gt;

&lt;h2 id=&quot;visuals&quot;&gt;Visuals&lt;/h2&gt;

&lt;div class=&quot;screenshot-grid&quot;&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/assessment1.png&quot; alt=&quot;Assessments.Perimeter — screen 1&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/assessment2.png&quot; alt=&quot;Assessments.Perimeter — screen 2&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/assessment3.png&quot; alt=&quot;Assessments.Perimeter — screen 3&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/assessment4.png&quot; alt=&quot;Assessments.Perimeter — screen 4&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;h2 id=&quot;design-decision&quot;&gt;Design decision&lt;/h2&gt;

&lt;p&gt;My goal was to make a long assessment feel manageable. Instead of putting 110 questions on a single page, I broke them up into smaller chunks so there is a clear sense of progression in small doses. That makes it much easier for someone to push through to the end. I also redesigned the results page into a much easier-to-read summary compared to the previous version of this assessment, so the payoff at the end matches the effort to get there.&lt;/p&gt;
</description>
                <pubDate>Mon, 18 May 2026 09:00:00 +0000</pubDate>
                <link>/assessments-perimeter/</link>
                <guid isPermaLink="true">/assessments-perimeter/</guid>
                
                <category>website</category>
                
                <category>perimeter</category>
                
                
            </item>
        
            <item>
                <title>GO Journey Widgets</title>
                <description>&lt;h2 id=&quot;context&quot;&gt;Context&lt;/h2&gt;

&lt;p&gt;GO Journey is our mission trip program. The widget surfaces upcoming trips on perimeter.org and gives each participant their own page where visitors can read their letter and support their fundraising.&lt;/p&gt;

&lt;h2 id=&quot;role&quot;&gt;Role&lt;/h2&gt;

&lt;p&gt;I owned the design of both the trip list widget and the individual participant pages.&lt;/p&gt;

&lt;h2 id=&quot;constraints&quot;&gt;Constraints&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Fill in: timeline, team size, scope.&lt;/em&gt;&lt;/p&gt;

&lt;h2 id=&quot;visuals&quot;&gt;Visuals&lt;/h2&gt;

&lt;div class=&quot;screenshot-grid&quot;&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/go1.png&quot; alt=&quot;GO Journey Widgets — screen 1&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/go2.png&quot; alt=&quot;GO Journey Widgets — screen 2&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/go3.png&quot; alt=&quot;GO Journey Widgets — screen 3&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/go4.png&quot; alt=&quot;GO Journey Widgets — screen 4&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/go5.png&quot; alt=&quot;GO Journey Widgets — screen 5&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;h2 id=&quot;design-decision&quot;&gt;Design decision&lt;/h2&gt;

&lt;p&gt;I wanted every element of the mission trip to have room to breathe and take center stage. Previously everything was smushed together and harder to read. Now it is much easier to see who is going, read what the trip is about, and see the dates at a glance. I carried the same approach into the individual participant pages — their letter is easy to read and their fundraising progress is easy to see. All of it also looks much better on mobile, which is where most people end up viewing it.&lt;/p&gt;
</description>
                <pubDate>Sun, 17 May 2026 09:00:00 +0000</pubDate>
                <link>/go-journey-widgets/</link>
                <guid isPermaLink="true">/go-journey-widgets/</guid>
                
                <category>widget</category>
                
                <category>perimeter</category>
                
                
            </item>
        
            <item>
                <title>Sermons Widgets</title>
                <description>&lt;h2 id=&quot;context&quot;&gt;Context&lt;/h2&gt;

&lt;p&gt;We had a lot of sermons to display and a lot of information to surface for each one. The previous setup was hard to scroll through and showed less data per sermon, which made it tough for people to find what they were looking for.&lt;/p&gt;

&lt;h2 id=&quot;role&quot;&gt;Role&lt;/h2&gt;

&lt;p&gt;I designed the sermon widget — the card layout, the filtering and search, and the mobile behavior.&lt;/p&gt;

&lt;h2 id=&quot;constraints&quot;&gt;Constraints&lt;/h2&gt;

&lt;p&gt;&lt;em&gt;Fill in: timeline, team size, scope.&lt;/em&gt;&lt;/p&gt;

&lt;h2 id=&quot;visuals&quot;&gt;Visuals&lt;/h2&gt;

&lt;div class=&quot;screenshot-grid&quot;&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon1.png&quot; alt=&quot;Sermons Widgets — screen 1&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon2.png&quot; alt=&quot;Sermons Widgets — screen 2&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon3.png&quot; alt=&quot;Sermons Widgets — screen 3&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon4.png&quot; alt=&quot;Sermons Widgets — screen 4&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon5.png&quot; alt=&quot;Sermons Widgets — screen 5&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
  &lt;figure&gt;
    &lt;img src=&quot;/images/sermon6.png&quot; alt=&quot;Sermons Widgets — screen 6&quot; loading=&quot;lazy&quot; /&gt;
    &lt;figcaption&gt;Caption: what the viewer is looking at.&lt;/figcaption&gt;
  &lt;/figure&gt;
&lt;/div&gt;

&lt;h2 id=&quot;design-decision&quot;&gt;Design decision&lt;/h2&gt;

&lt;p&gt;I made each sermon a card that displays the crucial information up front so it is easy to scan. Many of the elements on the card are themselves links — tapping a speaker, series, or topic filters the list and surfaces more sermons like it. There is also a search bar and filters at the top of the widget. All of it is just as easy to use on mobile as on desktop. The result is that people can move through a lot of sermons in an easy-to-read format, which the old setup did not allow.&lt;/p&gt;
</description>
                <pubDate>Sat, 16 May 2026 09:00:00 +0000</pubDate>
                <link>/sermons-widgets/</link>
                <guid isPermaLink="true">/sermons-widgets/</guid>
                
                <category>widget</category>
                
                <category>perimeter</category>
                
                
            </item>
        
    </channel>
</rss>