Client
Role
Timeframe
Self-Initiated
UX/UI Design
2 weeks
The Challenge
This work was my submission to drawwwer's product design challenge which had multiple briefs aiming to solve our environment crisis through practical and easily implementable digital products. I took “Design a gamified competition smartwatch app to encourage employees commute to work on foot or cycle”, as I wanted to explore and get familiar with wearable interface design patterns and challenge myself with space and time constraint of wearable devices.
Process
It was a 2 week long challenge so I modified my existing UCD process to follow the rough day-wise guide that was provided alongside the brief. Let’s go through each step.
1. Problem
2. Audience
3. Products
4. Solutions
5. Prototyping
6. Test
1. Problem
The first step was to understand the problem in order to lay a foundation for the project. I started off with secondary research about the current commuting scenario of employees and why the majority prefers motor vehicles over walking, cycling. All relevant info was documented and an Affinity map was created to have a broader look at the problem.
User centred business canvas
While designing our product we start with focusing mostly about the users but we mustn’t forget that we’re also designing for business success and both User and business needs must be aligned. User-Centred Business Canvas is great tool for that. This way we can start thinking about the crucial things first and clear our risky assumptions at the earliest.
Audience
This step involved learning more about the audience that will use our future solution. Here are some questions I had from the beginning
1. List what are the categories of people you want to focus on
2. List what potential motivations and fears (concerns) the category might have
3. List potential situations (when and where) people face the problem.
Journey Map
Wearable devices are supposed to show relevant information at appropriate times, thus mapping out user’s journey’s throughout the day was crucial in order to provide them with useful time based notifications and actions.
Literature Review
I then reviewed journal papers of similar experiments related to Active transport and habit change approaches. Behaviour change can be led by Social and behavioural strategies (which include employees, teams and the whole organisation) and Environmental strategies (which focus on making the environment more suitable for the desired action). This model showed me a broader picture, i.e. instead of concentrating on one individual or team, the whole organisation can be motivated by adding social elements to our product.
Products
I looked for apps and services that are already trying to solve this problem. I tried understanding their target audience (which helped improve my user persona), their mission as a company and business model.
Competitor Analysis
As I didn’t find any direct competitor on wearable devices, so I reviewed popular exercise-for-reward related apps on iOS app store. Their strengths, weaknesses and USPs were analysed and relevant ideas were selected for our wearable app.
Feature mapping
These ideas were then converted into features, which were then mapped in a rough sitemap.
Unlike mobile apps, watchOS products must give equal emphasis to
1. The app
2. Notifications
3. Watchface Complications
The user interactions with the latter two more occasionally to glance at their stats/ progress. The app needed to be structured in a way that every functionality could be accessed in a few seconds.
Functionality map
The features are grouped according to user’s potential mental models before drawing our final information architecture.
Sitemap review
Sitemaps of each competitor were laid out in order to understand how their existing users are used to the grouping of features we may include in our product. These sitemaps acted as a starting point when working on our information architecture.
Information architecture
Final information architecture was then laid out. Several updates were made after lo-fi and hi-fi wireframe prototype reviews.
5. Prototyping
After brainstorming functionalities of our app, it’s time to think in terms of ‘flows’ now. How could we optimise the process of getting to and using these functionalities. I started out with rough paper sketching and eventually moved on to hi-fi wireframes.
Hi-fi Wireframes
In order to save time in UI design, I read watchOS Human interface guidelines and watched all of Apple’s watchOS WWDC design sessions beforehand so that I was well aware of Apple watch design principles and patterns. Thanks to watchOS default UI components and text styles, I was able to finish detailed wireframes very quickly.
UI Styleguide
After designing a few major screens, I saved the colour and text styles as a style guide for other screens to further streamline the UI design process. These constraints helped to maintain consistency throughout the app and save time.
UI Design
Wearable apps should be thought of as set of features and that can be executed in a few seconds as users can only afford to look at their wearables for a very limited amount of time. Related features were arranged as scrollable cards in order to reduce no. of taps required to reach every function. Another way our interface reduces no. of taps is by anticipating user actions according to time of the day and location e.g. prioritising commute screen during morning and evening and rewards progress during afternoon and night.
Userflows
WatchOS apps can have either Hierarchical or Page based navigation. I went with Page based as Commute+ has three different sections, and putting scrollable content in each page reduced no. of unnecessary taps. Apple workouts app design design pattern was taken as a starting point for trip logging as, in a way, an active commute is also a form of workout. Rewards and compete pages were added next to Commute page. The goal was to utilise default watchOS user flows to minimise the learning curve.
Testing
To measure the app's success metrics such as
1. Daily Active Users
2. No. of Daily Trip Logs
3. Task Success Rate
4. Time on Task
will be measured and further iterations will be made.
More Work
Innovaccer
Redesigning Forms in InRef
Puul
Rideshare app for college students