Overview
Background
This project began after co-founding ScholarDev, which was a student development team that was put together in order to continue to work on the transit application that was initially created during a summer school community college project. You can learn more about that project here: Fresno Transit Free
In order to give us a way to report the progress that we were making, we created a temporary website using Google Sites.
The Challenge
Around the time that ScholarDev incorporated and formed a limited liability company, we realized that we needed to develop a professional website for our startup. Peggy was tasked with initially spearheading this endeavor. After having a few discussions on how companies usually design their website and a discussion regarding our website’s color scheme, I proposed a possible direction for our website’s design. In order to clarify my intentions, I volunteered to put a mockup together.
Initial Design
Inspiration
The initial version of the website was inspired by the design of the following two company websites in February of 2013: Phunware and Noodlecake Studios.
For Phunware’s website, I liked the placement of their logo and how they used a carousel to showcase the products that they built.
For Noodlecake Studios’ website, I liked how they introduced each section and how they listed their games. I wanted to do something similar for the apps that ScholarDev would build.
Initial Mockups
Here are the initial mockups that I shared with the rest of ScholarDev:
Note: For reference, the orange rectangle on the first page is a placholder for the carousel. Also, the use of “Same” at the bottom of both pages is a placeholder for ScholarDev LLC’s social media links and the obligatory website copyright stamp.
Getting Feedback
At the following meeting, I gave a tour of my mockups and explained the thought process behind them. Besides making a slight alteration to the position of the logo, everyone generally liked the layout of each page. After this discussion, I sketched the remaining pages and sent them out for approval.
Note: These wireframes are recreations of the sketches that I had put together.
Section Introductions
After getting positive feedback, I started to draft up the snippets that would introduce each major page.
Here are the snippets:
APPS
We strive to develop high quality software solutions for problems that are encountered by the local and global community. We started with a transportation app, but we are open to doing all sorts of apps. If you want us to bring your vision to reality, then please contact us.
SERVICES
We know that everyone has ideas that they want to bring to reality. However, one common problem is having the skills in order to turn that idea into a functional product. That is where we come into the picture.
ABOUT
ScholarDev LLC arose from a class project that challenged us to create a transportation app for Android that would be used by the student population at Fresno City College. After the class ended, a few of us formed a professional team with the aspiration of creating mobile apps that focused on improving the community and the environment.
CONTACT
We would love to work with you and bring your ideas to fruition. Use the information on the left or the form to get in contact with us.
Feature Graphics
Around this time, we had outsourced work to a graphic artist by the name of Samantha Siakovich-inshaw. In order to help us market the app that we were working on, we decided to create a feature graphic. Since we had the graphic artist create three versions of this graphic, we decided that it would be a great idea to add them to the carousel on our website’s front page.
Implementation
Later that year, I would take over efforts related to developing our website. Before this point, the blog had already been created using Wordpress by Peggy. I started to construct the rest of the website.
Here was the website after the foundation was put into place:
Services Page
After researching how other mobile app development companies described their services, I brought up the idea of describing our development process and having the same graphic artist create icons that represented each step. At the time, I suggested the following 6 steps (in order): Requirements, Design, Project Plan, Development, Testing & Q/A, and Release / Support. I would write the copy for each step.
Here are recreations of my notes / sketches for each step in our development process:
When it came to working with the graphic artist to create these icons, I wrote up the design brief, acted as the liaison between ScholarDev LLC and the graphic artist, identified issues, and offered ideas on how artwork by the graphic artist could be corrected. I had the same role when we worked with the graphic artist to create the aforementioned feature graphics.
Here is the updated services page, which includes the outsourced development process icons:
Product Pages
I also brought up the idea of including product pages, which would be used to help market our apps.
We created a bare-bones version of our first app’s product page when we received marketing support from the local transit agency that we were working with. Peggy and Vanida were responsible for creating it.
Here’s an outline of the page in question:
Around this time, Vanida was assigned the task of making the whole website responsive.
Redesign
New Direction
In March of 2015, we decided to rehaul our website and set a meeting where we would determine the design strategy for our website. Before coming to this meeting, I drafted up a document that outlined the most important information that our website should include. During the meeting, I went over my outline and the thought process behind it. Since we lacked content, we decided to create a mostly one page website, which was starting to become more prominent. I volunteered to put a mockup / sketch together.
Wireframes and Mobile-First
Instead of starting with a mockup like I had done previously, I decided that it would make more sense to create wireframes first. Based on what I had been reading at the time, it was apparent that designing a mobile-first website was something that was encouraged.
Here are some pictures of the index page from the mobile wireframe:
At the next meeting, I shared these wireframes and walked everyone through the thought process behind them. After getting positive feedback, I stated that I would start to create graphic mockups after I had completed all of the wireframes that were related to our website.
Completed General Mobile Wireframes
Redesigned Product Page
After creating the general mobile and desktop wireframes, I suggested that we redesign the Fresno Transit Free product page so that it used a theme. I thought it would make the page more visually appealing, which would help to market our app. Even though we had everyone research additional themes, we would eventually scrap this idea as I thought it would be easier to just develop it based on the layout style that we were using for our website’s main page.
Wireframes for Fresno Transit Free Product Page
Graphic Mockup
After drafting up the website’s copy and finding representive icons to use for our website via The Noun Project, I would eventually put the graphic mockup together. Zeplin would later be used to help develop the website, which was done by Vanida.
The Outcome
Final Graphic Mockups
Here are the final graphic mockups that I put together:
Preview Shots:
Live Website
Here’s a link to the live website: