Lambda Fellows: Week 2

My second week as a Lambda Fellow at OpenBook was an incredible learning experience. I learned some important lessons about not getting too attached to a design and being open to feedback from stakeholders. And I also learned some incredibly powerful new tools in Figma. Of course, there were some learning pains along the way.

On Monday I was happy to see that we had some feedback on the survey that I created last week. The respondents overwhelmingly felt that the newsfeed of suggested research was the best place to land when opening the app. They also helped make a decision on which team to use for a scholar’s connections to others as an advisor, student, or collaborator. I was surprised by the feedback that tapping on a card for research or for a scholar profile should open up an overlay rather than navigate to a new page.

A bar graph for “Where does a scholar land when opening the app or logging in?” shows Personal Profile was chosen 6.67% of the time, Newsfeed of suggested research was chosen 86.67% of the time, and news feed of suggested connections was chosen 6.67% of the time.
A bar graph for “Preferred term for current connections” shows “My Network” was chosen 56.6% of the time, “Colleagues” was chosen 16.67% of the time, and “Connections” was chosen 26.67% of the time.
A bar graph for “Tapping a research card:” shows “opens a separate screen” was chosen 40% of the time and “opens an overlay with paper preview” was chosen 60% of the time.

I began working on creating mid-fidelity mockups in Figma. I decided to use the light blue “neutral” color as a background and the “openbook orange” logo, to show the fun and friendly feel of the brand. I gave the cards a classic “floating” look and created a simple drop-down menu that slides the rest of the content to the right.

Once I had the newsfeeds and personal profile page created with this layout, I showed them to my mentor. He was not happy with the colors I had chosen. He felt like the bright and fun tone of the colors I chose did not portray the brand in the way that he wanted. He wants it to feel sophisticated and luxurious and that I the dark “mature blue” for a background with the brighter yellow-orange logo better portrays that image.

I changed the colors, keeping the rest of the design, but there were a few things that didn’t seem aesthetically pleasing. The white cards almost hurt the eyes with the very dark background. So I tried it with the light blue background still behind the cards, but the dark background and logo at top, but the style just didn’t seem to flow. So I ditched the idea of the floating cards altogether and went with a more modern style of cards extending across the entire screen, only separated by a gray line. In this iteration, I also tried getting rid of the menu in favor of bottom navigation and icons for the search and profile and settings, with a floating action button for the main action of submitting a paper.

Image of phone interface with dark background and white cards.
Image of phone interface with dark background and white cards.
Image of phone interface now with light blue background.
Image of phone interface now with light blue background.
Image of phone interface with larger cards and icons to replace the menu.
Image of phone interface with larger cards and icons to replace the menu.

Throughout this week I was also learning a new tool in Figma called auto layout. This tool is incredible, as it makes it possible to make components more responsive to resizing and adding in new content, or content of different sizes. I was struggling to use the tool to create a menu that worked well with my design (that was actually part of the reason for innovating with the icons), but I knew it would be a really powerful way to create the cards and other aspects of the app.

Luckily, I was able to speak with the manager of UX Design at Lambda in order to get some help with the auto layout tool, and to have him critique my design. He helped me redesign the layout of the cards (see above) so that they would work well with auto layout. This was revolutionary! But he also recommended a different library for icons, reminding me to keep them consistent and challenged me to think about the purpose of settings and profile being separate. He also felt like the large logo at the top was unnecessary.

I felt like I had to go back to the drawing board. I tried creating a floating menu to replace some of the icons.

My mentor felt that it was too crowded with so many menu items, bringing me back to the idea of replacing some of them with icons. I looked at many other apps and found that the logo was often just a bit smaller and in the upper left corner.

So, with all of the feedback, my current iteration of the landing page looks like this:

A new interface with fewer items in the floating menu, and including icons in the top navigation for search and profile.
A new interface with fewer items in the floating menu, and including icons in the top navigation for search and profile.

Another exciting new tool that I discovered this week is only available in the Beta version of Figma, which I needed to request. This came in really handy to design the user flow for submitting a peer review on a paper. These icons could be used for the ratings scholars use to evaluate a paper, and for the progress bar to help them feel grounded during the process.

Unfortunately, I ran into the problem that the interactions don’t seem to work when the components are used within frames of other components. So, that is on my list of items to tackle next week.

I am also going to work on doing some more user testing early on Monday, to make sure my design of menu items and icons are intuitive to the users. I look forward to getting the results of that user research and creating more user flows next week!

I am studying UX Design at Lambda School. My goal is to create pleasant and meaningful experiences for people through the products that they use.