Creating a career blog and online community for software engineers around the world to inspire each other with their professional experience and stories.
PROTOTYPE.
DEMO.
Introduction
This project is the brainchild of two experienced software engineers who have worked at a top tech company in the US. Recognizing the challenges faced by newcomers and international workers in the industry, they aim to create a career blog. The blog will provide first-hand professional insights, stories from successful individuals, and practical advice to help newcomers navigate their path to tech companies or Silicon Valley more efficiently. By sharing their experiences and knowledge, the founders hope to empower aspiring professionals and enable them to avoid common pitfalls.
My Role
I'm the solo UX/UI designer in the team and working closely with a front-end developer, Billy Novrando, and two software engineers, Mira Chen and Reinardus Pradhitya.
My responsibilities: Design Research, Visual Design, Branding, Style Guide, Design System, Wireframing, Prototyping, Testing, Solving UX/UI problems during the development, etc
Tools
For Phase 1
Project Plan
Sitemap
In the upcoming phase, we plan to enhance our website by incorporating additional pages and functionalities. These include sign-up/in, search, category sorting, subscription form, contact us, Q&A, contributors' page, and more. Additionally, as soon as our initial batch of story content is prepared, we will revamp our homepage design to optimize the user experience and facilitate easier access to a wider range of stories.
During the initial discovery stage, I developed the 1st version of the sitemap to provide our team with a clear understanding of the website's structure. This sitemap will prove beneficial not only for the team but also for our developer, as it can be utilized to enhance the site's SEO in the future.
Design and Development
Low-Fidelity Wireframes
At this stage, I took the initiative to provide the team with not only 5 webpage layout design samples but also 10 inspirational moodboards. We collaboratively decided on the final version that best resonated with our current goals.
Recognizing the importance of responsive designs, I prioritized their development by creating low-fidelity wireframes for desktop, tablet, and mobile adaptations all at once. This proactive approach enabled us to effectively plan out the design's responsiveness, ensuring a seamless user experience across different devices from the beginning.
Style Guide
To establish a cohesive and visually consistent visual experience and design, I began by developing a comprehensive style guide and branding. This will serve as the foundation for our Minimum Viable Product (MVP) and provide the team with a clear direction.
Additionally, our team engaged in discussions regarding the future expansion of the blog/community. Recognizing the potential benefits, I proposed the implementation of our own design system. Currently, I am actively working on creating this design system to ensure a standardized and efficient approach to our design process.
High-Fidelity Wireframes
After applying styles to the low-fidelity wireframes, I presented the team with the initial high-fidelity prototype, gathering valuable feedback for further refinement.
Moving forward, I collaborated closely with our front-end developer to implement the design. To aid their familiarity with Figma, I supplemented the design file with detailed annotations. To ensure accurate implementation, our team holds bi-weekly Q&A meetings, utilizing Jam, a fast bug-reporting tool and Chrome extension, to review and validate the implemented sections of the website.
Conclusion
Takeaways
Working closely with my colleagues was a truly enriching experience. We embraced an agile workflow, meeting bi-weekly to collaboratively design and develop features. Taking the lead in the design process allowed me to tackle various challenges head-on. At times, bridging gaps in front-end knowledge was a hurdle, but in our respectful environment, we all learned and grew together, both as a team and individually.
Next Steps
We are waiting for all the articles to be ready to continue the next phase of developing the website. Meanwhile, I'm taking the chance to develop and improve the design system. Leave comments, feedback, and potential solutions on the implemented design on the website to our front-end developer.
In the next phase, more features will be designed and developed for the website, such as a search system, sorting, categorizing, subscription page, user account, and more.
*\ Thank you for your time! /*
************************
Our Goals
For Phase 1
