Skip to content

EasyLife 365 / App UI

In March 2021 Patrick Lamber, Microsoft MVP and founder of EasyLife 365, got in touch with me with a specific request – to design the User Interface for an Application he was developing – EasyLife 365.

After initial contact it was imperative for me to conceive the functionality of the application and foremost what ‘pain point(s)’ the app is trying to solve and for who (personas) the app is targeted for.

What is EasyLife 365?

EasyLife 365 comes in form of a Microsoft Teams application (extension). Users can use the EasyLife 365 setup wizard to add / create new resources (eg. new team). In exchange, EasyLife 365 will monitor and notify users if they ‘need to act’ (eg. a resource does not fit a defined policy anymore). EasyLife 365 will also alleviate the restoration of policy or attend the user with any action required.

Who is EasyLife 365 for?

The answer to this questions lies in resolution of the problem the app tries to achieve. EasyLife 365 is not made for the home user creating an occasional Team but instead to system admins and Microsoft 365 Admins of larger corporations in the need of managing and maintaining a large sum of Team accounts. Sys Admins / Admins are overwhelmed by the sheer volume of manual policy checks which in return creates possible system vulnerabilities by unmaintained accounts out of policy. 

What problem is EasyLife 365 trying to alleviate?

EasyLife 365 will monitor and alert users (with admin privileges) and / or sys admins if Microsoft 365 Team accounts are out of a defined policy. EasyLife 365 comes with a visual interface which highlights issues by instructing users steps to action to rectify those issues. EasyLife 365 comes with a visual Wizard (step-by-step process) to setup accounts to monitor and define policies. An example problem EasyLife 365 could flag is when a user admin who is the sole group owner leaves the group they created. The users left in the group would be unable to manage the group on admin level. In this scenario EasyLife 365 could intervene by notifying the system admin of the scenario. The sys admin can then perform suggested actions such as closing the account or upgrading a different group user to admin level permissions. 

EasyLife 365 is a time saving application with the potential of saving sys admins many hours per week, for currently reluctant, redundant manual system tasks, translating in huge cost saving effects for the business.

Project scope

  • To re-design initial design concepts for specified App page templates
  • To inherit Microsofts Team UI design style guide and align the app visuals to established guidelines
  • To simplify design templates by enhancing important actions or steps
  • Design within scope and budget as well with a method to allow easy assets hand-over to app developers
  • The design established for the individual templates should be of responsive nature for components to be able to scale based on screen size at hand

Defined UI & Evaluation

Working primarily with Figma for UX / UI projects I found a suitable extension called ‘Microsoft Teams UI Kit’. This extension allowed access to established Microsoft Teams resources and guidelines such as:

  • Iconography
  • Layout
  • Avatars
  • Colours
  • Typography
  • Copy and Content
  • Brand expression

as well as Basic UI components.

At the other hand, I also had to review the established style guides for EasyLife 365 and to understand the best approach of integration of proposed guidelines without ‘upsetting’ Microsoft Teams guidelines.

I received EasyLife assets in form of:

  • Brand style guides
  • Illustrations and artwork
  • Initial template variations (first iterations by in-house designer)
  • Photography / Imagery
  • Iconography
  • Colours & Typography

Approach

After some thought and evaluation of the situation at hand I decided the best approach was an ‘outside – in’ methodology. I therefore aimed to start with the ‘outside’, the canvas, by establishing the necessary framework driven by Microsoft Teams UI to then enhance it with the established EasyLife 365 guides and assets.

After 3 iterations I was able to establish an initial canvas framework using established Figma components and EasyLife 365 branding.

Design solutions

The next step was to elaborate further on 6 app templates sharing the same canvas (with variations) – the templates to be established were agreed to be:

  • Teams Overview
  • Teams Overview – filter active
  • Team Details with alert notification
  • Policies Details with alert notification
  • Team (add team member)
  • and 404 (no results found)

After several iterations and 2 presentations to the client the proposed solution for the agreed templates resulted in the following:

6 App templates

As reference – design templates supplied to me by client (status before):

The solution presented is the result of using the Microsoft Teams UI framework and guidelines with styles and assets established by EasyLife 365.

The icons used within the card components header or the illustration artwork at the bottom right of the canvas screen establish an own style identity for the user.

Crucially, a lot effort was put in to simplify the screen visuals, avoiding information and functionality overload and rather try to establish guidance for the sys admin or users to take appropriate action in a minimalistic fashion.

The second part of the project was to establish visuals for the Wizard section. The Wizard section is a 5 step process for the user to create a new Team component. The steps are:

  • Choose your template
  • Choose you team’s privacy settings
  • Details about your team
  • Add your teammates
  • Congratulations

One of the requests by the client was to focus on creating the wizard in a user friendly fashion, to avoid ambiguity and necessity for the team to intervene to help the users during the creation process. In summary, the process should be as self-explanatory as possible, an easy and rather quick experience for the user.

After several iterations based on a initial screen as well some testing the solution presented was by using established modal UI components by the Microsoft Teams UI kit. The use of modals allows to activate the Wizard component from any section by interacting with the ‘create’ button residing on the canvas header. This allows for better flexibility and better access to start the Wizard. 

Several iterations have also been made on each screen design optimising component styles, as well as colours and wording.

The solution presented to the client was the following:

5 Wizard screen templates

As reference – design templates supplied to me by client (status before):

Outcome

The main challenge of this project has been to establish template designs in a fine balance between an established UI framework and style guides of a newly created brand. The aim was for the designs to seamlessly integrate in the Microsoft Teams UI universe of things but showcase the app and brands own identity as well. I believe I have succeeded in this endeavour.

The screens feature attributes such as flexibility and expandability by keeping UX principles in mind and the project within scope, budget and time.

As a final deliverable, access has been granted for developers to the Hi-Fi designs to export assets and use UI styles as approved for further development.