The Interaction Design Association (IxDA) is an interaction design focused member-supported organization. Each year, they host upwards of 1,500 designers for a conference week packed full of workshops, talks, and networking events.

After pushing our survey out to various Interaction Design communities online among Reddit, Slack groups, and Facebook, our efforts resulted in 31 survey participants. From there, we began analyzing the results and pulling out goals and known pain points. Affinity mapping was performed to group user goals and pain points in order to prioritize feature planning for our conference app. Wayfinding, networking, and exploring desired content and events were found to be a priority for attendees.

After hearing from conference attendees, we prioritized a foundational conference app that will enable an innovative, integrated experience for attendees. Data from the design community gathered in our surveyed informed focus on a customizable schedule, helping attendees locate exactly where events are taking place, and assist in forging a connection between other conference attendees.

During testing, the prototype was well received and users only questioned copy such as the usage of "Program" vs "Schedule." We integrated these changes alongside our mid and high fidelity versions of the screens.

Foundational prototype in hand, my team and I had a midway check in with our client. Since our research had told us that attendees desire a simple, easy-to-navigate conference experience, I narrowed in on the user flows and made sure there were no dead ends or barriers to entry for the conference experience.

The client felt that because of this foundational approach, we were behind on the brief and needed to focus more on interaction design in order to deliver. I held a design thinking session with my team and doubled down on our strongest features to flesh out exciting, interactive experiences for conference goers to fully experience the conference environment.

DATA VISUALIZATION: Visual data driven by user-created profiles, generated from the tagging of provided categories during profile creation. Data would be collected through user-created profiles within the app and the visualizations would be displayed throughout the conference in common areas, as well as on the conference screens in the physical event space before the event began. These visualizations would allow attendees to engage with one another and drive connection by fostering conversations about where they are on the map, what they’re interested in, and other networking topics rather than a "head's down" atmosphere.

VIRTUAL MAP, TRIVIA & SNAPCHAT INTEGRATION: Research findings informed that attendees expressed the desire for wayfinding, connection, and networking. A virtual map would allow attendees to click on a room location from the event detail page or "Venue Map" from the main menu, and interact with the map floor by floor, room by room, heightening their wayfinding experience.

Trivia and Snapchat would be integrated to create engagement at strategic times during the conference to increase connection and networking opportunities when attendees have “free” time between talks, events, and happy hours - morning, noon, and evenings. A custom Snapchat filter with a call to action button on the homepage would drive attendees to share sponsor swag won, or share a selfie that they will look back on and reflect on their Interaction 19 conference experience.

The final prototype can be found HERE. My team and I presented this final design solution and recommendations to IxDA. The client could really see the value in the data visualization feature and is considering implementing it for their events that are streamed worldwide, beyond the conference experience itself.

WHAT I LEARNED

This project taught me about balancing client and user goals. While I had to work to meet IxDA's brief, it was important to stay true to the user research instead of doing a full pivot after the client check-in. I also learned a lot about interfacing with the client, and how to present your work to your associates versus your client. 

NEXT STEPS

Given more time, I'd like to iterate further on the following:

1. More data points and ideas for different visualizations throughout the conference. Would there be an option to show the data visualizations on the attendee's phone, or would that foster less networking and connectivity?

2. It'd be great to see the trivia idea become more robust. Ideas such as a live leaderboard, challenging fellow attendees 1:1, and countdowns to the next trivia challenge could be implemented. 

3. Dive deeper into the pre-conference experience with clock countdown, pre-conference content, and local events.

4. Explore the post-conference experience with conference feedback, voting for the next IxDA conference city, downloadable content that has push notifications when keynote presentations become available, photos, etc.

A project can go off the rails without clear business goals, requirements, and customer pain points drawn out. I wanted to create clear requirements and define who SVC’s user is, along with some baseline sketches to begin testing with paper prototypes.

I was able to interview and observe students on-site in order to create a persona for my target user. SVC’s online learner demographic is an artist of sorts already, but looking to expand their arsenal and learn the latest software or technique for that next big opportunity to excel their career.

USABILITY TESTING

Before jumping into testing, I had to nail down testing goals and what flow I would be testing. With the data collected from the observational research and my SVC persona in tow, my testing goal was identified:

"As a new student, I need to be able to easily sign up for a class I'm interested IN"

Based on user feedback, the user flow identified as most crucial was to have the user complete a single class enrollment:

1. User lands on the homepage

2. The user sees online classes are available and navigates to a class of interest

3. User successfully enrolls in a class

In order for the user to get into the context and frame of mind for testing, a testing scenario was created utilizing the Ruth persona from earlier user research:

"Your job is expanding and your employer informs you that SVC has rolled out online courses, one of which is perfect for your new responsibilities at the company, HTML, CSS & Fundamentals of Development. You figure that learning online is a great way to balance your work life and impress your employer with your new skill-set. Sign up for the HTML, CSS & Fundamentals of Development class now."

