Creating the Fan Expo App Adobe GenPro UX/UI Design

Over the next 5 weeks, I'm going to learn all about UX/UI and document it here. What is UX? Well to me, UX means creating non-frustrating digital experiences.

So what experience can I make non-frustrating? Well, work with what ya know. I know ComicCons. As a frequenter of said cons and a frequent cosplayer, I know how much of a headache such a thing can be. The convention center is huge, crowded, noisy and the wifi and cell reception sucks.

Solution: create a very simple wayfinding and schedule app to use at the event. It has to be basic enough to load up without using too much data and to load quickly (no animations or heavy graphics). This is a place where nearly everyone is using their phones all the time, taking photos and sharing them on social media.

I've created 3 personas based on my own and fellow con-goers' experiences. I have either experienced personally certain aspects of these personas or am friends with someone who has.

There's the newbie:

The family:

And the experienced cosplayer:

Next, how to lay out the app. We start with a pile of post-its

Oh what, oh how, to organize? Here was our first try:

I'm trying to keep this app really simple. Reception and signal inside some of these huge convention centers is not great. We ended up combining and removing a few things to keep it easy.

Fewer post-its = easier use + faster load times.

Finally, the Site Map:

Simple! I hope!

Next up, I created wireframes to test the app out on some users. After thinking some more about the navigation and what a user might need, I added some options back in on the Maps section.

Here's a video of one of the testings. The (slightly) willing participant was my lovely husband

Next, just to practice, a few cleaner wireframes using Adobe XD.

When "basic" isn't bad.

Next up, creating a mood board. I'm generally not much for mood boards. In personal projects, I've already thought out what I want the thing to look like. For this project in particular, I'd be creating a product for a company that already has a look. So my "mood board" was the front page of their website.

It already has the colors I would use, some texture in the background at the header, and a logo.

Now a Style Tile to put all the elements together. I'll admit, I love the phrase "style tile." So rhym-ey.

I tried to find a blocky font to go with the heavy font of the logo. I wonder if I should have made the color and texture boxed a bit farther apart and possibly added hex codes to the color swatches.

And here are 3 sample layout screens. I need to find a better way to add those forward and back buttons.

Made with Adobe Slate

Make your words and images move.

Get Slate

Report Abuse

If you feel that this video content violates the Adobe Terms of Use, you may report this content by filling out this quick form.

To report a Copyright Violation, please follow Section 17 in the Terms of Use.