Project
Whaleshark
WhaleShark is an advisory venture partner and capital raising firm that filters the startup scene and provides a network of international investors with hand-selected deal sourcing
My role
Mobile UI Designer
Visual Designer
Tools
- Figma
- Balsamiq
- Miro
- Milanote
How might we...
How might we create an intuitive and user-friendly platform that will include text-heavy content.
We were asked to create a Web design but delivered a mobile version to challenge ourselves and meet the needs from user with little time.
Delivery
web & mobile design
Delivery
Ui styleguide
Process
How we went about creating the UI designin Figma.
design process
Deep dive into the company
What is important for me when working is to get to know the brand. Who are they whay do they do? Why do they do it?
user-testing
Since the company already had an existing website we started of by doing usability -testing on that. We create tasks and mapped out pain points, that we later on developed wire frames on.
Wireframing
The main insights from the usability testing was that it was a huge amount of text to digest, user didn’t feel engaged to read. The readability was an area of improvement. It has hard to navigate to find information about what they were doing as a company.
How might we increase readability working with a huge amot of content, creating a pleasant experience for the user?
testing wire frames
We came up with 3 different ways of dividing the content in a more user-friendly way.
We also aligned with the developer at the company of what was feasible for them.
Mock-ups figma
We presented 3 different mock-ups Classic/Modern/Crazy and decided to challenge ourself by making a mobile version since most of their target has little time and use their phone more.
Mock-up
Client picked the “crazy” one since they wanted to become more innovative and felt that was more aligned with their brand.
Prototype in figma
–
divide mobile and web design
Used blocks to increase readability. We used geometric icons to explain the work flow and less text. Which gave a more pleasant experience for the user. Feedback : Easier to grasp
define ui styleguide
present to client
–
Delivery
Prototyped web and mobile design.