Not long ago I took a design challenge from Status.im—an open source platform for Decentralized Apps built on Ethereum. The brief included a Sketch file and stated the following:

Status Open Bounty is a web-based project of Status.
It's a bounty-based, open source collaboration solution for developers and organizations who want an easier way to get projects done.
Status Open Bounty provides organizations—including our own—with a path to decentralize their development. It also makes it easier for developers around the world to be rewarded for participating in open-source projects. Status Open Bounty now:
• Rewards code contributions on projects you choose.
• Pays rewards in SNT or a cryptocurrency of your choice (ETH and most ERC–20 tokens), without the third-party fees.
• Provides quick setup and bounty payouts as it plugs directly into GitHub.
Create a Dashboard for Developers or for Organisations (choose one). Think about what would be important for them to have an overview of. Think about the structure and content hierarchy of that Dashboard. Identify the information the user would want to be presented and how best to group the dashboard information/metrics into categories.
Feel free to edit the Sketch file, visual implementation is not a priority, although showing your UI skills does matter as well.

The Sketch file had the mobile and desktop UIs for the Open Bounties and Activity pages, not very different from what I could see online. I immediately listed several UI/UX improvements as notes. More on that later.

Next, I chose to work on the organizations' side of the application and started with the Desktop experience because it was the one that those users would be seeing most frequently. When it was defined, I adapted the main screen layout to the mobile, so that the Organization members could also browse their Bounties from their phones and Status team would see that I also care about the mobile experience for their users.

The original design included pagination by the end of the Open Bounties pages. I replaced it with a Load More button. I've learned about those during my 7 years building e-commerce websites. It's a common design question: Pagination, Load More button or Infinite Scrolling? Even Smashing Magazine wrote an extensive article that I've recently sent to a couple of colleagues at work.

2 days of design work later, I sent an InVision prototype link to the Status team.
What do you think about the layout? Let me know your thoughts.

Early this year, after completing a couple of initial projects, I told to my Head that I would like to take full design ownership of the native apps rebuild and redesign project, which was about to begin. It involved migrating the full app portfolio (10 apps) into a native iOS and Android app. This project is still in development and I'll be writing about it later when it's live, in 2018.

The answer was “Sure, but you'll also take care of the design for Flynder.” Flynder.com is a small startup within our company, but I didn't took it lightly. Flynder's design has been neglected since the beginning and this young company never got proper attention from our product team. Even its logo was made by a freelancer or some external design agency.

By that time, the team wanted to launch a blog on their website, in order to have a better rank on Google and to give their users extra insights about the Flight travel business. I said to the PM that started working with me on this team that they needed a redesign and prepared for a 1.5h meeting with the business team to present my proposal.

On this presentation, I've outlined why a redesign was needed and showcased examples of the usability issues they had on their website, based on my analysis as a Lead UI/UX Designer and the thoughts of potential users via peek.usertesting.com, an online usability testing tool.

Suggesting to design systems instead of web pages, implement interface patterns and create scalable systems, I proposed 4 redesign steps:

Step 1 – Footer & UI styles

• Bring the website to a more modern look.
• Make the buttons more elegant and brand-like.

Step 2 – Deals & Blog pages layout

• Increase readability and create vertical rhythm.
• Improve the user experience for all content pages.

Step 3 – Header & Navigation

• Allow more screen state for the page content.
• Make navigation clearer and prominent on mobile.

Step 4 – Deal cards on homepage and within blog pages

• Add contrast, clear hierarchy and reduce clutter.
• Clearly distinguish between deals and blog posts.

After giving a short preview on the first 2 steps, I've also suggested to focus on usability testing and further refinements when the UI redesign is implemented.

As a UI/UX Designer, I need to think about the overall look–and–feel and content hierarchy.
Thus, I had to know which elements were to be more prominent and appear first on their website. In order to get those, we proceeded with a brief workshop where the team was asked to define the following aspects:

Company Mission

☛ What is Flynder for.

User Goals

☛ What's the website ultimate purpose.

Target Market

☛ What type of users —demographics, personality traits, etc.

Tonality

☛ Visual scale (from 1 to 6) on how informal or serious the brand is.

As you can see, I was the only one in the group thinking that the brand tends to be more serious. This measurement was crucial for me to decide on using rounded UI elements and playful graphics.

Plans & Strategy

☛ What’s next.

Futurespective

☛ What is called “Tweet to the future”, where I asked the team to define what would they like to tweet in a year from the workshop —what they achieved by that time, for example.

My tweet was “Users love Flynder's style that we've created and keep on returning”.

Global features

☛ Asked them to rank elements on the global website (navigation elements, social media, vouchers, contests) in terms of what’s more and less important, with static post–its that can be moved around on a whiteboard.

Deals info

☛ Asked to do the same but with the elements inside a deal page (price, class type, origin, destination, title, airline and other deal info like if it’s a direct flight and/or a last minute one), since it’s the main landing page for their product, in order to know what should be the hierarchy when redesigning it.

After the 90–minute workshop described above, I confidently proceeded with a redesign that was inline with business and user needs. You can find the results bellow.

Contests

☛ Flynder contest page proved to be easy for the customers to use, doubling the newsletter subscribers.

Homepage deal cards

Blog posts

After the design course, I've specialized in visual design through my master studies and early years of career, but kept thinking on interaction design concepts as feedback and affordances when I moved to Barcelona to join a startup designing mobile apps.

Apart from great teachers, there were other learning facilities that I'm still a big fan of. One of them are plain books. Other – less conventional ones, that I frequently use to update my knowledge on the UI and UX and keep up with entrepreneurship, technology, science or any other areas of personal interest – are newsletters, online courses, blogs, international web conferences and local geeky Meetups.

My personal influencers and references list has been evolving together with technology and learning possibilities. On the online courses sphere, for example, I've started with Lynda.com during my early career years and now I only watch TED, tech conferences and Coursera videos, while occasionally persisting on programming at Codecademy.

Another way that keeps me up to date on IxD and UX latest developments is by being an early adopter. Getting access to apps in private beta, usually before they even reach the European market is one of the best ways to stay on top of the next big thing. When asked for my favorite app or website during interviews, I tend to block, meanwhile trying to remember the last one that truly impressed me. It's very much easier to just talk about the few apps that I've downloaded this year and still have on my phone: Steller, Hitlist, Moves, Paper or Learnist, even though they won't probably be there in 2015 anymore.