Challenge
How might we help users set up their profile and preference so they will stay on the platform?
As a new startup in the news media industry, Logos aims to create a platform for readers to enjoy trustworthy articles and discuss freely. At the same time, writers can express their opinions and gain a reputation. In other words, anyone can apply to the writer and share their thoughts on the news.
To share with as many audiences as they can, writers tend to build up profiles to improve credibility. On the other hand, readers want to read the topic they feel interested in right after signing up. However, now the profile setting is hidden in a small section that is hard to find.
Also, the current brand guide is not consistent and lack clear documentation on how to use the visual materials. For example, there are several different typefaces in the same page, which made the website less professional.
Outcome
During my work, I built up an onboarding process for new users in collaboration with designers, the CEO, and the Product Manager. Besides, I renewed the brand guide on typography, color scheme and logo.
What I achieved:
1. Creating a smooth onboarding experience that encourages readers and writers to participate in the platform and personalize their content.
2. Building up the responsive design prototypes for the development team. For this version, I developed a mobile version design and web version design.
3. Reconstructing the brand guide, with a focus on consistency with typography, Color Scheme, and Logo.
The result is praised in the company and deploying to the website.
Current Status
Currently, there is no onboarding instruction while signing up. So if the writer wants to set up their profile, they need to find the profile tab to change the default state, which hugely influenced the user's willingness to participate in the community. Readers cannot choose the topics they are more interested in or subscribe to the writers they like; For the writers, they need to edit their profile manually before they forgot about it.
Currently, user needs to enter profile to set up their preference, and the whole profile is stuffed in a small modal window.
Process & Iteration
After observing how users set up their profiles with the older design, we realized that the process is way too long for our users. Therefore, the design team mostly discusses how to shorten the profile setting for writers and readers while building up an informative profile.
User Flow of onboarding process. (Click the image to zoom)
Originally, the professional experience area was crammed in the same page. During iterations, I found out that most of the professionals likes to highlight their professional experience to improve their credibility. Therefore, I eliminated some unnecessary input fields and expanded the critical sections (Work Experience and Education) to two different pages, so that users can focus more on what they want to show to the others.
As for the visual, I collaborated with Chien-Chun Wu, the other designer in our team, to test out the new design system. I devoted myself to build up a clean and professional color palette and typography with the components he designed. As a result, we benefited a lot from testing the new system in responsive design, which gave us thoughts on the accessibility of elements and style. Also, the new cohesive typeface makes the platform easier to read and access.
Final design
After several iteration, I developed the mobile and web version for onboarding process.
Users can now fill up their information through a simpler onboarding process, and get more immersed with the website because of the cohesive visual style.
Readers can customize their own news feed by selecting the topics they are interested in. The intuitive switch tag design is easy for users to control.
Takeaways
Collaboration is key.
Since we are building up a design system, and everyone is in charge of different parts, we spent a lot of time to discuss and test on each other's ideas, so as to make sure that the outcome is cohesive. In fact, we designers had our own feedback sessions to chat about our ideas and observations. This activity also help us bonding with each other and we became good friends since then!