Metrics for success during testing were task success, time on task, errors, efficiency, and learnability. After running through the screener and doing multiple iterations of testing and iterating on the design based on feedback, it was time to create the high-fidelity prototype.

HIGH-FIDELITY PROTOTYPE

After multiple rounds of iteration and testing, the current prototype can be found HERE

ANALYZING THEMES

Based on feedback from the latest round of usability tests that were conducted with the high-fidelity prototype, I created an analysis of themes to iterate on and continue to improve the SVC online learning experience.

WHAT I LEARNED

Prototyping can be anything from a simple click-through to prove out a user flow like my final product here, a wireframe with intricate interaction, or even a quick and dirty prototype on printer paper. I learned a lot about how to conduct a usability study, which I'm very excited about. I believe that watching customers interact with your product is invaluable, and should be done early, and often.

NEXT STEPS

I was really excited about this project and was fairly happy with how things turned out. There are still things I wish I had more time during the course duration to flesh out.

1. Copy is huge here. A lot of the feedback I received from usability testing was that the copy I did have available was really enticing, so I'm beginning to imagine how adding even more copy could assist SVC positively. One user stated that the "friendly greeting is great (upon clicking 'enroll') - it makes me feel good about spending the money!" 

2. I'd love to start thinking about how to implement a student/instructor portal into the SVC website. As you can see, I went beyond my initial scope to include a student page and an instructor page just to begin to play with what that could look like. If SVC were to implement an online learning platform, most of the students that I talked to would love to have visibility to other courses teachers have coming up, and a way to track their current, previous, and future courses themselves.

3. Price was a deterring factor during usability testing. I had initially utilized the same price as an in-person class at SVC, but most students who tested my prototype commented about how the price was rather high, and they'd expect it to be closer to the $100 range. Next steps here would be to conduct some user research and competitive analysis surrounding pricing of online courses.

4. Checkout flows can be really complex. I'd love to do more research on checkout flows and conventions so I can have a screen after the one-click enrollment where students enter in credit card and sensitive information. Nobody in my usability studies called this out as missing, but I am aware that it is a crucial part of the sign-up flow and would love to solve for that in the near future.

SITE AUDIT

One of the main challenges with the existing Top Pot website is the structure of the site and the layout. It’s not responsive, and there seems to be no real rhyme or reason to the homepage beyond trying to keep their customers up-to-date with the happenings. I noticed they are advertising their book, but it's at the very bottom of the homepage. Little things like this gave the brand lots of opportunities to improve when we began researching top navigation best practices to pair down menu options in order to make the site more digestible for their customers, existing and potential.

SITE MAP

MOOD BOARD & STYLE GUIDE

One of my favorite parts of the design process is when you figure out your creative direction, and can start bringing a design to life. I started bringing the design to life by creating a word cloud, then started exploring style through photography, color, typography, and illustration through the mood board above. I knew that I really wanted to continue with the playful style that Top Pot brings to the table, while complimenting the kitschy antique feeling they are so passionate about.

I ended up being most inspired by the sign-painter typography you see above and adding a punch of color to their existing palette to make the overall feel more playful and fun, which really embodies the Top Pot culture.

VISUAL DESIGN

After only four weeks to work and iterate on our wireframes, I was able to draw enough design direction from my mood board and competitive research into Top Pot Doughnuts to come out with version one of my proposed visual designs. 

Going into visual designs, I knew that I wanted to give Top Pot a more modern, yet playful feel and function to their website. For example, instead of their current state of linking out to a live email address as a contact option, I wanted to get customers the option to subscribe to Top Pot's email newsletter and positioned it directly next to a satisfied customer's quote.

WHAT I LEARNED

My instructor for this course worked at an agency, so it was really insightful to get a look into the creative process and have our five-week course packed with a complete design cycle. While I really enjoyed doing the visual design itself, I learned that it's invaluable to have set guardrails and actual business goals going into a project like this. Since this assignment was so free-form, there were no set objectives beyond to design a beautiful and delightful responsive user interface. 

NEXT STEPS

While there are things that I really enjoyed about this project, there are also things I would love to continue to iterate on and change moving forward. 

1. Usability testing! How do current and potential Top Pot customers respond to the proposed visual design?

2. Some feedback I was given in our design review was that my use of the darker blue in the footer felt like too many different variants of blue, especially with the different opacity sprinkles thrown in on the home page. An easy fix would be to make the header and footer the same color, but the potential to work deeper on my color palette and solidify the state of the sprinkles themselves. Are they meant to be an interactive element on the page or a solid part of the background?

3. Begin creating the other supporting pages and start thinking out how the content would be organized and displayed. 

4. The "About Us" page still feels like it needs support. Is there a better way to chunk out the information on the page, or cut the copy down even further? I believe using a pull quote is effective here, but is it the right quote, in the right location? I'd love to test this page with users and see what their response is to the visual hierarchy and content.