Screen capture of Sprout's home page

Sprout Credit Union

team

Sherry Wang, Taylor Wilkinson

tools

HTML5, CSS3, GitKraken

my role

Web Developer; User Experience Developer

brief

A month long project to design and develop a website for a fictional company of our making, with an emphasis on responsive design. Our fictional company was Sprout Credit Union, which I created for a prior project where we needed to code out a styleguide for said company. IAT 339. February 2018.

Screen capture of Sprout's finacial advising page.
Screen capture of Sprout's finacial advising page. March 2018.

coding

For this project, we were required to code a fully functional responsive website using only HTML5 and CSS3, with no frameworks to assist. We were marked for our code readability and cleanliness of structure, in addition to code validity.

					
<section>
      <div class="product-content">
        <div class="product">
          <h2 class="product-text">No-Fee Chequing</h2>
          <p class="product-text">Here’s a no-fuss chequing account for your daily banking needs. Don’t get charged anything for your daily chequing transactions.</p>
          <ul>
            <li>No monthly fee</li>
            <li>Elligible free transactions include withdrawals, cheques, bill payments, point of sale transactions, pre-authorized debits, and Canadian credit union ATM withdrawals</li>
            <li>For a small fee, you can access cheque image returns for cheques you write out</li>
          </ul>
          <a href="login-for-product.html" class="apply-para-button">LOG IN TO APPLY</a>
        </div>

        <div class="product">
          <h2 class="product-text">Super Chequing</h2>
          <p class="product-text">You work hard for your money, so make sure your money is working for you. This account gives you For only $8.00 a month, get your daily chequing transactions covered with some extra perks, like free cheques. To top it all off, this account will earn you interest!</p>
          <ul>
            <li>Monthly fee: $8.00</li>
            <li>Receive free bank drafts, foreign drafts, cheque orders</li>
            <li>Tiered interest rate (starting at 0.25%) is calculated daily and paid out monthly on all balances</li>
            <li>Elligible free transactions include withdrawals, cheques, bill payments, point of sale transactions, pre-authorized debits, and Canadian credit union ATM withdrawals</li>
          </ul>
          <a href="login-for-product.html" class="apply-para-button">LOG IN TO APPLY</a>
        </div>

        <div class="product">
          <h2 class="product-text">Stellar Savings</h2>
          <p class="product-text">You want to easily save your money without too many strings attached. We get it. For no monthly fee, and no required minimum balance, this account gives you 5 monthly transactions and earns you 1.20%. Let us help you grow your savings.</p>
          <ul>
            <li>No monthly fee</li>
            <li>Current rate: 1.20%</li>
            <li>Earn the high interest rate on your entire balance, paid out monthly</li>
            <li>Rate is calculated on the daily closing balance</li>
          </ul>
          <a href="login-for-product.html" class="apply-para-button">LOG IN TO APPLY</a>
        </div>
      </div>
    </section>
					
				

Code snippet from the Personal Products page, showcasing the three offered products

information architecture & copywriting

For this project, we were required to write content using real language (i.e. no Lorem Ipsum). As such, I wrote the majority of the website's copy because I had experience working at a credit union. Aside from personal experience, I researched relevant products from local institutions and used that data to create a realistic-sounding organization while maintianing a unique voice that was representitive of the company's identity.

As we built out this content, we determined the website's hierarchy based on the logical userflow that one may undergo when using a financial institution's website. From a user-centric perspective, we decided how the various pages could link to one another to ease navigation and overall user experience.

Diagram displaying Sprout Credit Union's proposed sitemap.
[Sprout Credit Union's sitemap. March 2018.]