The mobile app is the latest addition to Smartway2's product suite. Their previous mobile app was dated and not up to tech standards in today's world. It was extremely lacking in innovative features, the UI looked dated and the app did not take full advantage of mobile hardware we have the pleasure of using nowadays. I was brought in by Smartway2 after completing their Outlook Add-In project to a high standard, to work the same magic on their mobile app.
The home hub
Below are screenshots of Smartway2's old mobile app. You can see from the homescreen that it contained a very deliberate feature set displayed in the form of a grid, asking users to choose what they would like to do. The first thing I wanted to do to this app was make everything about it more useful, intuitive and functional. The design that I created turns the home hub into an easy to follow 'agenda' view. This is offers far more information to users instead of just displaying a grid of options.
Search was a huge part of the Smartway2 App. It was vital for users to be able to search for various different things: Rooms, Desks, Colleagues, Reservations, Locations, etc. It was also essential that searches could be performed globally and on specific days. I managed these requirements with a global search icon in the tab bar at the bottom of the screen, which triggers an initial search on the current day that the user is on. The slick animation makes it easy for users to maintain their whereabouts while performing a search.
Booking a resource in Smartway2 needed to be fast, effortless and completable with a minimum of a few taps. To achieve this, the user is asked one question - which resource they'd like to book. They are then taken to the resources list with the selected resource set as a filter along with their most common/closest location. One tap on an item will launch into the reservation booking form which is configured so that it can be confirmed without further adjustments.
Flow starts with a modal displaying the different booking options.
List view displayed as the default resource booking view.
User can easily switch to a floor plan view for more visual resource booking.
In order to make the Smartway2 App more useful to customers, we decided to implement a scanning feature into the app. Since mobile devices can interface with QR codes, NFC and iBeacons, this was the perfect opportunity to capitalise on those features. The challenge here was to design a single scan screen within the app which could incorporate QR code, NFC and iBeacons into one single page. The below screenshots show my solution to this challenge.
Scanning begins with the camera open occupying the top half of the screen. A QR code can simply be placed inside.
Once scanning is complete, resources associated with nearby beacons are displayed under the Beacons header.
Due to the high number of moving parts to this app, I decided to go with a Page & Modal system for navigation. This made the most sense since it allows for great flexibility while helping users remain grounded to where they are currently are within the app. This is because even while a modal is open, they can still see the page behind it. I decided to use modals for the following events:
- User decisions that will lead to a new section of the app (e.g. type of resource to book) - Displaying information (attendee lists, attendee contact details, rooms in a booking) - Filters & other search parameters
Colleague Search Filter
In order to give the engineering team a good sense of animations, I give time to prototyping my designs as accurately as possible so that there are no miscommunications during implementation of the product. Below is an example of how I prototype animations and navigation.
For when the user has some free time in their agenda, we planned to create a component that could display a list of options for the user to fill their free time with. I designed the component to be eye-catching and intelligence-led. The side-scrollable list of items would change order depending on what Smartway2 think the user is most likely to choose to fill their time with. For example, if the user is working from home, the first item may be 'Meet on Teams'. Since the component is completely customisable by the user, there may be additional options which we don't have icons for. Those are displayed with a more generic circle-plus icon.
For complete flexibility, I designed an action-list modal which pops up from the bottom of the screen whenever an action needs to be taken on a colleague or a meeting. This action list is generic and can be easily implemented by developers as it's easily extendable or retractable.