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 DESIGN
MOBILE APP
Role
UI Designer working collaboratively with the team's Content Strategist, UX Designer, and external Engineers
DELIVERABLES
High-fidelity wireframes, micro-interaction references, prototypes, and the initial design system creation.
DESIGN SYSTEM
Challenge ONE
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.
Take Inventory
Understand the current state of the mobile app. Gather all the different assets, colors, type styles, patterns, and reusable components used. Inconsistencies will appear.
design system
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.
Challenge TWO
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.
Design PROCESS
Listed below is my general process and edited as necessary.
DISCOVER
Stakeholder
Who
What
Audience | User-base
Needs
Pain points
Competitors
Likes & dislikes of peer sites
Brand
Style
Research
Peer comparison
Current trends
Inspiration | mood boards
Gut test (if applicable)
Define
Synthesize
My findings
UX findings
Look & feel
Design palette
Design takeaways
DESIGN
Ideate
Low-fi work session with UX
Design direction
Screen layouts
Mid-fidelity wireframe
Dot testing | Preference testing
Developer | Engineer discussion
Design palette layout options
Stakeholder review
Design
Hi-fidelity wireframes
Different states
Responsive layouts
Prototype mockup with UX
Collaborate with Dev | Eng
Review
Revise & refine
Internal review
Stakeholder review(s)
BUILD
Develop
Continue collab with Dev | Eng
Build & test
Reiterate | refine
Document
design handoff
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.
Visual references
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.
(Figma)
(Flinto)
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
NEXT STEPS
•
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
