Le trung

Prosper Case study: Content always comes first

What do you do as a UX designer when clients provide vague requirements? You might think this gives you more creative freedom to shape the product, but that’s not always true. In most situations, clients have ideas in mind; they just haven’t articulated them yet.

The result can be a misunderstanding of the client’s ideas, leading to dissatisfaction, project revisions, and an overwhelming amount of ongoing feedback.

As a UX designer, you uncover those hidden ideas by asking the right questions and obtaining approval at each stage of the product development cycle.

This case study will demonstrate my approach to such a predicament. 

Disclaimer: Because I signed an non-disclosure agreement, I've altered most of the project's details, including the brand name and the structure and functions of the admin site.

About Prosper

Prosper is a horoscope consulting business that focuses on delivering personalized astrological guidance. With a team of skilled astrologers and consultants, Prosper provides detailed horoscope readings tailored to each client’s unique birth chart and astrological profile.

They offer personalized consultations with real people and guidance through their mobile app.

My job as a UX designer involves creating designs for their website, admin page, and mobile application.

Problem 

When I first engaged with Prosper, the initial requirements were unclear. The client had a vision for their website but struggled to articulate specific features and content. 

This vagueness posed a risk of misalignment between their expectations and the final product.

My Approach

Comprehensive Questionnaire

To gain a deeper understanding of Prosper’s business and products, I created a detailed questionnaire. This tool helped uncover essential information about their goals, target audience, and desired features. The insights gathered from the questionnaire provided a solid foundation for the design process.

Style Agreement

Once I had a clearer understanding of their needs, I ensured that we agreed on a specific design style before proceeding with the website and mobile app development. This included discussions about color schemes, typography, visual elements, and overall aesthetics. 

The method I use to agree on style is to give them a list of websites then ask what they like/ don’t like about each of them, what were their favorites, and did they have other websites in mind. 

After that, I explained to them the style I was going to use, with details about colors, typography, components,..

Content Approval

Before diving into the actual website design, I developed wireframes to outline the website’s content. 

I presented the wireframes to the client for feedback and approval. This step was crucial, ensuring we were aligned on the content and structure before I began creating the high-fidelity website. By securing their agreement at this stage, we minimized the risk of misunderstandings later in the process.

I always consider content to be the most crucial element when designing a website or landing page. It serves as the foundation for the entire design. If content needs to be changed later in the process, it can significantly impact the design, leading to potential delays and wasting valuable resources. 

By prioritizing content from the outset, we can ensure a smoother design process and keep the project on track.

Website copy needs to be precise and communicate what the business does and how it can help users. By conducting market research and meeting with clients, I can identify users’ pain points and create a copy that effectively addresses their needs as well as align with the business vision. 

To delve deeper into how I craft effective copy, I would need to create another case study dedicated specifically to UX writing and copywriting. So in this article, I only focus on the UI/UX aspect of the products. 

Iterative Design Process

After receiving client approval on the wireframes, I proceeded to design the high-fidelity website and mobile app. Throughout this phase, I maintained open communication with the client, soliciting feedback at key milestones to ensure the designs met their expectations and requirements.

Results

By following this structured approach, I successfully transformed vague requirements into a clear and actionable plan for Prosper. The final product met the client’s expectations while delivering a seamless user experience. 

Website Design

Initially, I created two design options: dark mode and light mode, and then I asked the clients for opinions. They opted for the dark mode because it aligns with their brand’s vibe.

The dark background represents a night sky, featuring a subtle horizontal light motif that adds a touch of mystery.

The website’s minimal design is complemented by a playful touch, using the Tiempos font and incorporating large border-radius elements.

As the website designs became more polished, it was time to optimize them for mobile devices. Ensuring the website functions seamlessly on all screen sizes is crucial.

Mobile Application Design

The Prosper mobile app lets users create horoscope profiles for themselves and their friends. It also provides life charts along with future predictions and advice so that users can make better decisions about their daily and future lives.

I used a simple design style with a white background to minimize distraction. For the Horoscope profile, I felt that the design was a bit plain, so I incorporated more vibrant profile pictures, which represented each zodiac sign.

The cards are arranged in masonry layout to create a balanced contrast.

Admin site

Conclusion

This case study illustrates the importance of prioritizing content and user understanding in the UX design process. By actively engaging with clients, asking the right questions, and fostering collaboration, I was able to effectively navigate the challenges of vague requirements. The success of the Prosper transformation underscores the value of clear communication and user-centric design in delivering a successful product.

More Design Case Studies