SAP - iPad Sidebar and iPhone iOS
Please take a look at the project here.
SAP is a leading provider of business software and specializes in helping companies enhance their operations. SAP's focus is on revolutionizing how businesses manage their processes, from finances to supply chains. Through SAP's comprehensive suite of applications and services, they empower their customers to thrive financially, adapt to change seamlessly, and contribute positively on a global scale.
I was in the SAP Fiori design system for iOSD mobile team covering for someone's maternity leave in Germany. Our mobile team was responsible for creating iOS and Android components for our App teams to use when building their apps for customers to use.
In addition to this project, I also helped with the UI Kit revamp where we cleaned up all of our components in Figma making it easier for our App teams to customize the components, better usability, and more accessible.
I was in the SAP Fiori design system for iOSD mobile team covering for someone's maternity leave in Germany. Our mobile team was responsible for creating iOS and Android components for our App teams to use when building their apps for customers to use.
In addition to this project, I also helped with the UI Kit revamp where we cleaned up all of our components in Figma making it easier for our App teams to customize the components, better usability, and more accessible.
Business requirement: Enhance the iPad sidebar + mobile for additional features so that the app teams can leverage them to build apps for SAP's customers.
Challenges: During the requirement intake, I interviewed stakeholders and at the time there was a business need for certain features. I then started to design the desired features because there was a business need from at least two stakeholders but then later in the project there was a decision that the features were not needed and I had to archive them. The other challenge was picking up on the project when it was left off from a previous designer and play the role of the detective to backtrack the steps on what was done. Taking into account how the features from the iPad would translate to a mobile app was also challenging when I got to the specification phase. I had to study several examples on how some apps from Apple's iPad and iPhone handled such behaviour such as orientation views. Our team was also responsible to use Apples Human Interface guidelines and when researching various Apple apps, they were not always consistent whether it was color or interaction behaviour. I think that not having a dedicated developer assigned to the component was also a challenge because I had technical questions from the beginning of the project. The workaround was to address my questions directly to other developers that were not going to be assigned to my project.
Challenges: During the requirement intake, I interviewed stakeholders and at the time there was a business need for certain features. I then started to design the desired features because there was a business need from at least two stakeholders but then later in the project there was a decision that the features were not needed and I had to archive them. The other challenge was picking up on the project when it was left off from a previous designer and play the role of the detective to backtrack the steps on what was done. Taking into account how the features from the iPad would translate to a mobile app was also challenging when I got to the specification phase. I had to study several examples on how some apps from Apple's iPad and iPhone handled such behaviour such as orientation views. Our team was also responsible to use Apples Human Interface guidelines and when researching various Apple apps, they were not always consistent whether it was color or interaction behaviour. I think that not having a dedicated developer assigned to the component was also a challenge because I had technical questions from the beginning of the project. The workaround was to address my questions directly to other developers that were not going to be assigned to my project.
Tools: Figma
Component design process:
1. Kickoff interviews - Conducted initial interviews with the stakeholders and app teams if certain features on the iPad sidebar were needed. We also prioritized which features were needed first. From there I also revised the Jira tickets as it needed more refinement to include more details based on the kickoff interviews with the stakeholders. We had several touch base points after my progress with designing the components features for the sidebar that way I maintained a good relationship with my stakeholders and provide full transparency on my progress.
Component design process:
1. Kickoff interviews - Conducted initial interviews with the stakeholders and app teams if certain features on the iPad sidebar were needed. We also prioritized which features were needed first. From there I also revised the Jira tickets as it needed more refinement to include more details based on the kickoff interviews with the stakeholders. We had several touch base points after my progress with designing the components features for the sidebar that way I maintained a good relationship with my stakeholders and provide full transparency on my progress.
Some of the desired features included: an enhanced active state to indicate the user where they are on screen, creation of sections/separators to group information into categories, titles for the categories, touch targets, variants to show or hide the avatar in Sidebar footer, and hiding items.
2. A/B testing - One of the features that we wanted to test was color for the selected active state on the Sidebar. I partnered with a Researcher to find 6 participants. We hopped on a virtual screen sharing where they can click through the prototype of two different flows + a grey and a blue active state. They 2 participants thought that the color grey did not stand out enough to indicate that they are in that particular screen. The other 4 participants thought that the blue active state was a better indication of where they are on the screen. Based on the findings, the blue active state was a clear winner but also aligned the best with Apples Human Interface Guidelines.
3. Parity with other designers - Based on the interview kickoffs and following Apple's HIG, I had to align with other mobile iOS and Android designers to achieve parity. Our design system comprises several components. Often, when designing features for the Sidebar, some components overlapped with those designed by other designers. Design critiques also helped during the design and research phase to showcase progress and ask questions on challenges that have come up.
3. Parity with other designers - Based on the interview kickoffs and following Apple's HIG, I had to align with other mobile iOS and Android designers to achieve parity. Our design system comprises several components. Often, when designing features for the Sidebar, some components overlapped with those designed by other designers. Design critiques also helped during the design and research phase to showcase progress and ask questions on challenges that have come up.
4. Accessibility - We also have a specific accessibility team where I participated in their consultation hours to share my work and learn from them. Based on the feedback that they provided, I would indicate on my specifications the screen reading order, keyboard focus and tab order for the iPad sidebar and the contents of the right of it.
5. Specifications - During this phase, I had to create detailed specifications of all the features that were going to roll out during the next sprint release. The specifications are mainly for the assigned developer to better understand the interactive behaviours, colors, different states, and orientation behaviours on both iPad and iPhone.
