Blue ID B2B

Introduction

Blue ID was developing a mobile access control platform and associated mobile key system, that grants access to physical objects (gym, garage, apartment, etc.).

My position: UI/UX design intern, Q3 2019 (3 months)
What I worked on:

  • Keys App redesign, new feature design, mobile prototypes
  • Company website redesign – mobile design and front-end development (WordPress, HTML5, CSS3)
  • User journey map and personas
  • IOT platform mobile design
  • Front-end mobile styleguide

Challenges and solutions

1. Keys App redesign and new feature design

Problem: The design of Keys App was outdated and some of the main features were difficult to understand.

My goal: To create a modern and intuitive design, which increases the Keys App usability. All objects to be reachable within one click after starting the app.

My approach: My first task was to do user research and create 2 personas of the main user groups in order to get myself familiar with the users and their needs. Afterwards, I assisted in the creation of a user journey map. This gave me a better understanding of the whole process of unlocking a door via Keys App. I also created an information architecture and UI flow of the app.

The next step was to test the current design and identify spots for improvement. I noticed which screens and UI elements were difficult to use for the customers and then redesigned them in a way that brings simplicity and better visual structure.

I designed all screens in Adobe Photoshop and XD. Then I connected the designed screens in a mobile prototype that was used for testing before including it in the development team sprint. I had similar approach to all the new features I had to design, e.g. 2 factor authentication, customer service section and customer invitation process.

The result: A more modern and easy-to-use UI. I accomplished my goal successfully and my designes were moved forward in the mobile development process.

2. Company website redesign, mobile design and front-end development

Problem: The corporate website was redesigned but there was no mobile version of it.

My goal: To design and develop a mobile version of the website which looks and works well on all resolutions and devices.

My approach: First, I analyzed the current website version on multiple mobile devices and identified a list of issuas that needed to be fixed. Then, for some sections I had to provide complete UI design. I designed all screens in Adobe XD. Using HTML5, CSS3 and my knowledge in graphic design, I developed the UI that I suggested to the team.

The UI design was tested on multiple devices and resolutions and it was approved.

The result: A mobile version of blueid.net which was loking ad working well. I accomplished successfully my goal and delivered the results on time.

3. The Style guide

Problem: The App interfaces (of 4 BlueID apps) didn’t have a consistent look and feel, the styles were way to different and outdated.

My goal: To create a front-end mobile style guide (not a corporate identity one) in order to to align the styles of the apps, the IoT platform, the company website and to make them look more modern. Also, to have a better structure in the design process in future and to align the styles of all apps that work in the same “ecosystem”.

My approach: I analyzed the modern UI trends in 2019 and came up with a design concept which was approved by the lead UI designer. Then, I identified the sections of the style guide that I needed to create, like in atomic design, starti

ng from the smallest UI element to whole UI components such as forms, pop-ups, notifications, etc. I designed it all in Adobe XD and Photoshop. I presented my work and aligned the behavior and look of some UI elements with the UX designer.

The result: A styleguide, that contains 2 sections – for mobile applications and for web. Moreover, the styleguide became a document that the developers use on daily basis when they had to make quickly small decisions in their work.

Conclusion

In BlueID I’ve learned to work in a cross-functional agile team (SCRUM) and I mastered using Adobe XD, Photoshop, Illustrator, Balsamiq Mockups, Gitlab, HTML5, CSS3, WordPress, Sublime+Emmet, Jira, Confluence, Slack.

I  enjoyed working in the team and I was very sattisfied of my internship, because the process of learning was quite intensive.

The company wanted to hire me, but due too the crisis they had to downscale and go in a short-time work as many other companies at that time.