Building Enterprise apps, in a whole new way.

BUILD is a no-code based prototype suite of design tools in the SAP Cloud Platform that empowers SAP customers, partners, and business analysts to build enterprise apps and validate any design their own clients, while learning the design-led development process. I was designer #3 on the team and I was responsible for the UI shell and user Interface controls. enhanced the usability of the most frequently used UI5 controls in BUILD’s Prototyping Tool.

Role

  • User Research/
    Interviews
  • A/B Testing
  • UX/UI Design

Industry

  • Enterprise, B2B
  • ERP (Enterprise Resource Planning)

Timeline

  • Company: 3 years
  • Project: 6-7 months

Launch Site

Background Story

Almost 3 years into the company as a Sr. UX Designer at SAP. One day, my manager asked me if I wanted to work on a 'special' project with 'X' team. At the time I was eager to work on something brand new (completely from scratch) so I quickly jumped on the opportunity. When I joined, there were only 4 people and it was just an idea and a couple sketches on a whiteboard here and there. The code name for this project was called 'Norman' and we couldn't share anything until we proved to our stakeholders-- we could make this a viable product.

Long story short, we knew the problem we were trying to solve was real and the hypothesis had already been validated, but, what I found interesting was, the company attempted to create this product almost 4 times in the past but no one had succeeded. Eventually, one team in Germany got close but the product pivoted into a different direction and it became Web IDE (Integrated Development Environment), a web-based tool that empowers users to rapidly create and extend applications for browser and mobile devices. It simplifies the end-to-end application lifecycle: prototyping, development, packaging, deployment, and customer extensions for SAP Fiori and SAPUI5 applications. Basically, almost the opposite of BUILD.

In conclusion: I was one of the first designers on the team-- later they got more traction and grow to over 100+ and the impact we made as a team is unscalable. Very proud to have worked on this project with such a talented team!

Improving the Panel and web Application

The entire concept for Build was a great idea but for engineering, it was nightmare... When I started designing, I came across a lot of usability problems and I knew the 'UI Shell' had to be broken down into several parts. I also decided to come up with a new interaction model (as shown in model: A1, A2). During this process, the team also found critical UI design challenges and inevitably we decided to redesign the entire framework several times.

Project Organization

As Build became more powerful and complex, the product team was asked to support organizing content and files as a project. Build had a feature called Boards to organize your projects. However, the design was very confusing and almost unusable. The wireframes below were a new design proposal.

Ideations

After breaking the UI Shell in separate parts, I began to explore the integration notifications based on user feedback and explore different UI options-- using the logo as a color reference, adjust spec measurements, and balance the overall hierarchy composition: History Navigation, Submenu tools, and micro animations (side bar).

Feature Automation

After observing the users struggling with overwhelming options, I decided to enlarge the most common features they were using and rearrange the tool  box automatically as the user engaged more with the panel over time. Making the panel smart and more user friendly overtime.

Takeaways

SAP Build is a great tool for building high fidelity Fiori UI5 prototype. Here are the main feature and benefits  I learned while designing my first prototype app.

1. Low cost of changes (No programming and much faster turn around time)
2. What you see is what you get.
3. Interactive prototype with screens, process and real time data integration.
4. Fiori compatible (get a jump start on Fiori development).

Low Fidelity Prototype:

Process map with sticky notes: You can visualize your own process very quickly, but not enough screen details.Screen mock-ups: You can visualize screens, but not enough understanding of process and limited visibility on data.

Not all Prototypes are Created Equal

Mock-ups (low fidelity prototype) can go only so far in the user experience improvement journey. In order to succeed, you will need to develop a high fidelity working prototype. This will reduce your risk of delivering yet another sub-optimal User Interface (UI) to the end-users.

Not all Prototypes are Created Equal

Mock-ups (low fidelity prototype) can go only so far in the user experience improvement journey. In order to succeed, you will need to develop a high fidelity working prototype. This will reduce your risk of delivering yet another sub-optimal User Interface (UI) to the end-users.