Project
UI Design & Branding/Web App
Problem
LEAF (Leidos Enterprise Application Framework) is a set of reusable software components that allow teams to rapidly build and modernize solutions at prices comparable to those of generic, commercial-off-the-shelf products.* LEAF provides customers with an agile and customized solution at a fraction of the price of bespoke software.
LEAF needed a branded identity and UI direction in the form of a style guide, mockups, and interactive prototypes to inform a sales demo.
Process
Working directly with the in-house team of developers, I gained an understanding of both the product’s capabilities and it’s selling points. This allowed me to create a simple, versatile logo and an interactive prototype that would highlight the key features for the pitch team.
Solution
I’ve included a few excerpts from the style guide here, along with an example of one of the mockups that went into the final interactive prototype. The full style guide and interactive UI prototype go into more detail on how each element and component of LEAF is to be used but due to their proprietary nature, I cannot share them on this platform. If you would like more details, please feel free to reach out to me at samantha.mix.design@gmail.com.
*https://insights.leidos.com/competencies/advanced-field-artillery-tactical-data-system-contract
I wanted the logo to be relevant and recognizable so for the final design, I designed a leaf symbol with stylized veins to represent a circuit board or framework and paired it with the acronym in Work Sans. Once I settled on the design, I created multiple versions of the logo so it could be used in a variety of formats.
I did many thumbnail sketches before developing the final design. I explored multiple possible directions, some using just a mark, some combining the acronym and mark, and some using just the acronym with stylized letterforms. I drew inspiration from the acronym and designed logo variations off of the image of a leaf. I worked with the concept of a framework, building blocks, connections, and growth.
The color palette consists of a primary palette with 4 colors, and a secondary palette with variations on each of these primary colors. I kept the primary color palette limited so the UI would not become too busy.
I chose Work Sans as the typeface for the LEAF demo for it’s legibility, simplicity, variety of weights, and accessibility as a google webfont, making it viewable on any computer as long as the link is embedded within the CSS code.
Some elements that went into the LEAF style guide are button styles, icon use, form fields, and error messages. I relied heavily on research into google material design to inform my design decisions for these pieces. I also added borders around form fields and used a static placement of field labels and assisting text to ensure an intuitive user experience.
I’ve shown examples of widget, drawer, and modal components that LEAF utilizes. These too are heavily influenced by google material design and I kept the styling as clean and legible as possible.
This is an example of one screen mockup that went into building the interactive prototype. This mockup shows the UI of a dashboard page with multiple analytic widgets that can be added or removed and access to more key features in the primary and secondary navigation bars.
Project
UI Design & Branding/Mobile App
Problem
The Kent State University Department of Lifespan Development and Educational Sciences needed a mobile application that would be a real-time tool for teachers and instructors in Professional Development programs. The app would help teachers apply the lessons in their classes and receive feedback from instructors as they moved through the training. They also needed a website for instructors to manage students and create or upload content.
Process
I worked with a small team of developers, researchers, and subject matter experts to identify the needs of both user types and determine how to visualize a solution for those needs. After a few informational sessions, we outlined a few key features for the teacher user’s mobile application (a messaging component, news feed, and lesson content) and I went to work on designing a layout.
I started with sketched wireframes and presented them to the entire group for feedback. After a few revisions, we decided on a design that used the wall as a landing screen, a tiered lesson format with a folder structure to access each tier, a messaging format, and a library that works similarly to the lesson content section.
Once the wireframes were approved, I created a few versions of stylized mockups with periodic feedback and revisions. I followed this same process with the website for the instructor users. I also designed a logo and icon set for the mobile home screen. I put together style tiles for the developers dictating typography styles, color palette, icon styles, button styles, and how to organize components like headers and navigation bars.
Solution
The iPD mobile application and website allow teachers in Professional Development programs to interact with lessons and instructors in real-time, directly from their phones. The app has four main components: a news feed, content pages, a messaging component, and a resource library.
The news feed, or Wall, acts as the home page and keeps the user updated on recent activity, as well as approaching deadlines.
The Content pages contain lessons for the teachers to use in their classrooms, broken out into easily digestible steps and includes an assignment template, or Try It Out section, where the teacher can attach any materials needed to complete the lesson and leave feedback for their instructor.
The Messaging section allows users to interact with instructors by accessing their current chats and contacts. Unread messages will feature a blue time indicator and the number of new messages will be highlighted in a blue circle.
The final piece is the Library section, where a user can access past assigned content materials, suggested playlists for instructional video content, and an index search feature.
The website provides instructors with a simple and intuitive format for content creation and management, as well as a messaging component that allows them to provide immediate feedback to student users.
The final style tile features a color palette, logo options, paragraph styles, navigation styles, button styles, and icon styles.
These screens are the user's first interaction with the mobile application. The Landing screen on the left gives a brief overview of the app then directs you to the Login screen. Once logged in, the user lands on the Wall screen where they can see news and updates. They can access other sections of the app through the primary navigation system along the bottom.
These screens are selected examples from the Content section of the app. The Prewriting subsection screen will gray out the content that has already been viewed or completed. The Prewriting in Action screen is an example of a content template for a video lesson, and the Try It Out screen is an example of an assignment template. This template allows users to upload or type a response. In the content section, the primary bottom navigation is simplified to a hamburger nav icon in the top right corner to save space.
These screens are selected examples from the Message Center section of the app. Users can interact with instructors by accessing their current chats and contacts. Unread messages will feature a blue time indicator and the number of new messages will be highlighted in a blue circle.
These screens are selected examples from the Library section of the app. The first screen is an overview of the user's library items, including assigned content materials, suggested playlists, and an index search feature. The Search Index and Suggested Playlists screens are also shown.
For instructor use, I developed a backend web design for uploading content and managing student users. This includes a direct messaging system that allows instructors to answer questions and give immediate feedback.
The home screen directs users to the three main content areas within the Manage Students section and includes a primary navigation system in the header.
This section allows instructors to assign content by section, subsection, or playlist to individual students or an entire class.
The Message Center screen includes a secondary navigation system that highlights features within the direct messaging system. The list of current chats is featured on the left and when a chat is selected, a direct message window appears on the right. Unread messages are highlighted with a blue time and number of new messages sent in that chat.
This screen allows instructors to create and upload content to the mobile application. The drop down menus include the option to create a new section or subsection. A tag system allows the content to be searched independent of its section or subsection for use in playlists or in the search index feature of the library.
Collaborate with a group to design an app that offers a better comic reading experience on mobile devices and connects users through an inclusive online community. To see an animated demo of the app, copy and paste this link into your browser https://vimeo.com/148841302.
