Additionally, design, build, and host a WordPress based website where customers can buy and download the app.


To begin this project I first tried to gauge the scope by mapping out and breaking down all the different elements. I made a list of the different parts of the project, together with a rough time estimate for each deliverable.

1) Research (10-14 hours)
2) Writing content  (80-100 pages (Word) - 60 hours)
3) Coding (100 hours)
4) Design - Logo, icons, splash screen, layout/color scheme (6 hours)
5) Build/Compile - creating the customer-ready dmg file (2 hours)
6) Testing (4 hours)
7) Website/hosting/payment processing/download file (6 hours)

Designing the UI

For the app UI, I had to decide on a basic structure, which consisted of a splash page modal - the opening screen a user would see first upon launching the app.

The splash screen would have some introductory text and a button which, when pressed, switched to the main app screen.

For the main screen, I decided on a simple 2-panel layout. A menu on the left side and the main content area on the right. The menu would be further broken down into 3 sections:

1) Top - app name and logo area.
2) Middle - main menu area with clickable section listings.
3) Bottom - internal link that returns the user to the splash screen.

Each section has a relevant icon, chosen and licensed from The Noun Project library of icons.

I made the app size slightly adjustable so that users with different screen sizes could change the height and/or width to a more convenient size if needed.

Scribe Mage UI

Color Scheme

The color scheme would consist of a unique color for each section, and matching or similar colors for each section's headings and info box.

For the app logo, I used a pink/red color from one of the sections to fit the target user of the app. The logo was edited in Photoshop and then I used a program called iConvert Icons to create all the different sized app icons.

Creating Content

Next to coding, researching and writing the content was the most time-consuming part of creating the app. Some of the content was written in Word, and most was then transferred to Dreamweaver to properly format the content, add tables, etc.

From there, the HTML files were imported into the app project folder in Visual Studio Code.

Build, Compile, Test

The building, compiling, and testing of the app was carried out in Visual Studio Code. This is the stage when the content went through a final round of proofreading and debugging.

Then I tested the functionality to make sure the menu items opened the right sections, test the buttons, and the opening and closing of individual pages.

Website, Payments, Delivery

The website was pretty easy to create since I decided to use Gumroad for payment processing and delivery of the app. Gumroad has an embed feature where you can create a nicely formatted sales page for your product and then embed the whole page on your site with a small snippet of code.

I chose WordPress and a fast theme for the basic website CMS, then added the embed code from Gumroad. The app is pretty self-explanatory, so I decided to create a short video trailer to showcase the finished app and added a text description below listing all the features and benefits.

I uploaded the finished and zipped app to Gumroad for them to handle delivery when a new customer makes a purchase. Gumroad handles payment processing, receipts, and downloads.

The video trailer was also uploaded onto a Youtube channel to generate some traffic to the app website.

Shipped

The project took about 6 weeks from writing the first line of code to setting the product live on Gumroad and the app website. It involved many interesting challenges and I learned a ton of new things to add to my skills toolbox.

As you've seen above, working on a project like this involves the use of all sorts of tools and software. It's really helpful as a creative to keep refreshing and developing skills in using each one.

It also creates the opportunity to optimize my workflow and improve my productivity which benefits both myself and clients in future projects.