Mobile Interface Design
I designed, wireframed, prototyped, and presented the company's mobile browser interface.
I collaborated with their Product and Engineering team, which developed and implemented my designs for their users.
Here is a demonstration of my prototype:
My job was to adapt the features and overall look of desktop browser to fit on a mobile device. Because the company handles financial information, it is important for the website to be accessible on the go, especially for solo entrepreneurs who are busy and need readily accessible finances. It also needed to be usable for people who aren't necessarily familiar with technology, so the interface needed to be simple. I worked closely with the Products and Engineering team to create 5 iterations of the interface design, meeting frequently to discuss design choices and apply feedback.
First, I studied the different "rules" for effective mobile interface design, and gathered some important notes about minimizing popups, limiting the distance that the user's fingers must travel on the screen, keeping clickable elements at a comfortable size for fingers to tap, and limiting the amount of pages that users had to click through.
My first step was to make wireframe sketches. With these sketches, I wanted to display all of the important features of the website, with I used Notability for.
Then I translated the sketches into Figma, keeping them grayscale. My team stressed the importance of starting off in grayscale. My interface needed to be smooth and legible so that it was navigable and understandable without color. I instead focused on the visual hierarchy and overall layout. Here is the first wireframe iteration:
The next iterations added some complexity and determined how certain elements would be interacted with, such as popups. I adjusted specific features like adding documents and editing user messages. Would attaching a document and editing a message open a popup or allow users to directly change what was on the screen? Here is the fourth wireframe iteration.
Finally, after many rounds of feedback and team meetings, I prototyped the functions and added color. I needed to keep the general color palette of the company while also keeping the screen visually interesting with contrasting elements. I added banners and shadows to increase texture and contrast without making the screen busy. I finalized designing the popups, which I connected to button clicks. This was the most rewarding part of the process for me!
Takeaways
This project was really fun and engaging. It was a creative challenge to design an interface limited to the width of a screen, but with consistent sizing and spacing, I was able to fit important details onto one page while limiting the amount of times a user needed to click on the screen. One of the important lessons that I picked up while wireframing was consistency. If I changed the height of one element or adjusted the distance between the text and the border, I needed to apply those changes to every other similar element. The borders, padding, and distances also needed to be predictable numbers and couldn't vary much from each other. Even icon sizes needed to be universal. Ultimately, keeping a rigid eye on consistency paid off because adjusting and creating elements now followed a certain guide. Overall this project was a great exercise of balancing design intuition with technical skill.
I also really built on my Figma skills and even gave a presentation of my work to the company, which I got great feedback on. This was my final project with Soundboard and it was a great conclusion to an already amazing experience with the company.
