KEEPING STUDENTS IN THE KNOW
The University of -X- is continuously adding the latest news and events for their 50,000+ online & on-campus students onto their iOS and Android mobile app.
UI Designer working collaboratively with the team's Content Strategist, UX Designer, and external Engineers
High-fidelity wireframes, micro-interaction references, prototypes, and the initial design system creation.
To get all the stakeholders on board in creating a living design system.
To have the stakeholders understand the need to update the overall look & feel to the latest, already existing styling that their main website is already utilizing.
Have the client recognize all the inconsistencies that are continuously piling up— creating an incohesive product.
Understand the current state of the mobile app. Gather all the different assets, colors, type styles, patterns, and reusable components used. Inconsistencies will appear.
The discussion about developing a complete 'living' design system for the mobile app kept falling into the backlog. The project was continuously delayed due to other higher priorities on other feature demands. Below is what was possible to put together during my in-between times.
After taking inventory, I began to organize and group the findings. I referred to the school's existing 'static' brand & style guidelines and pulled essential information and examples that would apply to the mobile application.
As part of my process, I referred to Brad Frost's Atomic Design method.
The collaboration begins
In Figma, I created this presentational style document that was to kick off the collaboration process. A place where the findings and essential information provided by the CS, UX, UI, and Engs could be shared and discussed. This was to be the beginning of putting the building blocks of a design system together: Brand & style guide information, pattern libraries, design standards, documentation, principles, toolkit, and more.
Working out the process— Collaborating with a new team while working with multiple stakeholders with different goals in mind. Ultimately, the challenging difficulties were within communication, collaboration, and different levels of transparency.
Listed below is my general process and edited as necessary.
Audience | User-base
Likes & dislikes of peer sites
Inspiration | mood boards
Gut test (if applicable)
Look & feel
Low-fi work session with UX
Dot testing | Preference testing
Developer | Engineer discussion
Design palette layout options
Prototype mockup with UX
Collaborate with Dev | Eng
Revise & refine
Continue collab with Dev | Eng
Build & test
Reiterate | refine
Clearly marking details and providing essential information within the annotations is crucial. The next step would have been the allowance to work directly with Engineers to improve the information exchanged during handoff to end the constant need to re-invent the wheel in certain areas. Direct collaboration with both sides would have made a world of difference.
Showing stakeholders and developers visual examples, whether prototypes or micro-interactions, is essential in presenting concepts on how they help improve and enhance the experience.
Room for improvement
Communication with stakeholders
Communication with external developers | engineers
Better planning on the process and how the information would be shared and implemented
What went well
Starting a foundation for a design system
Building relationships with the external engineers
What Didn't go well
Overall stakeholders were not aligned with their goals
Approved hi-fi handoff files were changed
Implementing the look & feel according to their already existing, updated style guides
To have all the stakeholders fully agree to commit to the design system
Push for meetings and work sessions directly with the Engineering team to have a clearer understanding of where we are all at and how to share, edit, and update information
Make it into a living design system accessible to all