Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Case studies dec17 v2 #440

Merged
merged 8 commits into from
Jan 18, 2018
Merged

Case studies dec17 v2 #440

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
cc8b73b
updates index so each case study links to the relevant page, not just…
rub1e Dec 19, 2017
581ed28
updates portfolio so each case study links to the relevant page
rub1e Dec 19, 2017
6b74a30
updates EMF case study
rub1e Dec 19, 2017
6b31c53
updates IC case study
rub1e Dec 19, 2017
1e777d3
updates SMG case study
rub1e Dec 19, 2017
a8cdfbc
adds underline to SMG hack day link
rub1e Dec 19, 2017
e0c6e79
changes class of source code buttons to mr1
rub1e Dec 19, 2017
6464833
Minor changes to case study content & formatting https:/d…
iteles Jan 17, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
114 changes: 66 additions & 48 deletions case-studies/ellen-macarthur-foundation/CE100.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,9 +74,9 @@ <h1 class="dwyl-dark-gray f3-plus w-90 tc center">Online Membership Platform</h1

<section class="pt2 pb3 pv4-ns ph4 ph0-ns center mw8">
<div class="w-40-ns dtc-ns v-top-ns">
<img src="../../img/common/emf-phone-1.png" alt="A phone displaying an app on a challenges page" class="w-70-ns w-100 pl5-ns center">
<img src="../../img/common/emf-phone-2.png" alt="A phone displaying an app on a page for selecting tags" class="w-70-ns pl5-ns dn db-ns">
<img src="../../img/common/emf-phone-3.png" alt="A phone displaying an on a page to create a new challenge" class="w-70-ns pl5-ns dn db-ns">
<img src="../../img/common/emf-phone-1.png" alt="A phone displaying the Ellen MacArthur Foundation's online membership app on a challenges page" class="w-70-ns w-100 pl5-ns center">
<img src="../../img/common/emf-phone-2.png" alt="A phone displaying the Ellen MacArthur Foundation's online membership app on a page for selecting tags" class="w-70-ns pl5-ns dn db-ns">
<img src="../../img/common/emf-phone-3.png" alt="A phone displaying the Ellen MacArthur Foundation's online membership app on a page to create a new challenge" class="w-70-ns pl5-ns dn db-ns">
</div>

