PROJECT BRIEF
XAP Corporation Client: Mississippi Dept. of Education
Site URL: www.MSChoices.com (now defunct)
2015 – Web Development Project (Branding, Logos, Visual Design, Web Design, Wireframes, Mockups)
Site URL: www.MSChoices.com (now defunct)
2015 – Web Development Project (Branding, Logos, Visual Design, Web Design, Wireframes, Mockups)
The client, the Mississippi Dept. of Education, had certain key features and specifications that had to be incorporated into their customization of XAP's Choices® solution for online college prep and exploration. They requested particular colors and asked that the site logo include the shape of the state as it would appear on a map and an image of the state flower, the magnolia.
WIREFRAMES
I started with wireframe designs of the homepage and one of the user-role landing pages which were shared with the client to confirm the basic layout of the site's overall user interface.
Preliminary Homepage Wireframe Design
Preliminary Wireframe for User/Role Landing Page Design
SITE LOGO DESIGN SUB-PROJECT
I had to incorporate XAP’s existing logo for its Choices® portal product in the new site's logo. The overall website’s branding, styles and color schemes were to be derived from the chosen logo design.
The client, the Mississippi Dept. of Education, asked that the site logo use the following:
• the state initials “MS” alongside the Choices® logo
• the colors red and blue
• the shape of their state as it would appear on a map
• and an image of the state flower, the magnolia (the most challenging element)
I researched the particular magnolia flower native to Mississippi and collected specimen photos for reference purposes. Using those photos and some hand-drawn sketches as inspiration, I designed a few different vector art illustrations of magnolia flowers.
I combined those with the other requested elements and came up with a variety of preliminary designs which were presented to the client’s project team.
HOMEPAGE MOCKUP DESIGNS
I then combined their favorite type and design elements into three revised logo options and presented them within website mockups which I was working on concurrently. Photos were not supplied by the client, so I found suitable imagery from a few royalty-free online resources and incorporated them into the mockups.
Final Mockup with selected logo design
FINAL PHASE OF IMPLEMENTATION & WEBSITE DEPLOYMENT
Then on to the final phase of production — the fleshing out the rest of the website’s subpages and tool interfaces, the slicing up graphics, and creating CSS/HTML style guides for the web developers and engineers. And then a final review of site on a test server before it’s turned over for final client review and release to the public.