Rapid Branding & Designing a
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.
- CHAPTER I:
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:
And it shouldn't be perceived as:
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.
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.
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:
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.
- CHAPTER IV:
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.
- CHAPTER V:
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.
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.
- 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.
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:
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.