Wednesday, June 1, 2016
Monday, May 30, 2016
DASH - Service Status Mobile App
|Mockups of the Dash App for iPhone 4|
"Dash" was created while working with developers, project managers, and stakeholders in an agile (Scrum) environment using JIRA project management and communication tools.
I prepared the layout and visual design for this internal service status notification app, using Photoshop and Illustrator. I was responsible for designing and optimizing all icons and visual elements.
Additionally, this project required the front-end development and database design for a companion administrator's web portal (tools used: Drupal, Pantheon, MySQL, Acquia Dev Desktop, and GitHub). I prepared a centralized, shareable document repository for development documentation, and authored proposals, project plans, training and marketing plans, etc. and gave presentations to key stakeholders.
The mobile app and companion web app were designed to meet Section 508 requirements for accessibility.
Companion Web Portal - Sketches and Wireframes
We determined that the necessary core experience for the average user was fulfilled by the mobile application, so it was acceptable and even beneficial to add in secondary functionality incrementally for larger devices. Therefore, for the Dash service management tool, the admin console is only available through the desktop web app.
Digital Wireframing in PhotoShop
Mockups of Mobile Layout
User Testing and Review
This project involved regular presentations of design concepts to stakeholders and team members, as well as a thorough review and testing phase, wherein I gathered user feedback via surveys and live user observation. I then came up with design solutions and strategies to address any concerns and suggestions that arose during the review phase.
Saturday, May 28, 2016
User Interface Design Process for Consulting Business Website
|Notebook mockup created by Medialoot.com|
These are some screenshots showing the iterative design process for the User Interface of a website designed for Illada LLC, a Fort Collins consulting group.
Goals and Requirements
Specific client requests included:
- Responsive Design
- Green + Blue Color Scheme
- "Submit Your Resume" function
- Contact Us area
- Ability to post White Papers
- More personalized and relevant photos + graphics
I interviewed the stakeholders and reviewed their existing site and content to establish:
a) What does the company excel at? - Program and Project Management, generally IT related and mostly for government clients, but Program Management really seemed to be the STAR of their service offerings.
b) What makes Illada different? Length of experience/service in their industry; strength of their network and connections and the personalized service they offer; considerable experience and certifications
Content Top Priorities:
- What Illada does + what value they provide
- Socioeconomic statuses and certifications
Based on my research and interviews, I established a few Design Problems that the site redesign needed to address.
- The existing site design was not an accurate reflection of their brand.
- The most important information was buried within the site's information architecture.
- It was initially unclear what services they offered and what industry they served.
- The site did not highlight the considerable qualifications of the business owners.
- There was no clear call to action.
I also realized that the site needed to serve two main groups of users:
a) Potential clients
b) Potential talent/employees
Competitor Review and Analysis
The client highlighted several existing websites that had elements they liked, noting well-organized services list, layouts that were concise and to-the-point, and clean design with lots of white space as especially important considerations.
|User Interface Sketch and Analysis of Example Site 1|
|User Interface Sketch and Analysis of Example Site 2|
|UI Sketch and Analysis of Example Site 3|
Establishing the Information Architecture
Mind-mapping is often the first step of my design process. It helps to take all of the vague notions and ideas surrounding a project and get them down on paper so you can review and evaluate them.
Content Priority ExerciseA simple but very effective exercise using nothing more than post-its cut into strips. I wrote each piece of content that the site needed to provide on a strip of sticky paper, then re-organized those elements until they formed a cascade of prioritized content, from most to least essential. This formed the basis for how I organized the content on the site and was especially useful when deciding how content would display on mobile devices.
Mobile Considerations and Responsive Design
Early Versions of the Home Page Design
Layout Option Mockups for Client Review
Mockups created in PhotoShop.
|Layout Option 1|
|Layout Option 2|
Main Page Slider Options
Final Design for the Main Page User Interface
Friday, May 27, 2016
Contact Finder Mobile AppWireframing and UI Design using Balsamiq. Worked directly with Mobile Developer to manage design implementation and testing. Directed app marketing and communications efforts, including HTML email design for email campaign, articles for internal newsletters, and a QuickTime video tour of the app's interface and functionality.
The mobile app was designed to meet Section 508 requirements for accessibility.