Client: AIGA Chicago
Duration: 4 weeks
Role: UI/UX designer
Platform: Responsive website
Tools: Sketch, Principle, InVision
Deliverables: Branding, moodboards, style tiles, high-fidelity screens, prototype, UI kit, style guide.
Client: AIGA Chicago
Duration: 4 weeks
Role: UI/UX designer
Platform: Responsive website
Tools: Sketch, Principle, InVision
Deliverables: Branding, moodboards, style tiles, high-fidelity screens, prototype, UI kit, style guide.
01 The challenge
02 User Persona
03 Design Principle
04 Competitive analysis
05 Moodboards
06 Style tiles
07 Branding
08 Wireframe evaluation
09 Mockups and iterations
10 Interactive prototype
11 UI kit and Style Guide
12 Final thoughts
The AIGA Chicago Mentor Program is a communication platform where designers gather to share insights, connect to exchange inspirations and collaborate on projects. Designation sponsors the mentorship program and, at the suggestion of David Sieren, AIGA Chicago President, developed a digital product that enables mentors and mentees to effectively communicate, interact and maximize the engagement through regular bursts of activity.
A previous UX team from Designation took into account the full spectrum of the AIGA mentor/mentee experience and developed a workable wireframe before our team took over the job. As UI designers, we focused on discovering a comprehensive visual language to prompt the communication between mentors and mentees.
Original wireframe developed by previous UX team
Currently, AIGA Chicago’s Mentorship program connects teams of 8–10 mentees with a mentor for ten weeks. Each team focuses on a different theme such as job changes, developed skills, and networking, etc. However, due to the lack of communication, mentees often stop attending and up to half of the teams fail before the completion of the program. Mentees needed a platform which can provide them a conversation starter to initiate communication with their mentors and the other mentees.
The UX team's research also revealed that when mentees are given limited information about the program prior to its start, they often drop out of it. The problem was addressed by providing much more detailed information about mentors as well as teams. A wireframe for the group profile page was created to help mentees make informed decisions. However, the information volume was big, and users had difficulty in capturing the most important information they needed.
According to our persona, we noticed the majority of mentees were in their early- to mid-20s and were new graduates. All mentees and mentors had design backgrounds from across disciplines and worked or been willing to work in the design industry. Therefore, the target audience of the mentorship program was young creatives.
Based on the research conducted by previous UX team, the wireframes and our understanding of target users, we came up with three design principles to guide our design exploration.
One of the users’ pain points was limited information given before the start of the program. To solve this problem, the previous UX team worked out some content-heavy wireframes of the program details to help mentees discover the best mentor and program. My design should use white space, card patterns, and typographic hierarchy to organize that information for easy readability.
Our design should also encourage effective communication between mentors and mentees to prevent a decrease in the completion rate. I need to use subtle animations, attractive graphics, and passionate colors to engage the users.
The platform was designed for young creatives. Also, AIGA inspires and encourages designers to cross artistic boundaries. The platform should be modern unique, artistic and appealing.
To determine the best course of action for the platform’s look and feel, my team searched the competitors and gathered inspirations from out-of-category products, including RookieUp, Meetup, Mhub, Promeets, LinkedIn, and Skillshare. We noticed that the extensive use of card layouts, white space and visual hierarchy by these competitors broke down the content into digestible chunks effectively. They stuck to friendly sans serif typography and realistic images to ensure readability and eliminate uncertainty. We kept these takeaways in mind and started design exploration by building up moodboards and style tiles.
Drawing inspiration from competitors and keeping our design principles in mind, I then created three divergent directions to present visual languages to our audience at an earlier stage.
Moodboard 01
I choose contrast colors blue and orange associated with youthful and vibrant as the theme colors to convey the idea of energetic and passionate to the target young creatives. I utilized wave pattern and round shape to soften the strong emotion delivered by the colors.
Moodboard 02
The second moodboard was sleek, high-class, and elegant which was more welcoming and friendly look. I basically brought warm color palette of pink, green and gold and played them with the hexagon shape and organic pattern.
Moodboard 03
I sought a sense of pastal subdued, and clean for the third moodboard which was distinct from the other two. I chose light purple and light orange to invoke gentle and calm moods. I utilized triangle shape and watercolor pattern to active the overall interface.
I translated the moodboards into style tiles to understand which was my audience desired style and look. I interviewed about ten people in Designation including my creative director, DIRs, teammates, and other peers and all of them preferred the first style.
Style tile 01
Style tile 02
Style tile 03
Exploration of logo
In the meantime, we were tasked with thinking up a name and a logo that suited the platform and users’ needs. To bring bring concepts into clear focus for my audience, I brainstormed the objectives related to features of the platform such as professional, engaged, young, and connecting. Then, I brought in figurative objects related to these objectives: bachelor cap, bamboo shoots, bridge, and magnifier. I combined the letter “M” with them and found four potential directions for the logo.
One M standing on another. It looked like a bamboo shoot and indicated that with the help of mentors, mentees could go up to a higher place. It also represented youthful and connecting.
Two Ms crossed together. It was an abstraction of a collar with cravat and meant professional, educational and connecting.
Two "M"s side by side, like a bridge. It implied mentors and mentees were connected and engaged in this platform.
A broken M looked like pieces of a magnifying glass. These pieces were magnetically attracted by each other. Creatives gathered in this community to build up networks and influence each other for a better career.
Two Ms interlaced together and looked like a mountain. It indicated that young creatives climbed up and over the mountain by joining the program, they would be motivated to get to a higher place in their career.
Digitalized logo options
To create a name, I used the same logic as logo design to start with the word “mentor” and adjectives of brand features and finally got two candidates, COMEs and MMDepot. COMEs came from three words “connect,” “mentor” and “mentee.” I combine the first two letters of each word to abstract it sounded like “comes”.
Brand name "COMEs" and logo options
MMDepot meant the platform was a place where mentors and mentees gathered and from which they set out. I consulted my creative director and teammates to gain their opinion and insight for the name and logo. While taking through my goal of branding, I landed on the fifth logo and MMDepot which matched the core value of the brand: positive, connecting and educational.
Final Branding
Before mocking up high-fidelity screens, I evaluated the wireframes from the UX team and incorporated the improvement to create new wireframes. The new wireframes could better reflect our design principles and fit our users’ expectations.
Original wireframe
Improved wireframe
Sign in page
I added another welcome page before the sign-in page and provided quick links for guests to review the information of mentors and groups, and research the website with keywords from the welcome page. For the sign in page, I removed the “create an account” forms to keep the interface simple and focused.
Original wireframe
Improved wireframe
All groups page
I minimized the information on each card to show the group name and mentor name only. I thought too many details of the group would increase the information volume on each card and distract user attention. To save the user time, I removed the “learn more” button to make the whole card clickable and considered incorporating microinteractions to engage users.
Original wireframe
Improved wireframe
Comparison page
I minimized the information on each card to show the group name and mentor name only. I thought too many details of the group would increase the information volume on each card and distract user attention. To save the user time, I removed the “learn more” button to make the whole card clickable and considered incorporating microinteractions to engage users.
Original wireframe
Improved wireframe
Group detail page
This was a content-heavy screen. Users had a hard time focusing since too much information accumulated and lacked hierarchy. In the improved wireframe, I reorganized the chunk of information to break it down so users could easily digest it. I adjusted the priority of information according to the user status. For registered users, the program outline and progress would show up while guests saw “what you will learn” and “about the group” first when they landed on this page.
I enjoyed dissecting these wireframes and learned a lot about how minor adjustments escalated the quality of the user experience. I also got a chance to implement my knowledge of UX design by incorporating my design principles into the wireframes, and I was excited to start mockup designs.
In the first round of design, I concentrated on translating my style tile into the wireframes and enthused about experimenting with colors and UI patterns. I barely considered about these interfaces should exist to enable interaction, and I realized I needed to be more deliberate to design a meaningful color system and choose interactive UI elements. I expanded the color palette, using blue and red to indicated navigational items while I used a lot of gray for balance. I went back to the wireframes and dug out the opportunities to incorporate more interaction between users and UI elements.
First round of design
Second round of design
With rounds of iterations on both UX and UI, I was glad I explored the best balance of color, interaction, and layout and finally produced an exciting design.
This prototype was created by Principle to illustrate interaction design which was desired by our audience.
High Fidelity Mockups
In the final deliverables, a marketing site for responsive website was created.
UI kit
At the end of the project, I created a comprehensive style guide to use as a branding and visual communication tool with future designers and developers.
We did this project in the immersion phase in Designation without the need to meet the client. However, during the project’s four weeks, I dove into research and best practices while solving both usability and desirability problems. With my experiment and exploration, I deepened my understanding of the design process which prepared me for upcoming projects.
