Six Degrees of You and Me: A UI / UX Assignment:The Main Course

First

First, my apologies for the long delay in getting the final iteration of my complete UX/UI project posted. I have been falling behind on lots of things for lots of reasons. But it is time to catch up.

The Project

I learned so much from this project (I think – grades haven’t posted yet) and it is probably the most exhaustive single work that I have produced to date. I found it exceptionally frustrating and ultimately, exceptionally rewarding.  I  am posting and discussing this project page by page, so bear with me. If you just don’t have the time to listen to me wax on about my process, I will be posting an addendum next that will show thumbnails of the finished project.

Page by Page

This is the first page of my presentation – one thing I have learned is the importance of a cover page, if you will. Something that basically titles the work and gives a first impression. I used the Museum’s logo along with that of Ancestry.com to underscore the partnership for my fictitious event and then the exhibit name, all large and bright and shiny to show off my logo design.

 

 

Initially I had written an overall page on the ins and outs of the exhibit. My instructor bluntly (as is his wont) told me it was too wordy. He also pointed out that I had pages with no explanation of what they were and that I seemed to expect people to remember them from that overwhelming intro page. Great point, Mr. Dockery. So I re-worded the intro as a letter from the museum curator and added the director’s image and signature.

 

 

 

 

Next I set the stage with a mock-up using the Museum’s own signage stanchion. This time I positioned the sign so that it sits within the metal bar without obscuring the exhibit name.  Then I added the image of the huge IMAX globe to the page. I used a paintbrush to randomly scatter small dots and then added outer glows to simulate the points of light.

 

 

 

 

The map was not part of my initial plan. But I had submitted my entire project (unknowingly) a week before the deadline. The bonus to this was that I got my pdf returned to me with highly detailed feedback and I was able to make most of the recommended changes to improve the work. One such change was adding a map in order to show the placement of elements in the museum. I used prefab symbols and created a couple of my own for the map legend and then I re-built the museum’s first floor map with the exhibition layout.

 

 

 

 

My next page showed the inside entrance of the museum with the information desk. I used one of the pictures I took on my visit to the museum, added the Ancestry.com logo to the front and placed the exhibition sign at the top. I really struggled with that exhibition sign – trying to get the angle right (close) and trying (and failing) to get the color right. I spent a ton of time on this and tried different colors and different textures from umber to wood-grain but ultimately I had to move on. I remain dissatisfied with the page overall but I put way too much work into it to leave it out.

 

 

 

 

I had taken this photo when I visited the museum and all those test tubes seemed to lend themselves to the idea of cheek swab samples in suspension so I knew I wanted to use it. I added the station header, the sponsor logos, and threw in a couple of images of the spiral sculptures that can be found in the museum. Obviously I still have to figure out how to mimic lighting so that the signs look more realistic in situ but at that point I was running out of time. Or at least i thought I was. Turns out I had a whole ‘nother week…

 

 

 

 

Because this was a UX/UI project, I felt I should show some UI. A fellow student had mentioned  using Balsamiq for wireframes in one of their discussion board posts and I decided to give it a shot. I designed a home screen and a couple of results screens to show the concept. (I have a good friend who is majorly into genealogy and she sent me screen shots from Ancestry.com that I used for the second screen). I added logos and social media icons to complete the interface.

 

 

 

 

I also wanted to have terminals available to museum patrons that they could use to do more intensive genealogy research. Here are my mock-ups of those with a home screen and several results screens (Thanks again for the screenshots, Sally!)

 

 

 

 

The next three screens were fun – I used the same kiosk base of DNA strands for all three but each shows a different take on six degrees of connection. The first one has a camera that takes your picture and it searches the museum’s database for your ancestry.com information. The silhouette screens switch to actual images based on which button you push. You can see pictures of your parents, grandparents and great grandparents if available!

 

 

 

 

The second kiosk in this group lets you play! You can see images of celebrities and historical figures that share your DNA!

 

 

 

 

The last kiosk lets you interact with other museum patrons to see if you might be connected. Two people can use it – it takes images of both and searches the database for commonalities.

 

 

 

Here’s my favorite part. I had a sort of half-formed idea about using a video game as another fun way to explore DNA. How much DNA do you have in common with non-humans?  Did you know that we share 18% of our DNA with Baker’s yeast?  Museum patrons would be able to locate information on shared DNA throughout the exhibit. For example, the placard that tells you about the giant whale bones would include information about how much DNA humans have in common with whales. Then at the end of the exhibit, you could test your knowledge in the arcade.

Aside

Let me tell you – I am not a gamer. Back in the day when arcades actually existed I used to play a game called Phoenix at the 7/11 down the street. Oh how I loved it! I would stop by every afternoon after school and pump a few quarters in. I got good enough at the game that I held the day’s high score at Kings Island in Cincinnati when I visited that arcade – a fact that I trot out at every chance I get – like now. I mean, hundreds of people played that game that day. And MY name topped the leader board.

Anyhow – I never made the move to console gaming and my skills faded, my finger dexterity rusted away. But  the cool thing is that when I had this idea I was able to seek help from my 18 year old game-addicted nephew. Ben sat by my side for over an hour, giving his perspective on my work and steering me straight when I went awry. It wound up being a family bonding experience as my niece, my sister and even my brother-in-law shared opinions, critiqued color schemes and pointed out my many mistakes. I’ll never forget it.

End Aside

Again, I used an existing museum kiosk for my base. I did live traces in Illustrator to get the silhouettes and I used the DNA strands I had already built as my ladders. I added the frame and buttons using the satin effect in Photoshop to give the metallic dimension I was after. And my favorite part: when I needed to add the character I had the genius idea to use my Bitstrips avatar! Apparently I am feeling pensive at the idea of my bridge collapsing and dropping me feet first into the maw of a mighty whale…

And Finally! here is the last page of my project. If you hit the wrong button, this is what you get. He’s 3-D and motion-activated. He roars too. Trust me. You cant hear it because this is a visual presentation but its scary as heck!