iCON
Generational career tool for tomorrows professionals
Role: UX/UI Designer
Timeframe: 4 weeks
Deliverables: Site map, Wireframes, Style guide, High fidelity design, Prototype, Design specs
Tools: Adobe XD, Invision, Artboard Studio, Moqups, Lucidchart, Anima
Project Overview
iCON is a tool that’s made specifically for Gen Z with the purpose of creating, hosting & sharing opportunities for upcoming professionals. Users have the ability to participate in exclusive opp drops (opportunity drops) offering a range of rewards, from cash prizes to actual job opportunities. If a user has a creative skill or skills of any sort, iCON has opportunities for them to showcase those skills and win real prizes for sharing their work. iCON was founded by Marcus Noel and members of the Icon Gen Z technologies team. The team had already gathered a good amount of data on their target demographics and how they wanted the product to appeal to that group. They needed a designer that could bring their concepts to life and begin development of an MVP for user testing. I split the project into 4 phases that provided a set of deliverables at the end of each phase. The team requested the following deliverables
Discovery
I spent a couple meetings with the team going over insights they’ve gathered and different user scenarios. An interesting insight to acknowledge is, in less than 10 years Gen Z will comprise over 30% of the global workforce. And as time goes on, we’ll become more dependent on technology as humans. It would be beneficial if there was a tool that eased or even accelerated the next generations growth in the job market. The current systems may be a little too dated for this demographic which creates an opportunity to make something better. In these meetings I gained a much better perspective of what the ideal user experience needs to be and how these interactions need to play out.
Design Goals
Fuse aspects of today’s social media experiences into the job seeking experience.
Allow users to engage in collaborations & contests on the platform.
Make the experience as low friction as possible.
The Challenge
How do we take aspects of social media experiences and fuse them into the opportunity seeking experience?
What factors do we need to include to make the experience more engaging for a younger generation ?
Create interactions that have a similar feel to apps Gen Z use but modify the experience for the purpose of the product.
The Solution
Site Map
Once we established a base for the project infrastructure, I started drafted up a site map to map out all possible interactions. We wanted to include capabilities similar to an app like Linkedin but the experience needs to be fixed for a younger audience. During this process the team informed me they wanted to explore some gamification aspects & possibly implement them into the experience. We met a few times over a couple days and decided to make a feature called iCOIN. This feature is an in-app currency awarded to users for engaging or completing interactions.
Core Features
Opp Hub
This feature is a hub with curated opportunities specific to the users skills or interest.
Create & Collaborate
The create feature allows users to create opportunities or offer collaboration projects for fellow users.
Cash Out
Cash Out is essentially a bank that users store iCOIN & can monitors their coin accumulation through their time spent on the app.
Discover
Discover is a feature that allows users to search & explore for other users or project types.
Wireframes
Wrapping up phase 1, I started drafting up rough sketches depicting pages detailed in the site map. I shared the sketches with the team and we began discussing what visual elements we wanted to include or take out. In our initial brainstorming sessions we came up with a handful of ideas but when I tried to apply them to the design, the lay out became cluttered. The overall goal here was to create a clean interface that comfortably displayed all relevant info, we didn’t want to overload users with too much info or make the screens too busy. We ended up taking out some features just get a better feel for the core apps and made sure to only include elements essential to the MVP goal.
Some of the ideas we discussed in that initial brainstorming session were strong and they will probably end up circling back to some of them. But at that specific point in the project, we needed to execute on the MVP experience before we started adding on the ‘nice-to-haves’. It was a time consuming process due to amount of times we went back & forth, but we didn’t lose any time and were able to move into the next phase confidently.
Style guide
Moving into phase 2, I began developing the visual design elements through incorporating brand colors, introduced icons & other elements that are depicted to the right. The color scheme was already established with purple, yellow & pink being the main colors. I added lime green for a slight background glow for some elements, a light teal & purple color for some secondary buttons & elements. The additional color added were fundamental in displaying the contrast between the more important page elements which we wanted to express through our bright pink color.
When we were going over the icons, the team wanted be abstract. I initially pushed back on this due to the fact we were creating an MVP and that we didn’t want users being confused when they are trying to navigate the app. The team believed it was one of a few ways they could make the product stand out but I reminded them that this could effect the experience in a un favorable way. We came to a compromise by including text under the bottom navigation so even if users didn’t recognize the symbol they could read the text below the icon and navigate through their experience.
High Fidelity Design & Prototype
Once we established our style guide & aligned on our layout approach, I began building the final design using Adobe XD. The final design took 3 days to flesh out and another day & a half to tighten up loose ends. To the left I’ve included a couple examples of the high fidelity mock ups created in ArtBoard studio showcasing the final designs. We wanted the experience to be lively and fun while maintaining a minimal clean design. It was essential that we diversify the product from other job or opportunity seeking platforms and encourage a more engaging experience which think we executed well.
After finalizing the design, I started linking together elements through Adobe XD’s prototyping tool to demonstrate the MVP experience and gave us a peek of what the final product would be. I utilized the some of XD’s more advanced features like component states to bring the prototype to life and show off some core interactions. Upon completion, I shared the prototype with the team for feedback and we began to critique the experience to trend toward the collective goal. Interestingly, we found that taking the time in the wireframing portion proved to be useful. If we had tried to include most of the potential features we discussed in brainstorming, the layout would’ve been a mess and could’ve easily overload the user.
Design specs & Hand Off
The closing phase of the project was a bit more technical. I had to document the design specifications of all the visual elements I’d produced and prepare code for the development team. Collecting the the spec information wasn’t as challenging as I initially thought. I found that labeling and elements and components as I created them saved an enormous amount of time and headache in the final phases of the project. I’ve made the mistake of waiting until the last minute to organize and label all my elements and it makes for a less than ideal endeavor. I gathered all of the files and began transferring the design into code using an XD plugin called Anima. This plugin is powerful and it allows designers to easily transfer designs into applicable code for developers. The final phase took 4-5 days to complete and we closed out the project within the agreed upon timeline.
Final Thoughts
Even though this is a career oriented app meant to create and share opportunities for new professionals, we wanted the experience to be fun. Theres a lot of monotony when people are looking for new jobs or opportunities to showcase skills. Even though this is an MVP, we still wanted thought it was important to differentiate from the generic job searching experience. Platforms like Linkedin & Upwork are great tools & excellent examples of feature rich products. But these tools were built for the every day established professional who cares less about the experience and more about an apps capacity to help them. The new generation that has already began trickling into the workforce needs a different approach.
This experience was valuable in the fact that it was m second professional project working with cross functional teams under a hard deadline. I was pressured at times but I was in constant contact with the team and it really helped move the project along by communicating often & effectively. To be honest I wasn’t sure if we were going to be able to complete the project in such a small window and I conveyed as much to the team but we were able pull it off.
Icon is currently in the process of developing the app and should be ready for launch fall 2021.
