Nimble: A UX/UI Case Study
So here it is, the final project for the Ironhack BerlinUX/UI Bootcamp! I partnered with Franzi Schneider and we chose the project NIMBLE. Nimble is a cross-platform messaging app; all your messages in one place.
The brief
Nimble is an early stage start-up based in Berlin, founded by Maya Mardini. The task we were set was to design the MVP, for this Maya wanted a desktop web app.
At this stage, Nimble was mostly a concept, it consisted of a landing page and a rough walkthrough of the app. However, the overall design and usability of the app needed to be designed. From our first client meeting, we established that we had free reign to change the branding as we wanted, which as a designer is great to hear.
Maya had already conducted some competitor analysis and sent out an initial survey. From her finding, she had a set of suggested features list and she wanted the 2 original platforms for Nimble to be G-mail and Slack.
Research
After our client meeting, we took a look at the data that Nimble had already gathered. The focus on the research so far had been towards a niche market of those working in tech or recruitment, generally in the upper levels. We edited the survey, helping to streamline the process. This part was lead by Franzi and I assisted. We decided for this project to swap strengths to learn from one another. Then we distributed it amongst a wider demographic. We also used the platform Pollfish to help us with this.
This reinforced from the previous findings that:
- People were frustrated with constantly switching platforms.
2. They would lose track of messages.
3. People suffered for a general notification overload from all the different platforms.
The main findings from further research were:
- G-mail and Whatsapp actually came out at the two most used messaging platforms.
2. The change of layouts between apps was frustrating to users.
3. In terms of payment, users either expected their company to pay or to pay less than 5 euro per month.
User Persona
The research pointed us towards two main users, the professional and the social. Therefore we created Stephan and Sophie:
We then created two user flows based upon the two personas and their main pain points.
Sophie’s focus is on being able to categorise messages across all platforms and mute her notifications accordingly. As a small business owner, she has mixed uses for both platforms. Some of her vendors prefer to send her WhatsApp messages, she also has a Whatsapp group for the shop’s staff. On the other hand, she also gets emails from her kids' school, as well as emails from clients. For her, it’s important that she can separate the messages based on work/social as opposed to by platform. She is also extremely busy and wants to be able to switch off and spend time with her kids when possible, hence the importance of muting the notifications.
Stephan on the other hand is overwhelmed by how many different documents he receives over multiple platforms. He wastes valuable time going into each messaging service trying to find that excel sheet from last weeks meeting. As a recruiter, this is time he could spend networking and making money.
We gave each of the personas their own problem statements and HMWs. These provide us with a simplified reference to validate the MVP we are creating; does it provide a solution to the problem statement or HMW?
Now that we have gone through the research and define stage comes my favourite part, Ideate!
Ideation
This is the part where the whole project starts to feel like a tangible app.
As we were working in a pair, we decided that the best plan of action was to do crazy eight. It’s a fast-paced and idea churning process. We set out the parts of the app that needed to be ideated on and got crazy.
They say that two minds are better than one and this was certainly the case for this project. After we had finished the crazy eights, we went through and discussed the ideas. Using a big whiteboard really helped for this, we drew out the ideas that both of us like and at the end sat and narrowed it down to which best fit our user personas. Thus, the majority of ideas we put into the low fi were a combination of both our ideas.
We decided that we would have a set Nimble style but that whichever messaging platform we add should retain its own feel. We also felt that the need for a helper was key to the project, Maya (as we called it) would guide you and be there to ask for assistance. This needed to be done in a way that wasn’t gimmicky, but there to help the organisation.
We also wanted to have the idea of tags within the app, as a way to help you search without having to do multiple filters. This can also double as a way to easily drag and drop your items into the calendar or to-do list. The app should also let you know when you have an important calendar or to-do list suggestions in unread messages.
Low Fidelity to Mid Fidelity
We started with the low fidelity version, using Invision freehand, not only did this speed up our process but its good for the trees too! We then moved the screens into Figma, prototyped and we were ready to start usability testing. We started with in-person usability testing, which helped provide us with some qualitative data. To widen our demographic scope, we used the program Maze.design, it also shows you the heat maps and mis-click rates which is vital quantitative data.
We realized very quickly that we needed to include a section to explain some of the details relating to what categories and notification modes were. So we got the assistant to explain this in a brief onboarding. We also decided for the mid-fidelity prototype to move the categories to the top and to have a section for the folders that already exist within apps such as g-mail. The mode section we also changed from a horizontal stepper to a drop-down to keep the feel clean, even if the user had multiple modes. The final change we made was to the clipboard. It needed a prompt to explain to the user what to do, then we combined the three options into one drop menu.
We then used Maze again to test the mid-fidelity prototype. The changes we had made clearly improved the usability with an increase in the usability score from 52 to 68.
High Fidelity Prototype
With a mid-fidelity prototype, we were happy with, we started to develop the User Interface Design part of the MVP.
To begin with, we used the brand attributes given to us by Maya. These were:
efficient/productive, reassuring & calm
Using these I started to draft a mood board as it was my turn to lead the UI part. Franzi then provided me with feedback from her experience as a graphic designer. The final result of both our input really shows how iterative this process needs to be and the importance of teamwork.
From here we were able to create a style tile and begin working on the high-fidelity prototypes. We decided to build Stephan’s user flow in dark mode and Susan’s in light. I focused on the light mode and Franzi focused on the dark, with constant open communication to ensure for continuity of design.
We then went back to Maze for further usability testing, increasing our score from 68 to 80. The key learning from this stage was that we needed a tooltip on hover for icons. Therefore, users who skip the onboarding section can still easily navigate through the page. We also decided to mute the colours of certain features and have them brighter on hover, such as the notification mode.
Finally, we redesigned the landing page to create a continuity of design. Please check out the prototype of this here.
Next steps
We need to go back in and test our alterations, hopefully increasing our usability testing score even further.
Hotkeys are important to allow for quick navigation across Nimble, a quick shortcut. Nimble founder, Maya, wanted the hotkeys to only be one letter, so we set up a closed cart sorting. We set it up on Optimal Workshop for her already as it takes a while to gather results.
Given the research that we conducted and from speaking with Maya, we believe that the next stage would be to add Slack. Although it wasn’t the next most popular within all users, it was for those who expected their companies to pay for it, especially in tech. We believe that she could add this platform as part of a paid plan for companies.
Lastly, hopefully, the next stage for Nimble is to launch! I’m extremely proud of this project and would love to use it one day. However, for now, it is time for us to hand it back over to Maya.
Main Learnings
The targeting of a product should be done with the marketing, not during the design stage. While Maya was originally focusing on a certain market, if the product is designed to be accessible, not only will it work for this market but for many others too.
Creating tangible user personas is extremely important. Both Franzi and I felt that we could understand the needs of both our personas and this helped us at all stages of the design process.
This project highlighted the importance of teamwork. While this was definitely a 50/50 split project, it was nice to take the lead on a part of the process and have someone who is more qualified there to support. I feel that as a result, my visual design skills improved tremendously.
Lastly, two weeks is a lot of time, but also really not a lot of time!
