Nimble — All your messages in one place
Responsive App | UX\UI Consultancy | Client Project | 5 days sprint | Solo
Overview
I was engaged by Nibble on a freelance basis and was briefed to redesign and optimize two key landing pages of their website and adapt them to 3 viewports (mobile, tablet, and desktop) in a 4-days sprint.
Nimble is a start-up that created a platform that allows the user to have all their messages in one place, offering smart and innovative solutions on how they are organized.
To meet their needs I set out to create a responsive design by combining the fluid and adaptive approach: thanks to predefined breakpoints, it’s possible to design for different sized layouts e.g. mobile size or iPad size — this is the adaptive nature and at the same time it responds by stretching or shrinking — this is the fluidity.
Discover
Firstly, I analyzed their website, and I identified the main pain points.
What’s not working?
- Colours and structure are misguiding and not organised
- The user perspective is not taken into consideration
- Benefits are hidden and not easy to understand
- The sign-up area is not accessible
- Lack of enticing user interface
- Lack of character and clarity of what the company is offering
Ok, let’s start
I started by investigating direct competitors, they offer a clear and organize overview, and they trying to engage the customers by having a preview of the product.
I then had a meeting with the client where we discussed the main business goals. These were:
- Have more people signed up for the waitlist
- Project explanation for possible investors
- Apply for a 50k support band from the government
There were no particular restrictions regarding the visuals, but we both agreed that the personal branding was not clear enough. This resulted in the story of the company and the benefits of their product were not being communicated properly.
We agreed that to achieve the pain points and business goals I had to focus on:
- Building the connection with the audience with an effective “storytelling” technique, particularly showcasing those benefits and letting the user perceive why the app is different than others and what’s the unique value
- Incentivises the user to take some desired action
- UI has to reflect the brand personality to create a connection with the user
Define—
Defining the brand values and identity
I decided the main keywords that represent the brand and made a mood-board to visualize their brand identity.
I decided to extend this practice to further define their brand
Efficient but not overwhelming
Productive but not confusing
Reassuring but not restrictive
Calming but not characterless
Trustworthy but not rigid
The visual mood-board helped to inspire me on which direction I wanted to take regarding the structure of the layout and the graphic & illustration that I used to communicate the brand.
- Waves: wielding the word calming I associate the movement of the waves and I decided to reproduce it using a minimalistic style and I used them as a separator that flows and creates contrast between the header and the content.
- Curved lines create familiarity and comfort, they also suggest relaxation. and are easy on the eyes and aid progression through the site, in an indirect manner.
- Clear structure: pre-decided within the competitor research.
- Empowerment effect: by showing the positive outcomes, relaxing themes, and a sense of peace the user will give the site more of a relaxing vibe, which is how the company wants theirs users to feel when they are utilizing their product.
The visual language elements are portrayed through our style tiles. Visual tension comes out by contrasts of space, colour, or luminosity, and it is easily noticeable if interwoven in a perfect overall balance of elements.
Visual Language:
Shape — Geometrical & curvy
Space — Open, Contrast, define areas
Movement — smooth, direct
Colour — Solid, muted, natural
Featured Image Layout
I decided to set up a featured image on the page. The image serves to concentrate attention and interest to a focal point expressive of the page topic. The image stands as the source of meaning that radiates from this very focal point.
Colour schemes
All the research lead to me defining a color palette, typography and style guide. I undertook accessibility testing in order to allow further users to access the site and not have any limitations, due to accessibility.
Typography, spacing & guidelines
My thought process for the typography was to use just one typeface establishing hierarchy and creating visual interest by using the styles that Barlow has to offer. I include sans-serif because is slightly rounded and is a friendly and easy-to-read typeface.
For an optimal user experience and responsive design, interfaces need to be able to adapt their layout at various breakpoints. I selected them and I created a responsive grid layout, which can be scaled with different screen sizes.
I established general rules to follow on spacing and colours and I gave specified details for each viewport for typography and spacing.
With an overview of the icons used to create the design system
Develop and deliver
Rough sketching
Next, I did some paper sketching, outlining some possible layouts to imagine the interactions our product needs to support visually.
After testing these with users, it was clear this was too much information, and the main pain point was how to display all this info. I tackled these issues in further iterations.
Iterations
One of the main issues was the core content was not displayed properly be highlighted to the user. I decided to conduct a content audit to have a much better understanding and prioritize what’s more important.
With this exercise, I was able to define the main deliverables in a clear and concise manner and add visual icons and color associations to enhance the content and provide an extra bit of information.
Delivering the final designs
Moving to high fidelity
Once the mobile layout structure was defined the biggest challenge was designing for all three viewports whilst still keeping consistency.
For the mobile viewport, I changed the image size to the full width of the screen, and this progressively changed to taking up half of the screen for the medium and large viewports.
My final designs can be seen in Figma here, this is a non-interactive prototype of static screens.
Suggestions
I would like to continue to design the other pages of the site. Speaking with the client we decided to offer a new page called “goodie page” where users will be able to find lists of funding options for entrepreneurs in Berlin, a tool to compare the average price of freelancers and website freelancer and tips and tricks. This page will help Nibble to attract more clients and offer a better service overall to the specific user needs.
Reflection
I really enjoyed this project and it was a pleasure to work with the client. She was happy with the outcome and we’ll develop further improvements based on my project.
Working with a client made the project more valuable and unique as I had to take in consideration, not just the user’s needs and business goals/needs but also the restrictions that we had regarding the current situation.
She also left me on LinkedIn great feedback which I’m very proud of.
“Deborah is a highly determined and creative person. While still in the process of learning new skills to further her design career, she supported me with creating user personas, advancing my product mockups for testing, and designing the first iterations of my landing page. Every time I challenged her with designs that required her to learn on the go, she rose to the challenge, bringing the vision to life. In addition to grasping new concepts and ideas quickly, she brings a lovely energy to any project and team. She is a joy to work with and is passionate about delivering designs that clients and users will love.”
Maya Mardini — CEO of Nimble
Thank you very much for reading my case study. If you’d like to know more about the project, my process, or simply just would like a chat, feel free to say hi on LinkedIn , or visit my portfolio.
