Tag Archives: User Experience Design

Giddy Up Girls’ New Website

So, there’s this project I’ve been working on that’s been under wraps for a long time…

But now I can talk about it! Woot!

Basically I was hired by a brand new publishing company to do the illustrations for their first book, and design and build their website. The book, a mystery where two girls and a service dog solve the case of a missing horse, will be coming out on September 7th, and as of a few days ago, the website is live. Check it out: giddyupgirlsbooks.com

This has been a pretty special project for me. Jordan, one of the co-authors, has a unique genetic abnormality that keeps her from doing a lot of things people normally do, including speaking. (Read more about her story here and here.) The story and plot-line are all her ideas. She is able to communicate those ideas to Rachelle, her nurse, who understands her very well. Rachelle then typed those idea up to create the finished story. Helping make Jordan’s story come to life has been one of those things that make me feel like God has good uses for me in this world.

Advertisements

Redesigning my Portfolio (sort of a tutorial)

So, as I posted previously, my domain got deleted.

This is actually sort of ok with me because I’m already in the habit of doing a visual redesign of my portfolio website every few months. New designs keep popping themselves into my head and I can’t resist!

Web design is pretty simple if you follow these steps:

1. Clarify the goals and user needs for the website (don’t forget that the people using the site and the people managing the site often have different goals). This step is important because it saves a lot of confusion and hassle later on, and it reallllly helps in the design process too. I won’t go into a ton of detail here.

2. Do wireframes. It’s very helpful to do these separately from the rest of the visual design. That way you can focus on basic interaction and layout before visual hierarchy and overall “atmosphere” and feel.

I’m using Adobe Illustrator and Adobe Photoshop.

portfolio-wireframe-home

Each of the small boxes here is a portfolio item. I chose to prominently display them on the home page like this for maximum viability. I also chose to include my email address in the header so that contacting me is an easy, one-click process.

portfolio-wireframe-text

Another reason I really like doing wireframes before the rest of the visual design is that I can lay out and visualize how I am going all my margins and paddings when I do CSS. This helps me avoid mistakes later.

3. Do visual designs. This is pretty easy after doing wireframeing. I (loosely sometimes) follow the wireframe as a guide, and overlay my design.

portfolio-wireframe-home-v1 portfolio-wireframe-text-v1

It’s a good idea to do more than one design iteration.

portfolio-wireframe

portfolio-wireframe

Personally I like my second design better, but I think I will implement the first design since it will be easier to code up, and I need my portfolio back ASAP since I am looking for a job.

So, that’s it for design. Next I’m going to use this and whip up a WordPress Theme.

My Capstone Project

This is a project that I have been working on for school. Basically even though I haven’t written about it I did reading, research, lots of ideation, designing, redesigning, and several late Monday nights with my team to produce the following video. Enjoy:

I haven’t made any posts about this project because it has it’s very own blog!

Check it out: Project STEM Play

Positive Psychology and Encourageing Thanfulness for Others

This quarter I’m in a positive psychology research group led by Sean Munson. The past few weeks we have been ideating and designing new ways to promote health and wellness though positive psychology and social technologies.

After an initial brainstorming session I presented three design ideas to the group. I then took my favorite and then further developed my favorite into a prototype.

It’s an app which for now I am calling “Thankfulness Letters”.
Project goal: Encourage people to express thankfulness and/or care to and for their friends.

Here is my initial storyboard

ThankfullnessLettersStoryboard_1

ThankfullnessLettersStoryboard_2 Note: after discussion with my group, I switched from paper letters to emails to avoid potential user awkwardness and the “creepy stalker” factor. I realized that it is pretty common to have email addresses, but far less common to have email addresses.

ThankfullnessLettersStoryboard_3

ThankfullnessLettersStoryboard_4

ThankfullnessLettersStoryboard_5

ThankfullnessLettersStoryboard_6

 

A study  on positive psychology methods by Martin Seligman and Tracy Steen (University of Pennsylvania), Nansook Park (University of Rhode Island), and Christopher Peterson (University of Michigan) showed that expressing thankfulness to others is one method that is potentially very effective at promoting happiness in the person expressing thankfulness.

Why did I choose to design an app? Yes, there is an app for everything… I chose an app however because I wanted to easily integrate my design into people’s normal lives, and my target user group (most people in the US) generally have smartphones.
How the project goals are met in the app:

  • Randomly generates a friend once per the set period of time (one week default)
  • Gives a example/prompt to send to the person – helps with writer’s block, and makes the writing process less awkward.
  • Connects to email
  • Reminders are ephemeral – a backlog would probably discourage people (feel bad for not talking to x person), or be overwelming if it gets too large. Also gives a sense of urgency.

Feature Interaction Requirements:

  • Need to be able to change default time increments
  • Visual design needs to be accessible to visually impaired

Visual Design Look/Feel:

  • Happy
  • Peaceful
  • Caring

I also made an Axure Prototype.

Updater App Post-Use Reflection

It’s now several weeks since the week-long Human’s Vs. Zombies tag game, and now I am reporting how my app was used by my team members. This is form my perspective, as a user of my own app.

Screen Shot 2013-11-13 at 8.17.50 PM

The number one thing I noticed was that some people were more into updating it than others. For example, I know some people where even updating stats for their friends who never did any updating at all.

Secondly, team members who were not playing where still included. I felt like this was a bit clutter-y.

Recommendations for improvements include:

  • A way to integrate check-in should be integrating in the second release.
  • An automatic resent could be included.
  • This thing is not secure at all. Any sensible developer would add more checks to the input fields.
  • More CSS and Javascript driven styles for better clarity of reading.

Anyway, there were a bunch of good things that I noticed. First, people actually used it! That is just too cool for an aspiring UX designer. 🙂 One user was even promoting it’s use, and referencing too it during our game. Also, it’s open nature allowed players to update for their friends, which helped keep the stats current.