Web Application Case study

Graphic Color

Consultation

A complimentary consultation is the first step in our web application development approach. Below you'll find the results of our conversation with Graphic Color.

Project On Device(s)
Company Name: Graphic Color
Location: Toronto, Canada
Industry: Stock Photos
Development Type: Web Application
Scope: Design and Development

User Stories

After the consultation we ran a story creation workshop with Graphic Color. Below you'll find the results of the workshop and how the stories were prioritized.

Must Have

Index Card Background
A landing page with a search box and gallery that displays the most popular and recent art.
Index Card Background
Each resource must have a download page that displays the collection and related resources.
Index Card Background
A profile view to see the users bio and art
Index Card Background
A signup page that allows you to sign up with Facebook, Google, or email.
Index Card Background
Every user must have access to an upload page for their designs or artwork.
Index Card Background
Every design should have the option for multi-shots to view it from different angles and zoom.
Index Card Background
Social Media links should be visible on every page.
Index Card Background
Resource search box should be available on every page.
Index Card Background
Resource search box should have a dropdown to search specific categories.
Index Card Background
Color scheme should be neutral blue.
Index Card Background
Every user should have ability to receive tips.
Index Card Background
Every resource should have a comments section to discuss the design.

Nice to Have

Index Card Background
Resources should have tags for easier categorization.
Index Card Background
Each resource should have a likes, favorited and shared counter.
Index Card Background
A user ranking system based on posts, and likes.
Index Card Background
Admin panel to manage users and resources.
Index Card Background
Adult content filter.
Index Card Background
License information available on every page.
Index Card Background
Instagram integration for users to share straight to Instagram.
Index Card Background
Infinite scroll on resources instead of pagination.
Index Card Background
Show online presence with color dot on profile images
Index Card Background
Multiple language support.

Maybe Later

Index Card Background
An API where developers can integrate resources into their projects
Index Card Background
Ability to DM through the user's profile.
Index Card Background
Tag grouping page to show the top tags and content.
Index Card Background
Design and artwork contests so users can win prizes from corporate sponsors.
Index Card Background
Option to upload videos
Index Card Background
Shutterstock ad integration
Index Card Background
Further advertising capabilities
Index Card Background
Infinite scroll on resources instead of pagination.

Wireframes

Graphic Color required both design and development services so our design team created wireframes to show how the user stories will be integrated into the final product.

Iterations

After sizing up the stories for Graphic Color, we grouped them into iterations that can can be developed and tested in a 1-2 week time frame.

Iteration 1

Week 1
  • check
    Design and development environment setup
  • check
    Asset collection and review
  • check
    Wireframe review

Iteration 2

Week 2
  • check
    Landing page design and development
  • check
    Footer design and development
  • check
    Navbar design and development

Iteration 3

Week 3-4
  • check
    Database development for file name, type, and tag
  • check
    Filesystem setup and folder creation
  • check
    Search algorithm development
  • check
    API endpoint development

Iteration 4

Week 4-5
  • check
    Connect the landing page search box to the backend API
  • check
    Connect the landing page image placeholders to the backend API to return either popular or recent
  • check
    Design and develop search results page
  • check
    Design and develop navbar with integrated search box

Iteration 5

Week 6
  • check
    Design and develop resource download page to show collections, related designs, author information, design description and a comments section.

Iteration 6

Week 7-8
  • check
    Backend API development to enable download capabilities for design and collection
  • check
    Database development for commenting system
  • check
    Database development for like, dislike and share

Iteration 7

Week 9-10
  • check
    Design and develop signup page for email, Facebook and Google.
  • check
    Backend API development for authentication system
  • check
    Database development for user accounts

Iteration 8

Week 11-12
  • check
    Design and develop login page
  • check
    Design and develop profile page
  • check
    Database development for additional user data
  • check
    Backend API development to display all user designs and artwork.

Iteration 9

Week 13-14
  • check
    Upload page design and development
  • check
    Backend API creation for uploads
  • check
    Database linkage across multiple collections
  • check
    Testing and safeguards put in place for uploads

Iteration 10

Week 15-16
  • check
    Tag system integration for image categorization
  • check
    Allow users to suggest alternate tags for better search optimization

Iteration 11

Week 17-18
  • check
    Admin area design and development
  • check
    Include options to add and remove users and designs.
  • check
    Include options to adjust tags and categories of designs

Iteration 12

Week 19-20
  • check
    Tip system integration allowing users to tip via Paypal, credit card, and bitcoin.

Iteration 13

