Design process
Understanding. Client’s/user’s needs, design challenge, users, features. Current product walkthroughs, interviews with stakeholders, competitive analysis.
Structure, create workflows and wireframes.
Iteration, quick testing. Agreement on the structure and content.
UX prototype, UI design in Figma (mobile, desktop). Informal testing.
Final UI, design system, icons and assets, general look and feel.
Programming (developers working in progressive sprints). Iterative UX/UI checking and revision.
Publication of the app. Period of internal kickoff and correction of errors and improvements. Final training, instructions guide and handover to the client.
The challenge
The challenge was to transform a 20 year old Lotus-based intranet into a new intranet and employee app, containing features as news, selling of products, employees ads, voting of non profit projects, mobile and desktop profile-targeted notifications, etc.
During the first phase of the project there was an acquaintance with the existing UI and functionalities, an understanding of the technical requirements, and a deep dive into the needs and requirements the company wanted (stakeholders, users). Also, I did a competitive analysis of similar products and apps.
Wireframes
I developed the user flows and wireframes for the different user scenarios and tasks.
Samples of wireframes and user flows for the different sections and funcionalities:
Workflows / Processes
Some of the processes were complex and involved several stakeholders so I had to talk to several people to understand them. This diagram showcases the shopping process of products made by the employees of the company. There is a database with all the products available for them. The App reads the products from the database, the user chooses them, there is a logic for each category of product (amount a single person can buy every 30 days), then a confirmation email is sent, after a few days the user picks up the purchase, etc.
Several departments, people and technical processes were involved in this shopping process so understanding their intricacies was key.
Employer shopping process
Notification process
Login process
AB testing
AB testing and informal user testing and walkthroughs were made to test specific functionalities of the app.
Final Screens
Some key features
Final Screens – Web/intranet version
Product shopping area
Dashboard / Home
Bulleting board for employees
Sequenced timeline to present NGO projects and vote for them
Uploading a new product to the bulletin board
News section
Manual with instructions
Development of the user manual with WP instructions.
Training sessions for the content editors.
