p o r t f o l i o
The OK Collective A photo book consisting of portraits and interviews with young people suffering from anxiety and/or depression.
The Problem According to the Anxiety and Depression Association of America, 18% of the American population suffer from anxiety disorders. Nearly one-half of those diagnosed with depression are also diagnosed with an anxiety disorder. Even though everyone knows at least one person with a mental illness (whether they’re open about it or not) there’s still a huge stigma about mental illness. An article by Psychology Today states that in 1999 the U.S. Surgeon General labeled stigma as perhaps the biggest barrier to mental health care; this stigma manifests particularly in a phenomenon known as “social distancing”, whereby people with mental issues are more isolated from others.
The Solution Create a photo book with an accompanying tour to tell the stories of people suffering from anxiety disorders in order to put a face on mental illness and relieve the stigma surrounding it.
the ok collective | ux design
Touchpoints: Photo Book, Website, Poster, and Book Tour
User Archetypes
Young Person With Mental Illness primary user
• • •
Struggles with anxiety and depression Doesn’t have a lot of friends to relate to Looking for a supportive community
Concerned Parent secondary user
Socially Aware Educator secondary user
Wants to understand her child with mental illness/parents in the same situation.
Wants to humanize the topic of mental illness at the university she teaches at.
Knowledgeable Psychiatrist secondary user Wants to connect more young people on the topic of mental illness.
The Branding Process First, a word list was used to create the name of the brand. The idea behind it was to make something that sounded friendly and supportive. The OK Collective was then decided upon.
the identitY
The logo features a hand doing the “OK” gesture in order to give the otherwise minimal logo a humanistic tone.
Next, quick sketches were created. The best ones were narrowed down, and then iterated digitally.
tYPefaces
Azo sans and Hanken were used for the logo, as the bold type is complimented by the thin sans-serif type. Proxima Nova was chosen as the main typeface for the book and website as it is clean and easily legible. Bauer Bodoni added a sense of seriousness to the book.
logotYPe azo sans Hanken
The final design was chosen for its humanistic qualities. The OK gesture in the counter of the O is the American sign for being “alright.” The typefaces were chosen for contrast.
color Palette
Shades of teal were chosen as the main color palette because of its mix of green and blue: blue for calmness and serenity, green for nature.
Web tYPe Proxima Nova Black Proxima Nova Medium Bauer Bodoni book tYPe Proxima Nova Condensed Medium Bauer Bodoni
TOUR SUPPORT SHIRT
poster
the ok collective | ux design
Brand Awareness Posters and handouts were created to inform people about the OK Collective book tour. The posters/handouts would be utilized in places like universities, counseling centers, and libraries.
Social Media Website
Home The website accommodates each user archetype. For the people just learning about mental illness, they can go to the “about” page to learn about The OK Collective, the “resources” page if they’re looking to learn more about mental illness or want to help a friend, and the homepage features tour date information. For those that want to join the community, like someone with a mental illness that wants to help others, creating an account and being able to read others’ stories/share their own would be crucial.
About
Resources
Our Stories
Account
Community Stories
Create
Login/Logout
Tell Your Story
Lindsay suffers from anxiety and wants to join OK Collective’s online community. She would use every page on the website, as her needs would be to learn about the site, seek help about her mental illness, and join the community of people in similar situations.
the ok collective | ux design
A Responsive Experience The website was coded so that no matter what the user was using, they could always use okcollective.org as a resource (mobile, desktop, tablet, etc.) Pages include a homepage, “about” page for new users, “create new account”, and a “stories” section to both share and browse user stories.
the ok collective | ux design
Mobile Friendly The website can also be accessed through mobile devices so that users can connect with the community no matter where they are.
the ok collective | ux design
Social Media Social media is utilized to create brand awareness and inform the users of the tour. It also gives the users a chance to “meet� those featured in the book, as the people in the portraits will also be on the tour.
Film Festival A system of both web and printed touchpoints for a local film festival.
The Problem A group of women in Grand Rapids want to show their city diverse films that tell the stories of or are directed by women. They need a theme that will both attract those familiar with feminism/empowering women and also strike a chord with curious newcomers.
The Solution Design touchpoints that will both educate and attract potential attendees of the film festival.
filM festival | ux design
User Archetypes
touchPoints: Poster, Tickets, Website, Lanyard, and T-Shirt
untraditional freshMan college student PriMarY user
• •
Wants to see films that represent her bisexual/black identity Looking for something to get involved with outside of school
filM junkie secondarY user
cool grandMother secondarY user
Looking for more inclusive films to broaden his horizons
• •
Searching for movies made by women Wants to go to something interesting with her family from out of town
the identity
Branding
The logo is written in pink lipstick in order to be messy with a touch of femininity.
“Not Your Average Girl” was chosen to say “this isn’t your average film festival, nor do these movies have your average female characters.”
typefaces
Gotham and Karma Bold were chosen to compliment each other (one sans-serif and one serif typeface), and because they were both designed or co-designed by women. Montserrat was used as Gotham’s web alternative, and was also designed by a woman. Gotham Montserrat Karma Bold
color palette
The color palette was chosen to contrast the grungy look of the logo with feminine colors.
pattern
Dark tones and pink rectangles were used to relate to a film screen.
Website The website contains information for everyone.
social media
home
There’s an “about” page to learn more about the purpose of the film fest, a “watch” section to learn more about the movies, directors, and times, and a “buy” section to buy tickets ahead of time. Users can also contact the film fest if they have questions. Links to social media are also on the page so that users can see photos from the festival.
learn
watch
buy
films
tickets
directors
times
Erin wants to learn more about the film festival. Her first priority is finding movies she identifies with. Her second priority is learning how to get involved.
contact
Website The website features basic pages like the films/directors featured in the festival, an “about� page for those who aren’t familiar with the festival, and a page to reserve tickets.
filM festival | ux design
filM festival | ux design
Social Media Social media is used for festival announcements, director information, and event photos. Users can also use it to interact with others that are interested in the film festival.
Journal of Critical Incidents A functional website that allows users to both browse and upload case incidents.
The Problem The current Journal of Case Incidents website has a single page. There is nowhere to upload case incidents, review journals, or easily browse past case incidents.
The Solution Design and develop an attractive, functional website for the online community involved in case incidents.
journal of case incidents | ux design
User Archetypes
Touchpoints: Responsive Website
reviewer/author primary user
• •
Wants a website where she can submit her case incidents and keep track of where it’s at in the review process. Needs a way to be reminded of the papers she’s reviewing
the editor secondary user
guest user secondary user
Needs to review incidents that have already been submitted or published.
Looking for a place to search for articles and case incidents easily and efficiently.
Branding The JCI website needed a makeover. A vibrant palette was chosen to engage the user, and a web-safe sans-serif typeface was used to give the website a modern, yet not too trendy, feel.
the identity
The society for case research logo was cleaned up slightly but maintained the original branding.
typefaces
Titillium Web was used for a clean, web-safe typeface. It is easily legible and can be used alongside JCI's serif logo typeface.
Titillium Web Titillium Web Bold
color palette
The color palette is bright and friendly in order to brighten up an otherwise academic website.
icons
journal of case incidents | ux design
Pattern Library Using Atomic Design, the website’s style/components were broken down into 3 parts: The atom, which is the most basic component, the molecules, formed when two or more atoms join together to create something slightly larger like a button, and organisms, when multiple molecules join together to form things like footers and headers.
atoms Basic standards were created for things like colors, text, and content frames.
molecules
organisms
Atoms like color and content frames were combined to show the standard for content boxes.
Molecules were then combined to show the standard for the use of multiple content boxes on a page combined with tabs.
Author
create account
home
search
Website
Guest
The site is used by people that need to complete certain tasks: reading case incidents , editing, reviewing, and writing. These tasks, besides guest users reading case incidents, can be performed once the user logs in.
Editor archives
how to
about
full pdf
submit
rules
view online archives archives
review
conference
times
contact
archives archives archives
settings
announcements archives archives
Lisa writes case incidents and wants to submit them online for peer review. Being a writer, she can also review case incidents written by other scholars.
logout
login
dashboard
editor
author
reviewer
manage users
submit
assigned papers
assign reviewers
submission status/revisions
ready for proofing
manage announcements
publish
Reviewer (also author)
notifications archives archives
journal of case incidents | ux design
login
After pressing the “login� button, a prompt drops down asking users if they already have an account or if they want to create one.
dashboard
hoMe
notifications
Icons show notifications based on what jobs the user is assigned.
author Page
Lisa can use the author page to upload a pdf of her case incident. After submitting, the “past submissions” box lets her see what she has submitted in the past and what the progress is in regards to her current submissions.
revieW Page
As a reviewer, Lisa can also see what case incidents she’s been assigned to review, as well as seeing what reviews she needs to complete.
Meijer Rebrand A consistent branding system for Meijer’s generic product line.
The Problem Meijer has a great line of generic products in its store. However, when comparing one type of food product to another, it was found that the branding was inconsistent. Colors varied, graphic elements changed, and even the font combinations were different from each other.
The Solution A branding system that is functional across all product types, including food packaging and price tags.
meijer rebrand | branding
Brand Audit
Touchpoints: Food packaging, clothing tags, stationery, and website.
Meijer’s brand inconsistencies were examined. This is what was found:
basic meijer brand
This label, a simple white label featuring the Meijer logo accompanied by the color Meijer blue, can be found on their frozen goods, as well as some dry food packaging.
badge design
The badge/banner design can be found on things like bread and soda. The colors on this design varied based on what product the packaging was for.
dots design
This was one of the newer designs Meijer put on the shelf. The color range varied, but the focal point was the same: the Meijer logo accompanied by a design with dots.
Process
logo concepts
Different versions of three concepts were brainstormed and drawn out.
m
meijer rebrand | branding
Concepts
light concept
A light, airy, concept focusing on a small picture of the food as well as large, bold typography. This would improve shelf presence as very few packages are white with a lot of contrast.
splatter concept
A bright, interesting concept using textures for the background image and a bright color splatter as a call to attention. This concept would improve shelf presence as black and white photography and food is rarely combined.
dark concept (strongest concept)
This concept was chosen because of how attention-grabbing it is. The background images pop, while the black label sets it apart from other brands on the shelf. The nutrition facts printed on the front are another feature to inform the audience at first glance.
meijer rebrand | branding
Branding The Meijer generic brand needed to be consistent, but not entirely redone. Elements of the original Meijer brand (the typeface, the red) were kept, while a few things were added to make the brand stand out.
the identity
A rounded corner was used in order to make the brand look more like a label.
m color palette
The color palette uses a brighter red than the original Meijer logo, and is contrasted with the black.
typefaces
Aku and Kamu was used for a bold, modern typeface, while ITC Franklin Gothic was used to retain some of Meijer’s original branding.
aku and kamu ITC Franklin Gothic Demi
Label
stationerY
Stationery for employees would also be updated with the dark, contrasted branding.
clothing tags The brand can also be used on clothing tags. In this instance, the branding would change slightly, as white tags are more common than black tags, as well as easier to print on.
Ferris DSGN Events A branding system/user experience for the Ferris State Graphic Design Program 2017 Portfolio Review Event and Critique.
The Problem For years, Ferris’ graphic design program has held a portfolio event. What was originally meant to be a professional critique of student work to prepare them for the industry quickly became a competitive job fair.
The Solution Create two different events: one for professional critique, the other a more casual job fair and event that prospective students, family, and alumni can attend. Differentiate the events from each other, but unite them with a branding system to reflect the values of the Ferris State University design program.
ferris dsgn events | branding/ux design
User Archetypes
Touchpoints: Signage, drink tickets, web touchpoints, name badges, invites, and t-shirts
industry professional primary user
• • •
Influential in the design industry Looking for fresh talent to hire Attendee of the last few portfolio reviews
program instructor secondary user
senior design student secondary user
prospective student secondary user
•
• • •
• •
Seeking critique to refine their curriculum in order to meet
•
industry standards Wants to prepare their students for the graphic design industry
In their last year of school Looking for critique of their work Wants to get a job upon graduating
Indecisive high school senior Wants to learn more about colleges/ majors so they can decide where they want to go/what they will study
Concepts Concepts were brainstormed for the events. They had to work with each other to be cohesive, be able to differentiate between the two events, and overall show what makes Ferris a unique graphic design program.
mind for design
A focus on process. Ferris emphasizes the path to the final product, separating it from other design programs in the country.
where are we headed?
Are we ready for the design industry? A concept playing off the fact that the portfolio review has moved “up north.” It asks industry professionals, “has Ferris done a good job preparing its students for the real world?”
ferris dsgn events | branding/ux design
Branding: Final Concept The “Where Are We Headed?” concept was chosen as it was the most flexible and cohesive concept of the two. The outdoor theme tied in with “moving up north”, and the “packing” of tangible and intangible design items related to the graphic design program.
Portfolio revieW
the critique
tYPefaces
A legible sans serif typeface, Univers, was paired with a rugged, bold typeface called Bushcraft.
Univers Roman
bushcraft
color Palette
Saturated earthy tones were used to evoke an “outdoor” feeling.
portfolio review
the critique
Save The Date/Invite/Reminder For the portfolio review, a save-the-date email, invitation, and reminder were sent out. For the critique, as it’s more personal, a physical mail invitation in the form of a map was sent out, along with an email reminder.
ferris dsgn events | branding/ux design
physical invite
Websites The critique site is a scrolling one-page website that has basic event information, social media links, and a link to RSVP to the exclusive event.
social media
home
rsvp
James has been invited to both events. He wants to see where and when the critique is going to happen, as well as scope out student portfolios and the design program itself.
ferris links
ferris dsgn events | branding/ux design
The portfolio site features event information, links to student portfolios, directions on how to get to the event, a link for feedback, and social media links. The social media includes Facebook, Instagram, and Twitter. Guests can learn more about the program and “meet� the students involved. social media
ferris links
home
location
feedback
submit
portfolios portfolios portfolios
The Critique The critique is a professional event for industry leaders to critique Ferris design seniors’ work. The event was held this year at Gallery Divani in downtown Grand Rapids for a more classy, personal feeling. At this event, the graphic design program can receive feedback to better prepare its students for the real world, and students get advice to improve their portfolios for interviews.
Critique Touchpoints Each guest receives a drink ticket, twig pencil, name badge, schedule, critique notebook, and takeaway notebook.
Portfolio Review The review is the same event it has always been, but in a different place. This time, the event is held at the University Center in Big Rapids. Here, professionals can take the time to review student portfolios and search for new talent. Later in the evening, prospective students are welcome to look at portfolios, friends and family can congratulate their loved ones in the program, and alumni can catch up. There is also a tour so that prospective students can see what it’s like to take graphic design at Ferris State.
ferris dsgn events | branding/ux design
Portfolio Review Touchpoints The review features multiple touchpoints. Each junior assisting with the even has their own graphic tee designated for whatever job they have. There is also a tee featuring the event’s branding for prospective students so that they can leave with an extension of the experience. For environmental graphics, window clings and signage were designed in order to further extend the brand.
PARKING
restrooms
West Michigan Graphic Design Archives An update of the West Michigan Graphic Design Archives website that was designed by Ferris seniors in 2013.
The Problem A few years ago, the West Michigan Design Archives website was built. Until now, there wasn’t enough archival work to make the website live. Things have changed over the years, so the website must be revisited.
The Solution Edit the existing website and accommodate it for the work that was collected, make it intuitive and easy for archive volunteers to input data, and create a search engine that can be used for a diverse set of needs.
west michigan design archives | ux design
Client
Touchpoints: Desktop and mobile version of site
site administrator project client Wants an easy way to navigate/work with the now-live design archives website
UPDATE INFORMATION ARCHITECTURE
update search bar
General updates
Create a system in which the projects are
Create a tool that can accommodate every
It’s been three years since the site has
separated by hierarchy.
user’s needs.
been worked on. Update Wordpress and everything else that has changed.
Process After the original site was examined, new wireframes and prototypes were created in order to get to the final, updated design.
West Michigan design archives | ux design
Screens
Top search bar allows the search to be expanded.
series Parent
child in series (Project)
Project assets
Sidebar filter allows the search to be narrowed down after initial search is applied.
ASAP Grocery App A grocery delivery app that partners a large grocery store chain with a rideshare company like Uber.
The Problem A grocery store chain needs to compete with the influx of online shopping apps/delivery services. The service needs an app that can not only work as a personal shopping list for one user, but a delivery service for another.
The Solution Create an app that has a variety of functions including: messaging, rating, personal shopping lists, shopping for other people, a potential to earn rewards, and a way to deliver groceries.
ASAP Grocery app | ux design
User Archetypes
Touchpoints: Mobile app, reusable shopping bags, and signage
young adult primary user
• •
Looking to make some extra money on the side Also wants a quicker, easier way to shop
homebound customer secondary user
busy parent secondary user
traveler secondary user
Needs a grocery service to deliver
Always running around with the kids,
Looking for a way to grocery shop
to him because he’s disabled
so he’s looking for something to save time and money
without having to travel more like she does for her job
Research/Journey Map/Storyboarding Before any planning was started, the users of this app were researched and interviewed. The answers gave insight into what sort of direction to take, like whether or not shoppers want to be rewarded for shopping for someone else, what they like and don’t like about shopping, etc. A journey map of a shopping experience was created in order to discover what the main “anxiety points” were. From there, we brainstormed how we could make these points more positive and integrated them into the app.
“I have never used [online grocery delivery] but I would if they were offered in my area and the costs weren’t too high. I would shop for someone else if the pay was good enough.” -Harold, College Student, Michigan
“I only shop about twice a month, but I usually end up needing something small, leading to small annoying trips.” -Haley, Young Mother, Michigan
asap grocery app | branding/ux design
use flow
app model
Before the design of the app could begin, a use flow was created in order to discover what actions/goals the app would have to accomplish, which would then help determine how many screens and what screen types would be needed.
Once the use flow was completed, an app model was created to see the flow of the screens, as well as what screen types the app would need.
Screens Screens were then prototyped using Sketch, enhanced with Principle, and demonstrated using InVision. To the right is a sample of the many screens that were prototyped.
asap grocery app | branding/ux design
Touchpoints Reusable bags are given to the shoppers in order to differentiate themselves from the other shoppers. The Uber drivers are given a sticker so that the store workers know which Uber car they’re delivering to.