<article class="w-50-ns dtc v-top istok-web lh-copy dwyl-dark-gray">
Expand All @@ -86,60 +86,48 @@ <h3 class="b mb2 f5">Project: <span class="normal">CE100</span></h3>
<img src="./img/common/yellow-gray-heart.png" alt="dwyl heart logo" class="h1">
Live App
</a> -->
<a href="https:/emfoundation/ce100-app" class="dib link mv2 mh1 pa2 dwyl-bg-dark-gray white br2 f6 shadow-4">
<a href="https:/emfoundation/ce100-app" class="dib link mv2 mr1 pa2 dwyl-bg-dark-gray white br2 f6 shadow-4">
<i class="fa fa-github pr2" aria-hidden="true"></i>
Source Code
</a>
</div>
<h3 class="b f5">Problem Overview</h3>
<p class="f6">
The Ellen MacArthur Foundation’s (EMF) CE100 membership programme
fosters collaboration among their members to discuss challenges and
share insights, with the interaction among members being mostly
contained to three physical events a year.
The Ellen MacArthur Foundation’s CE100 membership Programme supports
a wide range of Circular Economy stakeholders to learn, innovate,
and generally collaborate with each other.
<br>
EMF had a very common but very broad challenge - getting busy offline
members to interact and engage online, as the interaction among
members was mostly contained to three physical events a year.
</p>
<h3 class="b f5">Approach</h3>
<p class="f6">
Members of the dwyl team led an initial problem workshop to help the EMF
team understand the pain points across the organisation and narrow down
the area of focus to where the most value would be added - in this case,
by solving the problem of lack of continuous engagement in their CE100
programme. This was then followed by two detailed design and technical
workshops.
dwyl’s approach involved workshopping pain points directly with the
EMF team to narrow down focus onto the key issue of continuous
engagement, resulting in a genuinely collaborative solution - a
platform for members to share and solve each other’s challenges (in
addition to standard features like a directory & intuitive admin
interface). This was all built over several engagements based on user
feedback, along with two detailed design and technical
workshops.
</p>
<h3 class="b f5">Solution Overview</h3>
<h3 class="b f5">Solution</h3>
<p class="f6">
A digital membership platform which allows members to share challenges
and respond to challenges faced by other members.
We were delighted to be able to use only open source technologies
like the powerful PostgresQL database, alongside our oft-used stack
of Node.js and Hapi.js.
<br>
By taking a highly modular microservices approach to designing the
architecture, we were able to ensure that new features could be
integrated quickly and easily without impact on existing
functionality.
<br>
In our latest set of sprints we have been working with EMF on to
integrate their asset management API into the application, supporting
its development through a series of spikes and incremental
integrations.
</p>
<h3 class="b f5">Project Length</h3>
<p class="f6">
12+ Weeks
Sep 2016 - Oct 2016 (Sprint 1 - 2)<br>
Dec 2016 - Jan 2017 (Sprint 3 - 4)*<br>
Feb 2017 - Feb 2017 (Sprint 5)*<br>
May 2017 - May 2017 (Sprint 6)*<br>
<span class="i">* Additional sprints are commissioned to build
additional functionality based on user feedback</span>
</p>
<h3 class="b f5">Implementation Team</h3>
<p class="f6">
Scrum master<br>
System Architect &amp; QA<br>
Mid-level Developer<br>
Mid-level Developer<br>
</p>
</div>
<div class="w-80-ns">
<h3 class="b f5">Technologies</h3>
<img src="../../img/common/technologies/js-logo.png" alt="JavaScript" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/node-logo.png" alt="Node" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/hapi-logo.png" alt="Hapi" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/postgresql-logo.png" alt="PostgreSQL" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/redis-logo.png" alt="Redis" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/aws-logo.png" alt="Amazon Web Services" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/heroku-logo.png" alt="Heroku" class="h3 ph3-ns pv0 pa2">
</div>
<div>
<h3 class="b f5">Key Functionality</h3>
<ul class="f6">
<li>Member organisation directory + profiles (including mission
Expand All @@ -149,15 +137,45 @@ <h3 class="b f5">Key Functionality</h3>
collaboration within the network.</li>
<li>Ability to add tags to an organisation and its challenges,
facilitating search functionality.</li>
<li>Exploration of challenges shared by other organisations.</li>
<li>Search and Exploration of challenges shared by other organisations
as well as the directory itself</li>
<li>Administration layer, allowing the EMF team to create new members,
adjust their permissions, tie them to specific organisations and
upload articles and resources to be shared on the platform.</li>
<li>Integrated email functionality for registration and password resets.</li>
<li>Integration with the EMF Asset Management API </li>
<li>Highly modular architecture, ensuring new features could be added
quickly and with minimal risk of impact on existing features.</li>
<li>A rigorous code review process was also put in place.</li>
</ul>
<div class="w-80-ns">
<h3 class="b f5">Technologies</h3>
<img src="../../img/common/technologies/js-logo.png" alt="JavaScript" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/node-logo.png" alt="Node" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/hapi-logo.png" alt="Hapi" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/postgresql-logo.png" alt="PostgreSQL" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/redis-logo.png" alt="Redis" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/aws-logo.png" alt="Amazon Web Services" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/heroku-logo.png" alt="Heroku" class="h3 ph3-ns pv0 pa2">
</div>
<h3 class="b f5">Project Length</h3>
<p class="f6">
20+ Weeks
Sep 2016 - Oct 2016 (Sprint 1 - 2)<br>
Dec 2016 - Jan 2017 (Sprint 3 - 4)*<br>
Feb 2017 - Feb 2017 (Sprint 5)*<br>
May 2017 - May 2017 (Sprint 6)*<br>
Sep 2017 - Dec 2017 (Sprints 7 - 12)*<br/>
<span class="i">* Additional sprints commissioned to build
further functionality based on user feedback</span>
</p>
<h3 class="b f5">Implementation Team</h3>
<p class="f6">
System Architect &amp; QA<br>
2 Developers<br/>
Designer<br/>
Scrum master
</p>
</div>
</article>
</section>

Expand Down
104 changes: 67 additions & 37 deletions case-studies/inclusive-classrooms/skills-wheel.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en-GB">
<head>
<!-- Google Tag Manager -->
Expand Down Expand Up @@ -81,53 +81,55 @@ <h3 class="b mb2 f5 mt3 mt0-ns">Project: <span class="normal">Skills Wheel</span
<img src="./img/common/yellow-gray-heart.png" alt="dwyl heart logo" class="h1">
Live App
</a> -->
<a href="https:/InclusiveClassrooms/skills-wheel" class="dib link mv2 mh1 pa2 dwyl-bg-dark-gray white br2 f6 shadow-4">
<a href="https:/InclusiveClassrooms/skills-wheel" class="dib link mv2 mr1 pa2 dwyl-bg-dark-gray white br2 f6 shadow-4">
<i class="fa fa-github pr2" aria-hidden="true"></i>
Source Code
</a>
</div>
<h3 class="b f5">Problem Overview</h3>
<p class="f6">
Inclusive Classrooms is a small not-for-profit who help teaching
assistants work with and monitor children’s social aptitudes and
progression. Aptitudes are measured using a questionnaire that is
displayed visually as a wheel. Up until this point, Inclusive
Classrooms had manually collected their data and manually transferred
it to a spreadsheet for analysis.
Inclusive Classrooms is a non-profit helping teaching assistants (TAs)
monitor kids’ social aptitudes and progression.
<br>
Before we came in, the teachers filled in 'skills wheels' manually
and data was manually inputted into spreadsheets - so our task was to
make the process digital, with an output that would make life easier
for people analysing the results. (Lightening the load for good causes
is what we live for!)
</p>
<h3 class="b f5">Solution Overview</h3>
<h3 class="b f5">Approach</h3>
<p class="f6">
This was a very short project (1 sprint) enabling digital data
collection in a format that would be most useful to those analysing it.
We had to think hard about designing a system that involved a simple
and friendly questionnaire, super simple data collection & storage,
and easy-to-use analysis tools on a very small budget.
<br>
We problem-solved together to find the simplest possible MVP:
design, a simple data entry form and drawing the ‘skills wheel’,
a visual representation of the data for the TA.
<br>
When a second round of funding came in a year later we sat together
to workshop what the evolution of the application could be, both in
terms of design and features (logging in, historical skills wheels,
admin dashboard) based on a year’s worth of usage by TAs.
</p>
<h3 class="b f5">Project Length</h3>
<p class="f6">
6 Weeks<br>
Feb 2016 - Feb 2016 (Sprint 1)<br>
Mar 2017 - Mar 2017 (Sprint 2 - 3)*<br>
<span class="i">* Additional sprints are commissioned to build
additional functionality based on user feedback</span>
</p>
<h3 class="b f5">Implementation Team</h3>
<h3 class="b f5">Solution</h3>
<p class="f6">
Scrum master<br>
2 Developers<br>
UX/UI Designer
Others can reinvent the wheel, especially with time a factor:
dwyl has a wealth of open source work to draw on, so that’s where
we started.
<br/>
Using a tutorial we’d written previously, we quickly
developed a solution for saving data not just to our database
(for future use) but directly into a Google spreadsheet for access
until there was time and funding for an admin dashboard.
<br>
We used D3.js to create engaging “skills wheels” - visual
representations of the data both current and historical, and
everything else was done with our Elixir stack. We added PDFs for
download and an admin dashboard to allow specific school domains to
be granted access to the application and TAs to manage their students
& groups.
</p>
</div>
<div class="w-80-ns">
<h3 class="b f5">Technologies</h3>
<img src="../../img/common/technologies/js-logo.png" alt="Javascript" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/d3-logo.png" alt="D3" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/node-logo.png" alt="Node" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/elixir-logo.png" alt="Elixir" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/phoenix-logo.png" alt="Phoenix" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/redis-logo.png" alt="Redis" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/postgresql-logo.png" alt="Postgres" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/wkhtmltopdf-logo.png" alt="wkhtmltopdf" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/heroku-logo.png" alt="Heroku" class="h3 ph3-ns pv0 pa2">
</div>
<div>
<h3 class="b f5">Key Functionality</h3>
<ul class="f6">
<li>Data collection through intuitive and beautifully-designed
Expand All @@ -147,6 +149,34 @@ <h3 class="b f5">Key Functionality</h3>
<li>PDF downloads implemented using open source module html-pdf</li>
<li>Deployed to Heroku during development</li>
</ul>
<div class="w-80-ns">
<h3 class="b f5">Technologies</h3>
<img src="../../img/common/technologies/js-logo.png" alt="Javascript" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/d3-logo.png" alt="D3" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/node-logo.png" alt="Node" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/elixir-logo.png" alt="Elixir" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/phoenix-logo.png" alt="Phoenix" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/redis-logo.png" alt="Redis" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/postgresql-logo.png" alt="Postgres" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/wkhtmltopdf-logo.png" alt="wkhtmltopdf" class="h3 ph3-ns pv0 pa2">
<img src="../../img/common/technologies/heroku-logo.png" alt="Heroku" class="h3 ph3-ns pv0 pa2">
</div>
<h3 class="b f5">Project Length</h3>
<p class="f6">
6 Weeks<br>
Feb 2016 - Feb 2016 (Sprint 1)<br>
Mar 2017 - Mar 2017 (Sprint 2 - 3)*<br>
<span class="i">* Additional sprints are commissioned to build
further functionality based on user feedback</span>
</p>
<h3 class="b f5">Implementation Team</h3>
<p class="f6">
QA Code reviewer<br/>
2 Developers<br>
UX/UI Designer<br/>
Scrum master
</p>
</div>
</article>
</section>

Expand Down
Loading