THE CLIENT
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.
TOOLS
THE BRIEF
The challenge was to re-skin one or two pages of a website for 3 viewports (mobile, tablet, and desktop).
The pain points and business goals I had to focus on:
-
Building the connection with the audience with an effective “storytelling” technique
-
Incentivises the user to take some desired action
-
UI has to reflect the brand personality to create a connection with the user
All your messages in one place
Figma
Miro
Ilustrator
Photoshop
FEEDBACK FROM THE CLIENT
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, furthering 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 Nardini, CEO at Nimble
THE PROCESS
I chose to adopt the double diamond method. This means that we first discover and define the problem I have to solve after we continuously develop, test, and iterate until we have a final product.
1. Discover
2. Define
3. Develop
4. Deliver
Heuristic evaluation, Defining brand values and identity, brainstorming mapping technique competitor analysis
Visual identity, colours and typography, illustrations and character
Sketching, logo, high-fidelity UI designs, user testing (low-fi 5 user | mid-fi 5 user | hi-fi 2 user) clickable prototype
10-minute Presentation
DISCOVER
HEURISTIC EVALUATION
Firstly, I analyzed their website, and I identified the main pain points.
These were the main key findings :
-
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
COMPETITOR ANALYSIS
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.
DEFINE
CREATING A VISUAL 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
DESIGN STYLE
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.
All the research resulted in me defining a color palette and typeface and set up a style guide.
FEATURED IMAGE LAYOUT
-
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 their users to feel when they are utilizing their product.
COLOUR SCHEME
All the research lead to me defining a colour 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 AND GUIDELINES
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.
DEVELOP
ROUGH SKETCHING
Next, I did some paper sketching, outlining some possible layouts to imagine the interactions our product needs to support visually.
ITERATIONS
Considering the above-mentioned points, I developed the idea of a logo symbol that would reflect the adventure. Also, it had to look fun and simple to immediately connect users to the theme of games.
CONTENT AUDIT
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.
VISUAL DESIGN
Overview of the icons used to create the design system
SOLUTION
LEARNING
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.
READ THE FULL CASE STUDIES ON MEDIUM!