Station91 is a learning app for Startup Founders, Product Managers and UI/UX Designers to get updated with trending content in their field of study. This project is to create a minimum viable product to test various hypothesis put forward by the team.
Duration
March 2019 - May 2019
Role
Designed the app from zero. Brainstorming & Conceptualising, Content Strategy, User Research, UX Design, Visual Design, Interaction Design, Messaging, Testing.
Tools
Invision Studio for Visual Design and Interaction Design. Zeplin for Developers to extract the components' code. Lookback for Usability Testing. Trello + Slack for Product Management.
Background
We started working on this project in the last week of March 2019. We brainstormed ideas for the problems how people don't find content related to their job role at one place. We focused on making learning interesting for individuals who want to improve their skills at work.
The team wanted to execute the product design in a week and I aimed to do that by working in a sprint. 31 March till 7 April 2019.
With our initial discovery of problem scenarios, we had 3-4 meetings before the sprint to work on defining the scope of the MVP, the first version to test the hypothesis.
The 5 member startup team consists of one product designer, one product engineer, one mobile developer, one marketing & growth specialist and one content strategist.
Sprint began on 31 March 2019
Research & Brainstorming
We started research to find out the available tools on the internet that get the job done for our users. After listing down, the team started to perform a competitor analysis to understand how each of them have approached the problem.
I started to teardown these products to analyse and understand how each of them have implemented the interface, interactions to understand their usability.
In my research to understand the in Interface and Interaction trends, I have identified the latest usability approaches keeping in mind how large the mobile screens are becoming.
Designing the User Experience
With our research findings, I started to draft the User Persona and then identify the Use Cases and Job Scenarios. I broke them down further to smaller situation, motivations and outcomes to derive the interactions based on Jobs-to-be-done framework.
From the identified interactions, I have built a component meta-data sheet that defines the nouns, properties and their types to help the designers and developers. This also helps to frame the Information Architecture.
This level of detailed information now allowed me to sketch my ideas and prepare the wireframes for the minimum viable product for Station91. I presented them to the team, took feedback and iterated.
Designing the User Interface
I started with the on-boarding flow by experimenting various colour combinations for the foreground and background components.
I picked Invision Studio for Visual Designing as I knew about its newly released Interaction Design capabilities and I wanted to implement them for Stn91. This decision helped in reducing the time it takes to managed the components if otherwise executing this on multiple tools.
As we decided to work in sprints, I had to ship the designs in a phase-wise manner so that the developers can build with what is designed to ensure we build the app in parallel.
The on-boarding screens were finalised and shipped by 2nd April 2019.
Since the app is supposed to facilitate users to read, I had to make the right choice for background colours, font and its size to let users read without any problems. I chose to tweak the character and line spacing to ensure the font is readable, always.
While designing the Discover Card components, I started by experimenting the layout with the content's font size at 12pts and descriptive text which needs less attention at 10pts. I quickly learnt from the internal team's feedback that the font is too small to read.
Once the design for the page is ready, I shared the image with few probable users to assess the font size. When the prototype is ready, I shared it as well to ensure we have the font size right so that the users will not have a problem reading the content on the app.
The Visual Design for all the screens was completed by 7th April 2019.
We wanted to give users an easy way to consume lessons that they can read at a simple tap or a swipe with the ease of reading the articles or playing videos from the same screen they are on.
There are engineering and content availability challenges to achieve such an interface which allows the user to read more from the same screen without deviating from the task. As a intermediate target, we implemented this partially for the MVP by using links to open the external articles with an in-app browser.
Certain components that we designed in this version were mediocre implementations. We decided to go ahead with these owing to the deadlines we (the business team) have decided before implementing this product as we have to validate our core assumptions. It would become an overkill otherwise.
Designing the Interactions
I want our users to feel the app is intuitive and fun to use with the components responding to how they interact with the app. This drove me to work on how the app animations work at various interaction levels and this in my opinion would be an edge over other apps.
There are various ways how Interaction Design can kick in. From splash screen to component animations to page transitions to illustrations. I decided to implement subtle interactions to let users not feel over-boarded or bloated with animations and make the usability slow.
Invision Studio has helped decently well with the amount of flexibility it offered in terms of defining the animations. Though linking multiple screen states & connecting the layer structure is tedious, the end-result allows developers to easily understand animations without any error.
Interaction Design protoypes were finalised and shipped by 10th April 2019.
Testing and Feedback
For every designer, the user's inputs are important. As I completed the visual and interaction designs, I quickly created the prototype on Invision to share with probable users and test how the design is understood by the user. This step gives feedback and I ensured that we capture this and iterate on it.
Before working on this project, I helped few junior designers to learn every day about design so that they understand how it feels to work in this job role everyday. When I got the prototype ready, I took the prototype to them and they liked what I designed. Their enthusiasm to use the app built confidence in our team.
I conducted individual interviews with probable users in April after the prototype is ready to take maximum inputs from people so that we can iterate on the design and ship a better version of the product when we release it on the play store. Crucial feedback on font size, colour gradients was received and I corrected them.
In early May, when we got the app built for Android, I conducted usability tests with 15 potential users and interviewed them each for around 30 to 60 minutes to understand their behaviour. I received valuable feedback from these users and this feedback went into the engineering pipeline as soon as I found them repetitive from most users.
We created test groups with around 150 people of different personas so that I can work closely with them and understand their feedback on how the app is working. This helped me to capture bugs and this allowed us to prepare for a larger user base.
Messaging
I also designed the play store collateral for the launch and the website by taking few shots from the designs and creating mockups on devices. This helped to create a hero shot and few banner images to explain about the app and its function in simple terms.
When we were starting the sprint during the end of March, we created a ship page on Product Hunt to reach out to early adopters and it worked for us to garner the initial users.
