Mission
Designing a marketing tool to collect and analyze data from multiple sources (studies, surveys etc.)

CLIENT

Pocket Result

When they've approached me, Pocket Result was a tiny startup who wanted to create a powerful tool to help marketing services to adjust their retail performance measure, customer relationship management, and business strategy. They've already had a first version of the web app and few early adopters, but they need a designer to create a solid identity to the product and help them to design core features for the app.

Due to NDA constraints, I cannot show all the work I’ve done for the company. I will restrict this case study to the overall visual design, few app features and my global approach for the mission.

CHAP 1.0

Working on
Visual design

My first work was to reshape the product identity. The visual language has to translate the complexity of the app algorithm into a simple look and feel. I’ve kept the design system modularity in mind to add/delete app functionalities over the time without breaking anything. The identity should also convey human values in order, not to bee too cold and technical. I also have to use both green and orange brand primary colors.

Bellow you could see the visual identity applied to few dashboard modules.

FIG #1. VISUAL IDENTITY OF THE APP

FIG #2. VISUAL DESIGN APPLIED TO FEW STRUCTURAL ELEMENTS

CHAP 2.0

Dashboard
UX design

A big part of my work on this project was to think about the better approach to design the main dashboard of the app. The client has a clear idea of the features what was a good start. I’ve first set up a list of all data source and type content which should be displayed. With this big picture in mind, I’ve started wireframing a modular design system.

The dashboard should be responsive, and its content has to be highly customizable by the users. It means that every user should be able to set-up is own dashboard view, displaying the type of data he wants to see. With these constraints in mind, I’ve quickly thought about designing a dashboard with adaptable tiles, showing multiple types of content: text, images, and of course all kind of data viz. 

FIG #3. RESPONSIVE & CUSTOMISABLE GRID SYSTEM

FIG #4. DIFFERENT WIDGET CONTENT TYPE

CHAP 3.0

Applying visual design
to the dashboard

My approach here was pretty simple because I've already designed low-fid wireframes for each tile. I've tried to use the white space as a design constitutive element in order to improve content legibility, what is a real issue for dashboard design.  

I've used Open Sans as the primary typeface for its large font styles but also because it remained highly legible and adapted to letters and numbers (it sounds good for a dashboard right ?!). Both green and orange colors were used to highlight the tiles data.

FIG #5. DIFFERENT WIDGET CONTENT TYPE

After few adjustments and a deep thinking about the UX of the filter display feature (which unfortunately I can’t show you here due to NDA constraints), I’ve been able to design a completely new dashboard including the new identity of the product and all the features the client wanted.

You can see the result bellow. 

FIG #6. FINAL DESIGN

CHAP 4.0

Designing a survey app

Another part of my work was to design a survey app from scratch. As I said in the intro, Pocket Result want to bring a different kind of tool to improve data viz but also data collect. And one important part is a tool to create surveys. The web app has to be tablet ready for face to face and remote surveys. I’ve started this part of the mission after we've worked on the identity and the dashboard design. It was primarily a UX work even if I had to adapt the brand visual identity to the app itself.

FIG #7. RESPONSIVE & CUSTOMISABLE GRID LAYOUT

  • A wide diversity of answers typology

    Single choice, Multiple choice, Long text, Sorting, Rating system, Media addition, etc.

  • High level of user feedback controls

    Question answered question left, approximative time left, survey position, etc.

  • Optimized content readability and legibility

  • Touch screen compatible

  • Easy navigation

As soon as we have defined the content typology, I’ve designed few screens in order to have a better overview of each survey. You can see some of them bellow:

FIG #8. QUESTION TYPOLOGY TEST LAYOUTS

Aurelien has shown a perfect understanding of our project. His excellent organization and his good mood have allowed a particularly pleasant cooperation despite the remote work.
Christophe Harrer, CEO Pocket Result