Charts & Data Visualization

Data visualization is all about telling a story by usual visuals to describe analytical data such as graphs and charts. I find it really helps when trying to communicate data driven design to a larger audience. Here I using both the line and bar graph to describe the data. I used the gradient for the pie chart in the second frame and though more visually appealing I got feedback that the colors were more difficult to distinguish so sticking to one color across is the way to go.

User Flows

To represent a user flow for a dog walker app I researched by going to current dog walker apps and looking at their sign up processes and then did a search on the requirements to be a dog walker and what specifics dog owners look for in a walker.

User stories

1. As a dog walker I want to register for a dog walking app so I can get new clients.

2. As a dog owner I want to register for a dog walking app so that I can find someone to walk my dog while I am on vacation.

Icons

Most of the time when I need to use an icon I grab one from a figma plugin like material design but I know designing icons can come in handy when you need something unique or when your trying to showcase the brand through the icons you use. Here I copied icons, added consistency to icons and created my own icons. I find remaining consistent to be the biggest challenge and I think it just takes practice to get the eye for that.

Vectors

I’ve never done vectors before so this was a fun challenge. I chose my favorite guilty pleasure soda, specifically Pepsi. I used rectangles, triangles, and circles to create the frame. I then used the bend tool and the subtract tool to create some of the details. The most difficult thing was created the slight bulges out of vectors that are mostly straight lines.

Check out the figma file

Responsive Design

I started with the mobile design. In one version I hid the sidebar items behind a hamburger menu and in another I used a drop down to show the main heading while hiding the specifics.I went from 2 rows to 2 columns of flowers. For my larger designs I did the vertical version on a tablet and then a laptop size which would likely be the same layout as the desktop, for these I tried to play around with spacing to see what looked best. Responsive Design Figma File

Component Library

My component library is representative on a project highlighted in my portfolio about the black mental health experience. Breathe is a concierge service for finding a culturally competent mental health provider, who is relatable and meets the individualized needs of each client.

The brand is empathetic, welcoming, encouraging. It is mostly friendly.

I was able to maintain consistency with color and button style, I found it most difficult to know where to use shadows.

My biggest lesson is that creating a component library is much more complex than I initially thought. There are so many different states to acknowledge.

Styling Text III

The brand I was attempting to achieve with this text styling was luxury, expensive, masculine and classic. These are the terms that come to mind quickest for me when talking about designer watches. I used a drop cap, run in, indented lines and formatted quotes to style the text.

Pairing Fonts

I used my screens from brand and letterforms, I left the fancy fonts the same as I thought they fit pretty well together as is. I relied heavily on the good fonts table and tried to pair serifs with sans serifs. I used the overlay to see how well the fonts blended. All but the heavy branding screen matched up pretty well.

For the light and heavy branding I used a beach scene which would be relaxed, casual and friendly. For the light branding I used more humanist fonts which appear cleaner and I used more playful fonts for the heavy branding which more directly give summer and relaxation. I used lato for body as it is legible but gives off the summer vibe and literally means “summer” in polish.

Lists & tables

I decided to do a financial mobile app. With limited space I tried to include the most important features. You can filter by category, account, or date as well as use the search feature. Details of each transaction can be seen when clicking on the arrow.

Styling text …again

For the first page I played around with emphasis. I used grotesk as it is a playful yet friendly text and still reads fairly well across the board. For the second page I stuck with helvetica but modified using size, color and opacity. I saw that the solution page used tags for the price which I think would be a good idea as it highlights an element that may be important to those who come to the page.

Brand & letterform

The text we use should match the brand we are trying to achieve. Here I used text to display clean and simple, fancy, techie, and quirky brands.

Search & filter

I used screens from instagram, amazon, and youtube music as inspiration for the multitype search.

All of the screens bring up recent searches and autocomplete which I think is essential for an efficient user experience.

I favor screen three because you don't have to click node to node to search, adding an extra step. It returns specific songs, albums, etc. without having to type. I’d think this could be based on your search or history or an algorithm of what people are typically searching for when they type the letters you type. When I am searching music I may know the song and not the artist and vice versa the autocomplete and prediction help to address that.

Styling Text

Brand: Luxury, trustworthy, expensive, clean

I first went with a serif for the title but then felt it looked cleaner with a sans serif, fira sans, I think the capitalized titles do add to the luxury of the brand. Tried the paragraph titles unbolded but it didn’t pass the squint test so I chose to use a bold heading in both places.

Errors

Here I went through the screen looking for elements that developers would need to be aware of that could lead to errors. It’s important to anticipate inevitable errors and provide helpful corrections that lack judgement.

https://www.figma.com/file/klNBsrx5iwx3dGTH80HS8e/Errors-HW-(Copy)?type=design&node-id=0%3A1&t=MVo0f32rjYSnD0Pp-1

Selection Controls

I first went through to practice optimizing the selection controls then I went back to try to clean up the screen and eliminate elements that wouldn’t be necessary in most cases when you are just searching for a flight. Like why would you need to input your country of residence here?

I figured the filters like price time of day, airline could be used on the next page where you see the list of flights.

Add other passengers is not very descriptive so I searched other flight searches to figure what this meant and determined it means children so added that as an input because people may miss the link.

I also have always disliked having to input the airport code especially if its different from the city like MCO for Orlando airport, better to just input the city you want to go to and have the system show you flights to local airports.

As someone who lives in the DC area there are 3 airports that I look at for flights that are close by so I like for a search to show me the best value from all of those airports.

Navigation

I went with a dashboard website view for the redesign. Sticking to the idea that the purpose of the site is to find upcoming jam sessions I focused on ways users could do that directly from the home page. The main feature that draws attention is the map.I went back and forth with list and map view and in the end decided to combine them the way google does when you are searching for things like restaurants and hotels. I figured the user would like to see what events they’ve already signed up for as well as the groups they are involved in. Performances can be confused with other events so i thought renaming that to official performances may help with that. The user directory may be less utilized, I have not sketched that out yet but I think it could work with a search feature at the top with a filter option so that users can narrow down their search.

Gradients

Played around with gradients a bit in my first screen using 4 different types of gradients. The second screen has more coherence between the 4 gradients.

Dark interface

Here I got to play around with creating a dark interface. I achieved the look by darkening background colors and modifying highlight colors.

Do it the nice way

Users don’t want to be yelled at or have demands placed on them. Nice UX is good UX. Here to me there are two use cases here if I'm trying to see if I'm registered I don't want to scroll through an entire list of competitors but if I'm trying to see if local champions are registered I'd probably be more inclined to browse a list. For this reason I separated the two. On the list page their could be filters for youth, weight, height etc. I included the base pages here and focused on the search feature.

Descriptive writing

When introducing a new concept it is important to be aware of the language and words that you choose. This was from one of my portfolio projects where I emphasize deductive and inductive methods for explanation