Feet First
Class Project
Task
Redesign the visual system and mobile task flow for the local Seattle organization “Feet First”
Time frame
5 weeks
Skills
Visual Design | UX/UI Design
About the organization
What are they trying to convey to their audience? Whats their mission?
Feet First is an organization that strives to make walking around the city safe, accessible, and enjoyable. Feet First focuses on practicality, health, and community.
The primary audience consists of Seattle-area residents interested in walking, finding community, and accessible routes, as well as policy makers, advocates, and politicians. Additionally, many leaders in Feed First have a background in transportation management, public policy, and urban planning.
Keywords that describe the brand:
Friendly ~ inclusive ~ community ~ advocates
Logo Redesign
How can we make the logo more representative of the company mission?
Design Goals:
Focus on organization-related imagery, such as nature, walking, city life, and city streets.
Create a logo that is versatile, and can be expanded, shrunken, and altered for many use cases.
Communicate the company mission visually
Original logo:
The first iteration + critique
Critique Takeaways:
After discussion, I realized my perception of the organization was a bit off course.
I approached the logo with focus on nature and athleticism. While both are important to the organization - it is a not the main focus.
The main focus is advocacy for safe transportation in the city, and my logo should focus more on the true mission of Feet First.
Improved logo based on critique
Reflection
Overall, I think the design communicates the mission of promoting walkable and accessible cities through its emphasis on walk signs. Additionally, it is simple and easily recognizable, versatile in size, and has varying levels of complexity. If I had more time to complete the project, I would have put more focus on craftsmanship in terms of spacing. For example, I would increase the space between the walking man and the typography to help it feel less cramped, and expand the spacing between letters in the word "feet” so that it aligns with the T in “first”.
Example of possible improved logo
Understanding our audience
What kind of materials can we create to better understand our audience?
In order to make the best decisions in the process of improving the user interface, user experience, and visual language, I created user personas to help define the primary and secondary audiences of the client.
Note: While this was an individual project, other students worked on the same organization and therefore helped critique materials. The creation of the following personas were completed as a group of 4.
Mimic the city street signs with greens, and mimic the city street concrete with grays. As a plus, green also emphasizes the focus on the outdoors.
Choose one primary color that is brighter and encourages a “call to action.”
Goals for the redesign:
How can the color palette be improved to promote usability and interface design?
Original color palette:
Defining Visual Elements
Color Palette ~ Typography ~ Imagery ~ Graphic Elements
Redesigned interface color palette:
#21A980
Inspiration
#4C7069
#FFFFFF
#E0DDDD
Keep the color palette simple, with a focus on cool colors to communicate how the organization is friendly and approachable.
Redesigned interface typography:
Reflection:
The chosen typography functions well by maintaining usability and accessibility. While I am happy with the choice to use rounded, sans serif fonts to communicate friendliness, in the future I want to branch out from Roboto and maybe use a typeface that isn’t so widely used. While Roboto is popular for a reason, I think branching out from it will provide a touch of uniqueness to the interface.
Mood board
Rounded, sans serif fonts are used to communicate to the public that Feet First is a friendly and welcoming organization
Make the typography relatively simple to maintain the usability and accessibility of the interface.
Goals for the redesign:
Reflection:
I love how the color palette reflects the mission in its abstract nods to city environments, however in the future I would choose to use whites and blacks that aren’t PURE white and black. I would do this because choosing off-white or dark gray instead helps reduce eye strain for the user.
Popular typefaces will be used in order to maintain a clean, familiar look. communicate how the organization is friendly and approachable.
Maintain some aspects of the original color palette, but make adjustments to improve usability and visual sleekness.
#F5F5F5
Maintain some aspects of the original typography, but make adjustments to improve usability and visual sleekness.
What changes to typography could be made to improve the user interface?
Original typography:
#202020
Potential alternative fonts to “Roboto”:
How can I use imagery to inform design decisions?
By creating a mood board that depicts important aspects of the organization such as walkability, accessibility, nature, community, advocacy, sustainability, and urban life I was able to grasp the bigger picture of the organization and use that build an interface that represents “Feet First” as a whole.
Pictures were gathered from Google, Pinterest, Local blogs, and the “Feet First” website.
Graphic Elements
The goal of the graphic elements are to communicate friendliness, and make the interface accessible and easy to use.
Main features: Main action buttons are large and flashy, icons like the hamburger button and search button are simple and take-up less unneeded space, and elements have a rounded shape.
#626262
#000000
Example of improved white and black color palette:
#30417C
#4B7068
#DBDFEA
#F5F5F5
#3B3E46
At its current state, the color palette lacks a brighter primary color, simplicity, and clear inspiration from its mission.
#000000
Redesigning the mobile flow + user interface
After examining the website, I decided to focus on the task of donating to the organization.
I chose this flow because donation is very important to the success of the organization, and I noticed that it takes too many steps to complete.
Example wireframe of the ORIGINAL flow from start to finish:
How might I improve this user flow?
After examining the original user flow, I identified 3 key pain points:
Pain Point #1:
The user has to click through 10 steps in order to complete a donation. Less steps would improve ease of use.
Improved User Flow
Pain Point #2:
The website is too dense with information. Lots of information is repeated, and pages are redundant.
Main goal: Reduce the number of steps in the process of donation, and increase visual appeal.
Change #1:
Reduced redundant information regarding donation to one single page.
Change #2:
Reduced the amount of pop-ups and page re-directions.
How can the new visual elements and user flow inform the design of a high-fidelity prototype?
Using the re-designed logo, color palette, typography, imagery, and graphic elements I created a new user interface for the mobile task flow of “donating to the organization".
Pain Point #3:
The splash image at the top was too large, and the box surrounding the text made it appear to be a button when it was just an image.
Change #3:
Reduced the size of the splash image and removed the outlined box on the text at the top in order to reduce confusion as to whether it was a button or not.
Reflection:
I am very happy with the outcome of the user experience, and think that reducing steps made a big improvement. However, if permitted more time I would have preferred to spend more time on refining user interface elements. For example, accessibility is something I greatly value, but the colored text on the second screen against the white background does not pass a contrast checker. After doing an accessibility assessment, I would have continued to iterate on the design using findings from user testing to further improve the design.