Designing the first mobile app

Experts needed a faster, more flexible way to apply for projects, without being tied to a desktop. We delivered Atheneum’s first mobile app to meet that need. I led the end-to-end design, transforming a clunky, fragmented workflow into a seamless mobile experience. The result? applications completed 39% faster, validated before and after release by 1,000+ beta users, and meaningful wins for both experts and internal teams.

Challenge

Atheneum is a platform that connects clients with experts across a wide range of industries to gather insights.  Experts could apply to projects via the desktop website that was clunky, slow, and decidedly not overly mobile-friendly. Most experts needed to be near a computer before they could even consider applying and the company was concerned it was losing experts due to this experience.

Project goal:  Design a dedicated mobile app that would allow experts to discover and apply to projects on the go, quickly, easily, and seamlessly.

The original desktop website

Groundwork & discovery

I began by reviewing the existing web application.  Rather than duplicating it screen-for-screen, I focused on identifying the core functionality and opportunities for improvement. Early user insights already pointed to some key frustrations: 

No visibility into project status
No ability to save progress or availability
The overall process was long-winded and prone to abandonment

I mapped out the core journey for applying to a project alongside the project manager, highlighting all key touch points. This helped define both  the information architecture and the core screens needed for the app.

For the initial scope, we aimed to focus on, login and sign up, project application and also the user profile.

Mapping the project application flow

Prototyping

I created a mid-fidelity clickable prototype in Figma, centred around the key flows. This took about two weeks, including iteration loops with the team and stakeholders.

Once the prototype was ready, I ran five remote usability testing sessions with experts over Zoom to validate the prototype before moving forward.

Early wireframe prototype of the core screens

Testing & validation

The prototype enabled effective testing of the overall structure, logic, and user flow. Feedback was largely positive, experts found the app intuitive, and the streamlined journey was seen as a strong improvement.

However, users found the initial method for adding availability unintuitive, so we revisited and refined that part of the experience. Screening questions were also flagged as clunky, but this was a known legacy issue that would require more significant structural changes in a future phase.

Testing the prototype with users (who's that charming looking man?)

Defining the visual language

There was no existing UI library, so I developed the visual style. I focused on foundational styles such as typography, colours, spacing, buttons, that would scale. Through discussions with our developers i learnt that using React Native components, would save engineering effort and make the process more efficient rather than create custom components.  

I kept in close sync with developers to ensure design matched technical feasibility. This kept rework to a minimum and avoided the dreaded "can we build this?" surprises (phew!).

Defining the UI libary

UI design & implementation

With the base style guide set, I designed the full UI for core screens over the next month, working in fast feedback loops. Meanwhile, developers began implementation using the original prototype, keeping progress aligned.

We released a beta via TestFlight to expert users, validating the experience on real devices. Feedback was positive, experts could apply to projects smoothly. A highlight was the new availability selector, which replaced a clunky free-text field and cut down scheduling back-and-forth for both experts and internal teams.

UI design for the core screens

Results

✅ Application time improved by 39% compared to desktop

3:04 mins app average compared to 4:98 mins desktop average
✅ 10,000 users onboarded within the first 6 months

Which helped us to gather early usage data and feedback to inform improvements
✅ 28% faster response time from users via the app

Only 47% of desktop users responded to a project within 4 hours compared to 60% via the app.

💡Key learnings

Leveraging native components

Where possible always try to use native components, less overhead, faster to build.

Supporting different user types

The app needed to support both internal staff recruiting for projects and external experts applying for projects, a good example was the availability tool. It’s important to make sure you speak to and define all user types in the early stages.

Remembering not all users are the same

Whilst most global territories adopted the app without question, there were some that simply do not. The Chinese market for example had a strong preference for using WeChat instead of downloading a dedicated app.

🥵 Challenges

Screening questions

This was a known problem area, making improvements required backend changes and was descoped for further iterations, so we documented all feedback and saved it for a future sprints.

No guidelines

There was no formal guide to setting up screening questions for internal teams, which led to usability issues (e.g. using free text format for multiple choice questions). I began compiling practical design guidelines for when we revisited these flows, to ensure a better experience for users in future.

User log in

We implemented a one time login link option for sign up, which we deemed as an option that would support users and allow seamless access, which actually resulted in more pain points then a standard password.

UI design for the mobile application

Role: Senior product designer

Project duration: 13 months

Team: Project manager, two developers, a QA, and myself as the sole product designer and was responsible for the entire end-to-end design process.

Responsibilities: User research • Ideation and prototyping • validation • testing • UI • interaction design • content design • post-launch iterations and improvements.

Tools: Miro • Figma