Trainee at Elisa: Cross-platform unified design system, navigation redesign and more.
Cross-platform unified design system
An overview page in Figma for designers
During my traineeship, I contributed the Elisa Design System (EDS) by creating the reusable and neat components, aligning the layout across code and design, working closely with product owner, designers and developers.
Fig. Design component in Elisa Design System Storybook
Before, the EDS contained multiple inconsistencies. 1) The designs in storybook (code infomation) and in Figma (design platform) are not aligned. 2) Components and experienmental components are scattered in design files in different places 3) Designers have trouble using the components in the right way.
I created the instance overview page in Figma for all of the components so that designers can check at one glance instead of going into different pages and guess where they can find it. The layout is aligned with storybook and pages are coded with color for missing design.
Fig. Overview page in design system
The new layout received excellent feedback from designers and developers. The work added value to all users of the EDS as they can trust the latest version is available both in design and code.
Navigation redesign (WIP)
Unfied experience under different navigations
It has been years since last time design for navigations under Elisa domain. However, from users' perspective, they 1) Have inconsistent visual experience while navigating across different services (the layout of the interface) 2) Have problem finding the way to login and switching between different services (hard to find the way back and go forward) From stakeholder view, they wouold love to keep the unique features they have on their own navigation.
Fig. Current state of the navigation
A navigation redesign project opened inside Design System Team. We interviewed and had disccussion with over 25 people inside the company to understand the needs from different teams and limitations. In the end, we came up a new design solution that minimized the impact on their team own navigation design, but at the same time, maximumed the user experience cross different services.
Design process
- Research: Stakeholder Interview, Design review
- Design iteration: Design critique, User testing
My role
- - Co-operate with other designers on the navigation design
- - Refine the design according to the result from stakeholder inteview on different breakpoints
- - Build flexible design components with variants for mobile, tablet and desktop.
- - Present the design work to stakeholders
- - Plan and conduct the user testing, analyse and deliver the result
Fig. Feasible and scalable design by using Figma variants
Learning and feeling
For me, navigation redesign is a project where design and collaboration are highly integrated. Presenting design is a fun experience because when people look at the design from a different perspective, they ask unexpected questions that help us better understand their concerns, improve the design and move the project forward.
The experience of doing user testing in store and chatting with store staffs helped me learn more about user habits, how to talk to participant in a understandable way and enable me to gain a wider view of different products.
More..
Besides the Figma organization and navigation redesign, I also exlpored and contributed to
Ways of Working in Figma documantation: improving the designer workflow in Figma, providing practical and detailed guideline for using Figma both for developer and designer (eg. how to use design system, mamage permissions, inspect design fils)
Elisa prepaid website quick refinement: a design experiment based on the Design System, refreshing the previous UI for prepaid website.