Moray is an app that lets High Net Worth Individuals search anonymously for investment opportunities, track their personal assets, and more easily manage their busy lifestyles. Before the designs you see below came into existence, Moray didn’t have a name or backstory. Through some research and a little design thinking I conceived a backstory and metaphors for what would soon become complex interactions between three different types of users. You can read that here

Site Architecture Design

After the initial concept of Moray was finalized, we began mapping the site architecture and user interactions. Using the flow charts below and color coding each interaction, we begin to understand when each user will need certain shared features.

User Personas

Through interviewing potential customers we learned what both the investor and investment manager desire in the shared experience of making a deal. The investment manager wants a place where they can concentrate on deals with big time investors, and the investor wants to browse for these deals anonymously.

Wireframes

With the interaction and user requirements mapped out, we began creating a set of wireframes. These were shared with our potential clients for feedback and changed accordingly. A major feature we created from their feedback was the idea of chatting anonymously, until the investor taps the “share contact info” button. It’s unique to our app and protects their identity so as not get swarmed by investment managers.

Mocks

Finally we jumped into creating mocks for development. With these we could begin showing the clients what the app would look and feel like. If you read the backstory for the app, then the color choices and gradients will fit well. We use a contextual bottom menu, based on what user is interacting with the shared feature. It was important to make things like calendar planning and filtering seem familiar to the iOS ecosystem of UI.

Redlines

As we were building out the mocks for each screen in the app, I was tasked to start redlining and creating a style guide. Since this was huge app, it was important to spec out features for replicating later once we receive feedback and want to make changes or new screens. One key lesson I learned is that on iOS you use points instead of pixels so that different device sizes will scale properly.

Bonus Theory

Since I teach design theory at nights sometimes, I was always looking at how to express the interactions in the app in a more abstract but interesting way that I could share with my students. Below is one diagram I made on an airplane as I anticipated coming back to work on Moray.