Prepr Network
As one of the leading startups for open education platforms, Prepr provides students and educations to collaborate and solve real world challenges. This project introduced the challenge of redesigning the website structure while improving the content’s clarity of Prepr. The solution was to keep the focus on content short and simple and create a design system for future pages.
Role: UX/UI Developer
The Project
The goal of this project was to redesign the Prepr website and simplify the content structure surrounding Prepr’s service and the PIE book which is a business methodology practice. From the many sprints completed and iteration designs, we focused on explaining the features and reasons to trust Prepr as a company to work with. Additionally, our team crafted a design system to solidify the brand’s identity and keep a guideline for future team members.
The Ideation Phase
I joined Prepr right when they had an existing website and was in the process of adding blog posts and new pages. During the initial meeting, the focus was on creating pages for Future Challenges and revising the homepage. We created sketches on our board which allowed us to pitch our ideas without spending time on high-fidelity designs first. The choice of prototyping software was Figma as it allowed live collaboration and other members to leave feedback.
Design Component System
The sketches gave us a solid understanding of how to approach the visuals. Creating a design system for all possible components helped speed the process of high-fidelity prototypes. Collaborating with other designers with this system creates a benchmark of how all pages should look visually.
High-Fidelity Mockups
The next step was adding the visual elements onto the wireframes using the design system we created. Since there were more than 20 pages to design, we organized art-boards based on their hierarchy in the sitemap. Once these layouts were approved, I created the pages on WordPress using HTML and CSS.
Content Auditing
In order to keep track of what pages existed and what need to be made, we created a content audit to organize all the pages on the website. This was effective in determining if pages needed to be removed or revised.
Integrating User Flows for Mobile
The Prepr app would need new features to implement badge creations for challenge winners. Adding new features on existing pages without interfering with the UI would be a challenge. Adding a new form or button would need to feel natural in the content of the screen. In this case, I was tasked with creating a user flow to migrate users’ challenge data to Bitbucket.
