Enhancing the ease of searching.
The National Advanced Placement and Prior Learning(N-APPL) program helps current and former military members transition to their next career by evaluating their skills and expertise acquired throughout military training.
Role
UI/UX Designer
Skills
User Research, Visual Design, Prototyping
Duration
4 Months
Tools
inVision, Figma
Overview
Background
As more veterans show interest in switching careers, there's a growing demand for the N-APPL website with a request from stakeholders for additional qualitative and quantitative information.
Problem
However, the sitemap of the website lacked the scalability to accommodate the request.
Outcome
I built a new user flow and information architecture, created high-fidelity mockups, worked with other designers and developers to implement updates.
End Result
Background Research
Understand N-APPL
To underline the current issue quickly, I threw myself to the current website and conducted a heuristic evaluation on it. Here are some paint points that caught in my eye.
Fragmented Information
The biggest pain point expressed by interviewees was their journey to browse information. While users get to explore information, only a small portion is available on the page, with the majority leading to external links. This structure causes users to become confused by navigating through various tabs, leading to reduced engagement.
Unclear Call To Action
The landing page faces issues as it lacks a compelling call to action, and the search feature was obscured with unclear wording on a button and not functioning as users would expect, giving the impression that the website is not well-maintained.
Missing Aesthetic Details
Another minor problem, in terms of aesthetics, was that graphic contents such as logos of partners were cluttered. Also, the way of explaining key terms are not so well displayed.
Define User + Business Goals
Emphasizing with Problems
Then we interviewed three potential users and clients to ensure how these problems found are hindering users. After analyzing our findings, we were able to obtain valuable insights to paint points users are currently experiencing, their demands and motivation.
How might we..
help to browse information seamlessly and
encourage to contact advisors?
Developing Solutions
Rebuilding Information Archtecure
Considering the research results, we adjusted the website's sitemap and information architecture. The crucial aspect is that all three categories are interconnected, ensuring users experience a seamless journey by clicking through related data until they complete their goal.
Design Exploration & Iteration
After defining the information structure and sitemap, I researched layout design for inspiration and started visualizing a few layout ideas.
During the design research for inspiration and discovered a common design pattern on many websites: multiple tabs with suitable identifiers for each category.
I decided to apply this design pattern after design discussion with the team, as it doesn’t overwhelm users with all the content while still enabling them to expect what they will find.
Having multiple rounds of feedback with low-fid wireframes from the team and stakeholders, I iterated the overall website design to find the best layout.
This process helped me to shape the layouts and user flow before applying the design system.
I also collaborated closely with the Program Planning Analyst to ensure clear and thoughtful descriptions for all contents.
Final Design
OLD
NEW
Refection
What I learned during this project
It was my first time working on a collaborative project outside of school assignments! I was happy to see my design thinking and decisions are being heard, modified and used in a ‘real’ project. Here are some of my reflections on this project.
Keep Things in a Efficient Manner
Collaborating with people outside of the team requires dealing with many resources and tools I’ve never heard of or barely used. The longer the project goes on, the easier all the files and elements get messy. It was a good exercise to deal with many files and information with many people during this project.
Documentation for Everybody
Working with developers outside of my comfort zone for the first time, I learned the significance of seamless design handoff to developers. as I navigated through the design process, I realized the critical role that a clear and detailed design handoff plays in ensuring a successful implementation of design solutions as well as communication with developers.