UX + Design – Here's The Dill

Bringing Tourify to Life

See the live site at tourify.city. Because this site is hosted on a free platform (Heroku), the data may take a few seconds to load or require a page refresh.

The final assignment at The Iron Yard was a group project that brought together everything we’d learned over the previous twelve weeks – front and back end integration, responsive design, agile work process, and of course teamwork and collaboration.

My project pitch was Tourify, a travel app for interactive tour experiences. Having worked at the Durham Convention & Visitors Bureau (DCVB), I knew they had an existing print tour that would be more dynamic in a digital format. With DCVB’s permission to use the content and about three weeks to make it happen, our team jumped right in.

I served as the project lead as well as a front end designer and developer. Checkout out the live site at tourify.city and read about the design and development process below.

Durham Homepage

Downtown Durham History Walk Homepage

PLANNING

The first several days were devoted to planning – fleshing out our user stories, sketching wireframes, and discussing the key functionality and data that would power the app.

We identified two main users:

The traveler who would interact with the front end tour content while out and about in the city.
The content creator, such as the DCVB, who would create, upload, and maintain the content from a backend interface.

IMG_20171005_161631 — Developing user stories for the Traveler and Content Creator/Admin

Next we took the tour ourselves, using the existing print guide to evaluate the current experience. The content was interesting but there were a few issues. It was hard to tell if you were at the right location and a lot of information was left off due to the compact nature of the piece. We decided that the addition of photography and travel tips would create a better experience.

Pulling together our user stories and on-the-ground research, we identified the key features for the app:

Front End:

Easy-to-use interface designed for mobile, but responsive on any device/screen
Single page React app that uses components and dynamic URLs to change content as user interacts with the app
Ability to show stop locations and detect user’s current location via Google Maps API
Ability to start tour at first stop or select a starting point based on current location
Built so that additional tour content can be added and easily integrated

Back End:

Database to store data and serve it to the front end via fetch API call
Interface for content creator to add new tours or edit existing tours
Ability to add/delete/edit tour and stop info
Ability for content creators to make account to save and store tour content

INTERFACE DESIGN & BRANDING

As part of the front end team and someone who enjoys the design process, I used Adobe XD to transform the wireframes into mock-ups. I knew it would make the coding and styling process easier if we were all working from shared styles and brand guidelines.

I created the Tourify logo in Illustrator, identified brand colors and fonts, and shared these elements with the team for feedback.

Screen Shot 2017-10-30 at 3.16.10 PM — Site mockups created using Adobe XD

DEVELOPMENT

Our front end and back end teams split up to code our respective parts of the project, but worked closely together throughout the process. On front end, I built the route and component for the tour home page, created the dynamic routes, and set up the initial fetch to pull in the API data. I also did a majority of the CSS for the front and back end.

Initially we built the app as a combined Rails-React app but about a week in continued to have trouble getting both front end and back end routes to work. After talking to a prior Iron Yard grad, we decided to abandon this approach and split out into separate React and Rails apps. From that point on we were able to move faster, particularly on front end.

Once we got the main features built – including the main parts of the front end traveler interface and the working database – we were able to focus on additional features including the Google maps integration and creating the admin interface.

DEPLOYMENT & DEMO DAY

Both the front and back end sites are deployed on Heroku:

Front end: https://serene-brushlands-14696.herokuapp.com/
Back end: https://evening-retreat-85270.herokuapp.com/

The final days of the project overlapped with a tech conference, so much of our communication became virtual. We had a few last minute conflicts, but nothing that couldn’t be fixed with the help of version control in Git/Github. We had an ambitious team and a lot of ideas, so it was hard to reach a stopping point until demo day was upon us.

Our team got to present last at Demo Day and bring it home for the final Iron Yard presentation. We got a lot of great feedback and have some things to think about in terms of the future of the project. If we continue, we’d like to add additional functionality for the traveler such as the ability to save stops or check in and earn badges or discounts.

It was very rewarding to go from idea to working app over just under three weeks. With the help of a great team we presented a great product that we are truly proud of.

A few previews of the back end admin interface:

Screen Shot 2017-10-30 at 3.39.33 PM — Organization homepage with list of current tours

Screen Shot 2017-10-30 at 3.40.42 PM — Stop detail page to review existing content for each stop

Memory Game for Mobile w/ Sketch

