Brand based palettes

This was a fun one to try. I played around with a muted and vibrant palette. The vibrant would probably have to be toned down with the white text to pass accessibility.

Laws of Locality

I chose something that drives me crazy about microsoft word on Mac. I can never remember how to select all. You have to go all the way to the top of the page under edit but there is an edit within the page but it doesn't contain select all. Fixed it for them by adding select and select all when you click on a word within the document. I think this may have been a feature in older versions of the app and they should bring it back.

Adjustments

I played around with adding color to the search bar at first but settled on keeping it white since I'd think search would be the main element I'd use on the page and it pops more in white.

Jakob’s Law

Jakob’s Law states that users spend most of their time on other sites so they want your site to work similarly to those sites. I tried to find solutions for all of the pain points. I don't have a lot of familiarity with this type of app so I did some research into how a lot of them work. It seems they adhere to the heuristic of keeping things like they are in the real world where you would take a question on a card, think about the answer and then flip it over to see if you were right.

https://www.figma.com/proto/8AvmACQpKzsNPkhy73pZs5/Jakob's-Law-HW-(Copy)?page-id=0%3A1&node-id=904-33&viewport=-518%2C333%2C0.2&scaling=min-zoom&starting-point-node-id=904%3A33

The color gray

I like a really simple to do list for personal tasks where I can check off and feel accomplished. I created a design in that vein. I used gray with a hint of color to achieve this.

Show what’s actionable

It should be obvious to users how and where they can take action. For this exercise I thought that there are going to be a lot of people who are not just browsing classes, they know what classes, times, dates, etc they want. I created a way for them to search the way they want to. I took away the long page of scrolling and just left one day at a time for viewing. I added a calendar in case someone is looking to find out the classes for a specific date. Lastly I underlined the class titles to highlight that they are clickable. When clicked on a pop up would appear with the class description and when it is offered. I also left the ability to look at all class descriptions at once as I see the value in this.

Interaction Design

One thing I’ve learned when trying to improve the user experience is that the best interaction is no interaction. Users don’t want to have to do a lot on your app or website to achieve their goal. Here I eliminated the references to billing since we learned from the brief this service is usually free. I also removed the social media link since it is optional and doesn't need to be included in approval. I added contact information, which maybe was going to be on the next page but there needs to be a way to know and keep record that you made request and a place to confirm your access has been granted. I wasn't sure about the different type of emails so I left secondary and tertiary out. It could be something to ask the stakeholders about to determine whether it is really necessary or not. I didn't see a link to the cross check for this assignment, so please direct me to it.

Lighting and Shadows

When adding light and shadows to a design I always try to remember that light comes from the sky. I tried to make more subtle changes to the cards and inactive radio and checkboxes. I wanted the active switch, floating action button, and toggle to pop.

Simplicity

I think many websites benefitted from simplicity. Here I sought to make this wikipedia page more simple by focusing on alignment, spacing, consistency, lightening, hiding, and removing.

I did two versions of this one as I had difficulty figuring out how to place the different sized pics and I didn't want to remove them as they have value to those who are seeking a visual of the Milky Way. I also think a lot of people will go to wikipedia just to view the observation data so I wanted to keep it accessible but not so prominent.

Consistency

Consistency demonstrates that elements belong together. I try to remain consistent unless there is a clear reason to deviate from it. Here I attempted to show consistency between the parts of a sign in page.

Alignment

Working on alignment principles…

Iterating

Here I was working on iterating on one design. I mostly made subtle changes but did try to play with color and typography a bit. I actually ended up liking it with the title and bottom pics a little larger.

More Copy Work

For this one I couldn't find the font used for free so I found one that seemed to be pretty close. I got to practice with removing background from images and creating icons myself. I usually just use plug ins for icons but want to get better at making them.

Copy Work

Here's my first stab at copy work. I was working with it but still couldn't get quite the gradient effect that the original portrayed. An angular gradient was suggested to achieve that sharp look I was seeking.

Mood Board

Here is my mood board full of ideas for the UI of the design of the physical therapy home exercise app I created. I wanted the brand to be clean, simple and slightly techy. The app should be seen as a trusted source of knowledge but also engaging and approachable. I wanted to convey that through the UI

Gut Instinct

I tried to look for some variation in websites that I like. I found I'm drawn to sites with a lot of white space and clear branding and demarcations from section to section.

The Journey Continues …

I am always learning. This blog is a place to embrace that and showcase my process, growth, curiosity and desire to improve my UX skills.