The benefits of having an iterative process
How having a non-linear design process helped us building an easy-to use, slick feature
Do you know what’s great about having a non-linear design process in a multidisciplinary team? That everyone has different perspectives on the same problem and you can use the feedback in several stages of your process in order to end up with a feature which is easy-to-use, yet solves a problem and provides value for the users.
I feel really lucky to be part of such a team and I had the pleasure to work on our Price Alerts feature, one of our newest features at Nordnet. The app and web teams worked very closely together on this highly requested feature during the whole process since we wanted to release the feature at the same time and to provide a smooth and efficient user experience on both platforms. As part of the app team, I’ll mostly focus on our perspective on the process in this article whilst I’ll include points on collaboration with the web team.
‘Wait a minute! What are price alerts and what are they used for?’ I hear you thinking
Price alerts are alerts you can set to get notified when the price of a certain stock goes up or down so you can act on it as soon as possible or to just see how that stock behaves at that certain price level. We in the app team received a lot of feedback from customers that they really missed the price alert feature in the product — fun fact: they were only able to set alerts on the old website but not in the app nor on the new website.
Here’s an example feedback:
“Can you add a feature which enables notifications when e.g stock reaches a certain threshold? For example, I’d like to get a notification/alarm when stock XYZ is at €3. I can of course set up an automated sell or buy for any threshold I want. Having said that, I don’t always want to buy or sell immediately when certain threshold is achieved but to see how the stock e.g. behaves at that €3 threshold, and then make purchase/sell decision later on. I don’t necessarily follow the market every day and hence without notification/alarm I may miss a good opportunity to maximize the stock buy or sell. Market moves rapidly these days and 1–2h window on reaction may make a difference. Could you introduce such feature […] to basically add an alarm based on price?’
Having spot-on information and timing is crucial when it comes to trading so it was extremely important for us to provide the best possible experience for our users. We took all requests and insights into account and started working on the feature.
1. Kicking off the project
As usual when we start working on big features, we first set the requirements and then carried out a thorough benchmarking in order to get a full picture of what’s on the market and what’s essential with a price alert feature. At the same time, we also allocated time to create a research plan and conduct preliminary user interviews to help us understand how familiar people are with this functionality in general and what their expectations are when using it. Based on this research, we drew the user flows and then started working on the paper sketches.
2. Paper sketches
When creating the first concepts, we usually focus on the big picture and aim for creating the wireframes for the whole feature, including all flows and all aspects of it. This feature seemed such a complex and big one that we definitely wanted to deep dive into the sketches and ideas and drew the whole flow for Price Alerts too. In our early assumptions, we thought that we’d need to add the possibility of creating alerts in multiple instances across the app and web. With that said, we created sketches for all these flows and showed them to a few people to understand what’s missing or hard to grasp. After gathering the insights, we continued the process with creating early UI concepts.
3. Early concepts and early challenges
In the early UI concepts we changed a couple things here and there compared to the sketches, based on the feedback we’d gotten. Just like with the paper sketches, we also created early concepts for all the flows on both platforms. During the creative process, we ran into a couple challenges e.g. how to handle and show two editable fields (such as the price and the percentage change of the latest price of a stock, see four early concepts below) that are closely connected and are affecting each other.
To validate the concepts and the solutions we came up with, we ran multiple user tests from which we got immensely valuable feedback to proceed with and to improve the designs.
4. Iterating & finalizing the designs
Having received a lot of feedback from both users and internally from different roles, we went back to the drawing board and iterated on the layouts and solutions. To name a few iterations, we looked into different options
- how to make the ‘create alert’ flow and screen more interesting whilst making sure it’s neat and easy to use (see examples below on the screenshots) or
- how to show all alerts or
- how to have a progress bar for the alerts so users knew how far they were from triggering the alert or
- how to indicate read and unread triggered alerts.
After the iterations, we conducted another round of user tests to finalize the right directions for the UI.
5. Design QA and learnings
After finalizing the designs based on all the feedback we had gotten until that point, the developers started implementing the feature in close collaboration between web and app teams. Once it was ready to be tested, we did a design quality assurance within the team to check how it felt while using it and we realized that we could improve the UX of the alert creation screen by changing the hierarchy a bit. For example, even though competitors usually have ‘Price above’ or ‘Price below’ as the first selection when setting up an alert, we went off-track and could improve the user experience by changing it to ‘Price’ and ‘Percentage’. Above/below appears only as a non-editable label that depends on the value you enter on the screen.
6. Releasing MVP1 and feedback
Once we released MVP1, we started getting comments on App Store and Google Play from the users.
“Super cool development with the option of a price alert in the app.”
“It’s just great that you have now added price alerts too.”
The users mentioned additional feature requests related to price alerts — and most of them we already had in mind with the future releases. One of the requests was to see all alerts in one place as in MVP1 only instrument specific alerts were available from the stocks screens. Even though we had prepared concepts on where to add this screen, we went back to our users and created a survey to ask them where they would expect to see all alerts on both platforms. We were so happy to see that 75 people responded to the survey with valuable feedback and suggestions. Having summarized the results, we could pinpoint the most user-friendly way to move forward so we started improving the MVP2 designs.
Conclusion
One of the takeaways for me from this project was that it’s extremely important to have an iterative mindset during the design process. Why? Because you develop a deeper understanding of the customers’ needs through iterations and by continuously analyzing how they use your product.
It’s not only fun to work in a collaboration with different roles but also very useful to have fresh eyes involved to improve your solutions on the go. I’m really excited to see what we can learn from the upcoming releases.
Want to check out our Price Alerts feature?
Head over to the App Store and Google Play to download the Nordnet app!
Want to work with us?
We are always looking to grow our Product Design team with more talent. You can find our current open positions at our jobs site.
