Josh Magno, UI Designer

SkillEx

Where everyone is a teacher and classes are currency

 

SkillEx

Rapid Branding & Designing a
Codeable Website!

 

Client:
Code Platoon

Role:
UX/UI Designer

Time:
4 days

Platform:
Website

Tools:
Sketch

Deliverables:
Hi-fi mockup

- Prologue

SkillEx is a concept app that allows users to teach one-on-one classes with other users; classes are rated by students, and teachers earn points that can be redeemed for classes with other SkillEx users.

As part of their final project, a team of soon-to-be developers at Code Platoon proposed a website that encourages interaction between users. However, before they could code SkillEx, they would need a design to code.

I was approached to brand and design the landing and user pages of the SkillEx website. My main challenge?

Direct the design process and execute it all in four days, solo.

Say whaaaaat!

Say whaaaaat!

 

- CHAPTER I:
Defining SkillEx

Or, Interviewing developers as clients!

The developers walked me through the primary actions a user could take in SkillEx; create an account, look for classes, sign up for a class, message a teacher, and rate the teacher. This basic user flow eventually helped shape our process in designing the wireframes.

To get an idea of the mood SkillEx should have, I asked the developers for adjectives that should and shouldn’t describe the interface.

SkillEx should be perceived as:

Artboard.png

And it shouldn't be perceived as:

Artboard Copy.png

Although this meeting happened before I could assemble gut test images, the developers did emphasize how the idea of untapped potential and an open atmosphere should come through in the design.

 

- CHAPTER II:
Competition & Inspiration

Or, What's shared between sharing services?

I looked to five different sites and services that focus on sharing information in in-person classes or through videos. I discerned what UI patterns worked well, and how they could be implemented in SkillEx. Also, I could see what the products lacked, and how SkillEx could fill those needs.

My direct competitors were Lynda.com, Dabble, Verlocal, Coursera, and SkillShare, Inc.

Done well: cards organized information, brand colors were used minimally, high quality photography was used, and search functions are prioritized.

To improve: cards across all sites look the same, some pages have little explanation how the service works, brand colors can be incorporated more, and darkened photography makes the site feel heavier.

Based on what direct competitors could improve on, I found successful examples of alternative card layouts, succinct landing page information, and strategically minimal use of brand colors. I looked to Task Rabbit, Dribble, AirBnB, and Uber for these sources of visual inspiration.

Task Rabbit immediately shows what the service is and how it works, AirBnB and Uber tastefully incorporate the brand colors into the site, and a Dribble designer designed a succinct but informational layout for cards.

 

- CHAPTER III:
Design Principles

Or, Quickly setting up parameters

Knowing there was a time crunch on this, I didn’t want to have to create and refine design principles. I made a few simple rules to keep myself in line with the results of the visual competitive analysis.

Asset 8.png
 

- CHAPTER IV:
Cleaning Wireframes

Or, King of cards

Although I’ve focused only on UI for my DESIGNATION career, I experimented with being a UX designer for this project; I helped the developers talk about what features they imagined users would need, what and how many tasks a user would typically accomplish, what pages they would see, and how those could be merged into rough wireframes.

From there, I took the rough wireframes and cleaned them. I introduced a navigation menu and a footer, as well as implement a card system to organize class details.

The biggest changes I wanted to implement from the wireframe sketches were to create a navigation menu, a footer, and use cards to contain and organize information.

The biggest changes I wanted to implement from the wireframe sketches were to create a navigation menu, a footer, and use cards to contain and organize information.

Account creation is updated.

Account creation is updated.

The class creation template is similar to an expanded class card.

The class creation template is similar to an expanded class card.

The home page for SkillEx is updated to have more hero images.

The home page for SkillEx is updated to have more hero images.

 

- CHAPTER V:
Branding SkillEx

Or, S is for "Style Tiles I Skipped!"

I created a word association cloud to find moodboard visuals instead of possible logo directions. Having a page full of nouns associated with SkillEx, I found moodboard inspiration sources and related images.

I pulled color palettes from moodboards and looked for feedback from the developers. Their favorite was the blue and orange-based “magic” moodboard, so I continued with that approach. To save on design time, I didn’t develop style tiles and jumped right into developing high fidelity screens.

"Magic" moodboard:  inspired by the magic tree image with foxes, this moodboard and color palette was the warmest approach.

"Magic" moodboard: inspired by the magic tree image with foxes, this moodboard and color palette was the warmest approach.

“Bubble” moodboard:  the color gradients and general quirky and relaxed nature of bubbles inspired this approach.

“Bubble” moodboard: the color gradients and general quirky and relaxed nature of bubbles inspired this approach.

“Confetti” moodboard:  the personal nature of parties and confetti inspired this approach.

“Confetti” moodboard: the personal nature of parties and confetti inspired this approach.

When generating ideas for logos, I wanted to play around with the “S” as a monogram; Verlocal, AirBnB, and Dabble succeeded in creating simple logos, and I thought there was a lot of opportunity in the S swirl and the idea of exchanging skills.

Playing with typography!

Playing with typography!

Iterations of the "S" logo showing an exchange.

Iterations of the "S" logo showing an exchange.

I drafted logo ideas and boiled them down to a handful of options; after a user test showed two favorite options, I experimented with applying the brand colors.

This final design was chosen for its simplicity and potential for application in an app button and merchandising.

Winner!

Winner!

 

- CHAPTER VI:
Final Desktop Screen Designs

Or, Using lots of accordions, drop shadows, and photography

Remembering work from ChiTAG, I used accordions to condense large amounts of information in the cards. Also, preference tests showed that users liked the drop shadows to add a level of ‘believability’ in the cards.

Finally, when designing the landing page, I had the beautiful luck of landing on a website that specializes in high quality and wide angle stock photography; these contributed and became another staple of the SkillEx brand.

Homescreen for all users.

Homescreen for all users.

Standard card layout for class lists; expanded card shown.

Standard card layout for class lists; expanded card shown.

Users can create a class by entering information in a class card template.

Users can create a class by entering information in a class card template.

Logged in user account shows schedules for past and upcoming classes.

Logged in user account shows schedules for past and upcoming classes.

Users can message the teacher of a class directly while on the class card.

Users can message the teacher of a class directly while on the class card.

 

- Epilogue:
Takeaways

Or, That went fast!

Given the time constraints, I didn’t get to go through the entire design process I’ve come to know and love. While I think SkillEx would have benefitted from more user tests and a few more rounds of brand and logo development, I think my final approach fits the overall design principles and is codeable for a developer bootcamp!

I think it's also worth recognizing that skipping the style tiles process really helped in saving time; while there's an obvious risk of not really knowing what a design approach looks like before it's developed, knowing the final product would be minimal certainly cut down on the need to create different iterations of UI patterns.

If I had more time, I would consider and recommend the following:

Asset 13.png

I understand this was a short project, but I had a ton of fun with it. This is the shortest design sprint I’ve had to go through, and I’m glad to know that I can generate this much in a short span of time.