Week 21-22
  • check
    Newsletter setup with GetResponse
  • check
    Enable all Social Media links
  • check
    Design and develop all legal pages

Iteration 14

Week 23
  • check
    Release
  • check
    Emergency support standby as website is tested with live traffic

Technologies used

Once we had the iterations laid out, we were able to choose the most fitting technologies to build Graphic Color a modern, secure, and scalable web application. Here is a list of the technologies we used:

Client Side:
html5 HTML5
css3 CSS3
sass Sass
bootstrap Bootstrap
javascript JavaScript
react React
Jest
Server Side:
javascript JavaScript
node-js Node
mongodb MongoDB
Jest
Tools:
git Git
heroku Heroku

Challenges & Wins

As with most projects, Graphic Color had some unique requirements that required creative solutions. Below you'll see how we approached these challenges.

Case study challenges
The Graphic Color Team needed help deciding whether to store their incoming resources in a database or filesystem.
plus

It's common for the Tactic Apps team to help clients make important decisions on backend design. Graphic Color had a particularly important decision to make to support their potentially explosive growth.

Tactic Apps helped weigh the pros and cons for storing resources in a database vs. storing files in the filesystem. This analysis included resource management, performance, and cost at scale.

The Tactic Apps Team concluded that storing files in a properly managed filesystem would provide greater performance and cost significantly less as the Graphic Color resource base grows.

Agile Project Management was challenging since the backend development outweighed the front end.
plus

Tactic Apps has always used Agile Project Management to show our customers results every 1-2 weeks. However, the Graphic Color application was largely a backend application while the frontend consisted of few pages with mostly dynamic content.

We had to move away from end-to-end iterations and break the app into frontend and backend iterations. Since the visual frontend is what most clients are interested in, we could only should the Graphic Color team results every 1-3 weeks. 1 Week for frontend and 2 weeks to build the backend to support the frontend.

The Tactic Apps team covered this modified process in detail with the Graphic Color team before starting the project to set expectations. This allowed the project to run smoothly from the onset.

Graphic Color had 30 development intensive stories without enough time to build them all.
plus

It's common for our clients to have a large list of stories that they'd like implemented for their application's release. While in some cases 30 stories can be completed in a 6 month time frame, Graphic Color's stories were all development intensive.

Using Agile Project Management, Tactic Apps helped the Graphic Color team prioritize their stories and size them up relative to one another. We then broke them up into "Must Haves", "Nice to Haves", and "Maybe Later". This allowed us to scope the project out over the next 6 months to see what could be achieved.

Being on the same page, the Tactic Apps team was able to build a core application to satisfy Graphic Color's targeted user base. Additional features are now slated for the next release.

Midway through the project, the Tactic Apps team realized that Graphic Color needed to tag resources.
plus

Even though resource tagging was in the story list, it wasn't deemed to be a "Must Have" until we started designing the database for the stored resources. Unfortunately, resource tagging was a significant story and Graphic Color had to bend on either scope, timeline or budget.

As in most cases, Tactic Apps recommended to be flexible on scope which meant that a "Must Have" of equal size had to move to the "Nice to Have" list. After some collaboration, we made the story swap so that timeline and budget would not be affected.

Heroku announced that mLab is shutting down its add-on which will essentially kill Graphic Color's database.
plus

MongoDB acquired mLab which cause the mLab team to start migrating their users to MongoDB Atlas. This acquisition also triggered the end of the Heroku add-on which caused a ripple through the development community. Fortunately the Tactic Apps team caught this early.

We were able to follow the migration guide and move Graphic Color's database to the new platform without any noticeable downtime.

Case study challenges

Project Results

With all iterations completed, we produced a web application{" "} that Graphic Color can be proud of. Below you'll see the effort it took and the consequent results.

Team & Effort
users
2
Developers
credit
105
Hourly
calendar
6
Months

Let's build your Web Application Together

Fill in the form below and tell us about your project. Feel free to attach your NDA or any supporting documentation. We’ll get back to you within 24 hours.

phone

+1 346-268-7886

Don't hesitate to contact us.

mail

info@tacticapps.com

Please complete the form or email us directly.

location-pin

Headquarter Location

Houston, TX
77433, USA

Tactic Apps Logo
Tactic Apps

We bring your vision to life by developing modern web and mobile applications focused on the end user experience.

© All rights reserved. 2022 TacticApps.com
Contact Us
phone

+1 346-268-7886

mail
location-pin

Houston, TX
USA

Contact Us
phone

+1 346-268-7886

mail
location-pin

Houston, TX
77433, USA

© All rights reserved. 2022 TacticApps.com