Designing for Clients

All of my past projects in Mag+ have been projects I wanted to do. The subject matter has always come from me giving me complete creative freedom. While this can make some good products, rarely will this be the case in the job field.

Sketches and Research

My first client project in Mag+ was for a friend at BYU who is a part of their Model Arab League (MAL) club. The club doesn’t have the exposure they want so they were excited about a digital publication to get the details of their club out there.

I had to ask how they would meet prospective club members and how they could get the information out, would it be a 30 second meeting at a booth in a hall or a 20 min meeting covering everything about the club? At first I created two separate solutions: A couple paged publication that can be used as a quick reference at a booth, then a publication of 10+ pages that went over everything possible about the club. As I thought about the longer publication I reasoned that the Table of Contents could be made into a mini-broucure on its own and the additional pages could be used only when needed.

After ironing out an outline for this I started work on the visuals. I researched MAL’s website, the types of color, font and image choices they use already. It was apparent from this research that more attention was given to the information on the site than was given to the style on the site. Not to say the style was bad, but the information provided was obviously and understandably the focus of the website.

With this in mind, I created a muted visual style for the publication and focused primarily on how the information would be presented.

I didn’t need multiple colors or overly complicated icons. Modern professionalism was the goal.

Normally I could start on the publication at this point as the information would come from my head and the images would come from a couple Google searches, but I needed to get images and additional information from my client.

The research and asset collection phase took a large part of my budgeted time, but left me with enough time near the end to create interactions I had never thought of within Mag+.

Feature Creation

Overlays

My class spent a lot of time talking about Overlays within Mag+ since none of us had utilized this feature before. We mostly applied it to a full table of contents within a floating menu button, but instead of making an overly complicated menu system that overlayed my whole magazine I wanted a single button that would take you back to “home.” I didn’t want to overwhelm my users with menus since the navigation was taking backseat to the content.

Integrating the Overlay with the rest of my verticals proved simpler than I initially thought, and it was a better solution than making an individual button for each vertical that went to the same place. I was glad that this feature was quick to implement because my next two features took a lot of time and caused more than a few headaches.

Interactive Slideshow

I wanted an interactive slideshow, one that was more than just swiping. This publication was going to have a lot of information and if I could change the text based on the image being shown I could reduce the amount of scroll fatigue for the user. In Mag+ you need to create a pop-up with some kind of trigger to change out boxes of text and to create a Slideshow you need to group the desired images together. The trick is though when objects are grouped together you generally can’t create a pop-up connected to an object in a group (have I lost you yet?) I would double-click on the image I wanted to connect to a text field but when I ran it, the text would never show up with the image. Turns out the object was being selected and linked to the text and not the slide in the slideshow.

Left to Right: When I single clicked on the slideshow, When I double clicked on the slideshow, When I single clicked on the state in this special window

A lot of things in Mag+ look complicated, but most are simple if you know where to look. This is the perfect example of that, I never would have thought to look in this special window I screenshot above if I didn’t go through a tutorial. Mag+ makes a lot of sense after you learn everything there is to learn about it (obviously).

Interactive Map

The next major feature was an interactive map where the user could select a country in the Arab League they wanted to learn about. I found a good map to use that had all the countries highlighted and labeled, but after some quick user tests I found out that some of the labels were too close together.

Left: Portion of the original map; Right: Altered map (focus on Syria’s label)

Surprisingly, there was only one country whose label I had to move but once I moved it a bit higher my test users could tap every country label with no difficulty.

Lessons Learned

If I would have passed this project off to the client and they couldn’t use any individual aspect of the publication I would feel like the entire project was a failure. This project enforced the importance of user tests.

I was used to working at my own pace and getting things done when I wanted to, but this opened my eyes up to the schedule of clients. At this point in my career most of my clients request work for side projects so I need to set my expectations for a longer schedule. This project though was a good test for me to work with a client, and to work under an accelerated schedule.

Creating a publication for an actual group who could really use it pushed me to create something that works, is designed to their expectations, and is simple to use. This might sound like a no duh statement but not all projects meet those three criteria, especially in school. It’s easy to lower standards when the only people to see the project are a few fellow students and the professor.

I look forward to working with client more in the future to grow as a designer.