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.
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
Nice to Have
Maybe Later
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
- Design and development environment setup
- Asset collection and review
- Wireframe review
Iteration 2
Week 2
- Landing page design and development
- Footer design and development
- Navbar design and development
Iteration 3
Week 3-4
- Database development for file name, type, and tag
- Filesystem setup and folder creation
- Search algorithm development
- API endpoint development
Iteration 4
Week 4-5
- Connect the landing page search box to the backend API
- Connect the landing page image placeholders to the backend API to return either popular or recent
- Design and develop search results page
- Design and develop navbar with integrated search box
Iteration 5
Week 6
- Design and develop resource download page to show collections, related designs, author information, design description and a comments section.
Iteration 6
Week 7-8
- Backend API development to enable download capabilities for design and collection
- Database development for commenting system
- Database development for like, dislike and share
Iteration 7
Week 9-10
- Design and develop signup page for email, Facebook and Google.
- Backend API development for authentication system
- Database development for user accounts
Iteration 8
Week 11-12
- Design and develop login page
- Design and develop profile page
- Database development for additional user data
- Backend API development to display all user designs and artwork.
Iteration 9
Week 13-14
- Upload page design and development
- Backend API creation for uploads
- Database linkage across multiple collections
- Testing and safeguards put in place for uploads
Iteration 10
Week 15-16
- Tag system integration for image categorization
- Allow users to suggest alternate tags for better search optimization
Iteration 11
Week 17-18
- Admin area design and development
- Include options to add and remove users and designs.
- Include options to adjust tags and categories of designs
Iteration 12
Week 19-20
- Tip system integration allowing users to tip via Paypal, credit card, and bitcoin.
Iteration 13
Week 21-22
- Newsletter setup with GetResponse
- Enable all Social Media links
- Design and develop all legal pages
Iteration 14
Week 23
- Release
- 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:
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.
The Graphic Color Team needed help deciding whether to store their incoming resources in a database or filesystem.
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.
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.
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.
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.
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.
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
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.
+1 346-268-7886
Don't hesitate to contact us.
info@tacticapps.com
Please complete the form or email us directly.
Headquarter Location
Houston, TX
77433, USA