Go straight to the live game page.

One of my front end projects at The Iron Yard is an interactive memory game built with HTML, CSS, and JavaScript. Using DOM manipulation, the cards change appearance as the user interacts with the game. (Check out the game and give it a try).

Screen Shot 2017-09-18 at 7.56.42 PM

Flexbox was used to control the spacing and placement so that most elements will resize for various devices. However, the game board for the card is not currently responsive.

I used Sketch to revisit the project and mock up the home screen and game board for mobile. Below are the prototypes followed by the considerations for scaling down the game.

Screen Shot 2017-09-18 at 8.41.00 PM — These prototypes are based on an iPhone 7 with a screen size of 667 x 375.

In a memory matching game it is ideal for the full game board to be in view so the player can build a mental record of each card’s location as they are revealed.
- To fit the full board in the mobile window, the card size will need to be reduced.
- Eliminating the need to scroll should also reduce the likelihood of stray clicks.
On mobile the player will interact with the cards by touching the screen. For this reason the size of the cards must be considered so that it is easy to select the intended card and see the detail of the image.
- After working in Sketch, I decided that 80px would be the minimum size that still allows for ease of selection. It would be ideal to test this with a mix of users.
The 4 column x 4 row card layout that works on larger screens will translate to mobile by reducing the card size from 120px square to 80px square.
- This option fits a 16 card game for twins edition (eight pairs) and also accommodate a 24 (eight sets of three) for triplets edition.
- Another option would be to opt for fewer but larger cards. This might work for an easy mode with a max of 12 cards (six pairs).

Sketch makes it convenient to visualize and adjust the sizing and layout options vs. playing with these types of details in the code.

Here are the prototypes at actual size:

Game Board (24 cards) — Game Board Triplets Edition (24 cards)

Game Board (12 cards).png — Game Board Easy Mode (12 cards)

Applying User Testing to Video Content

One of the exciting projects I had the pleasure to work on at the Durham Convention & Visitors Bureau, was the development of a new overview video for the city.

We had an existing video that served this purpose but was ready for an update. It was more than ten minutes long, included some dated footage, and utilized a testimonial format that was effective but lacked emotional appeal.

The goal was to create a 2-3 minute video that captured the personality of the city through its sights, sounds, and people. A video that left the viewer wanting to learn more and excited to check out Durham, particularly someone who might not be familiar with the city.

We were lucky to partner with Saleem Reshamwala, a local videographer with a deep understanding of the city and a highly creative vision. His ideas included working with local musicians to create a custom soundtrack, and incorporating the actual sounds of the city.

Once we were clear on the content goals and shot list, Saleem started filming and we got to see several rough cuts along the way. As the video started to take a more finished form we were excited and knew it was almost there, but had some questions:

We knew WE enjoyed the video, but what would viewers think?
What would someone outside of Durham think? Would they be excited by the video?
With the fast-paced footage, would the viewer get a sense of what the city offers?
And maybe most importantly, would it make them interested in visiting?

These were not questions we could answer without feedback, so I proposed using User Testing to get input from some of our ideal viewers. We did not have a large budget to use, but I developed a short test to get feedback from five users who met our desired profile. (See the target audience and test plan at the end of the post).

The results of the test were extremely valuable and helped internal stakeholders feel confident that we could wrap up the project with some minor changes. All five testers were excited by the energy of the video and surprised by everything that Durham has to offer, and 4/5 said it made them more interested in visiting. We also got specific feedback to act on, such as the suggestion for additional food footage.

What scene(s) from the video had the greatest impact on you (positive and/or negative)?

“Loved the guy picking the guitar. The opening photo of the city did not look very appealing. I’m sure you could come up with a better one. Show more food.”

Would you be likely to share the video with a friend?

“This one yes, cuz I have family who live in Durham, so I’d send it to them to show them how awesome it is. I’d probably send it to my husband as well, to help convince him we should go there. :)”

When the video debuted on Facebook it was a hit and received more than 350,000 views and 5,000+ shares. With the positive feedback we are confident that the video met its goals and can be used to introduce Durham to new audiences.

Below you can see the targeted audience for the test as well as the questions.

Screen Shot 2017-09-16 at 9.03.09 AM — In addition to the parameters above, we also had a screening question to target people who had never been to Durham before.

Screen Shot 2017-09-16 at 9.03.32 AM.png